Das Beispiel in diesem Artikel beschreibt die Implementierung des js-ähnlichen Discuz-Textfeld-Popup-Ebeneneffekts. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Diese Frage wurde in klassischen Foren heftig diskutiert. Ich erinnere mich, dass es eine ähnliche Funktion im QQ-Postfach gibt und sie auch im Discuz7.0-Forum verfügbar ist. Wenn Sie mit der Maus auf das Textfeld klicken, wird eine Nachricht angezeigt Das Formular enthält eine elementlose DIV-Ebene, die sehr praktisch ist und dem Textfeld automatisch hinzugefügt wird. Dieser Code wurde viele Male ohne allzu große Verschönerung überarbeitet. Wenn Sie gut in Kunst sind, können Sie ihn selbst verschönern.
Der Screenshot des Laufeffekts sieht wie folgt aus:
Der spezifische Code lautet wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文本框弹出内容框并取值</title>
<Script language="javascript" type="text/javascript">
function moveselect(obj,target,all){
if (!all) all=0
if (obj!="[object]") obj=eval("document.all."+obj)
target=eval("document.all."+target)
if (all==0)
{
while (obj.selectedIndex>-1){
mot=obj.options[obj.selectedIndex].text
mov=obj.options[obj.selectedIndex].value
obj.remove(obj.selectedIndex)
var newoption=document.createElement("OPTION");
newoption.text=mot
newoption.value=mov
target.add(newoption)
}
}
else
{
for (i=0;i<obj.length;i++)
{
mot=obj.options[i].text
mov=obj.options[i].value
var newoption=document.createElement("OPTION");
newoption.text=mot
newoption.value=mov
target.add(newoption)
}
obj.options.length=0
}
}
function dakai(){
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'
}
function guanbi(){
var yuanGong=document.getElementById("yuanGong")
yuanGong.value=""//如果不加这句，则每次选择的结果追加
var huoQu=document.getElementById("D2")
for(var k=0;k<huoQu.length;k++)
yuanGong.value=yuanGong.value + huoQu.options[k].value + " "//这里的" "中间为空格，为字符间的分隔符，你可以改成别的
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none'
}
</script>
<style>
.black_overlay{display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-color:#FFFFFF;z-index:1001;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);}
.white_content {display: none;position: absolute;top: 25%;left: 25%;width: 50%;height: 50%;padding: 16px;border: 16px solid orange; margin:-32px; background-color: white;z-index:1002;overflow: auto;}
</style>
</head>
<body>
<input type="text" id="yuanGong" onclick="dakai()" size="50">
<div id="light" class="white_content">
<table border="1" width="350" id="table4" bordercolor="#CCCCCC" bordercolordark="#CCCCCC" bordercolorlight="#FFFFFF" cellpadding="3" cellspacing="0">
<tr>
<td width="150" height="200" align="center" valign="middle">
该部门员工
<select size="12" name="D1" ondblclick="moveselect(this,'D2')" multiple="multiple" style="width:140px">
<option value="员工1">员工1</option>
<option value="员工2">员工2</option>
<option value="员工3">员工3</option>
</select>
</td>
<td width="50" height="200" align="center" valign="middle">
<input type="button" value="<<" name="B3" onclick="moveselect('D2','D1',1)" /><br />
<input type="button" value="<" name="B5" onclick="moveselect('D2','D1')" /><br />
<input type="button" value=">" name="B6" onclick="moveselect('D1','D2')" /><br />
<input type="button" value=">>" name="B4" onclick="moveselect('D1','D2',1)" /><br />
</td>
<td width="150" height="200" align="center" valign="middle">
未划分部门员工
<select size="12" name="D2" id="D2" ondblclick="moveselect(this,'D1')" multiple="multiple" style="width:140px">
<option value="员工4">员工4</option>
<option value="员工5">员工5</option>
</select>
</td>
</tr>
</table>
<a href = "javascript:void(0)" onclick = "guanbi()">确定</a><BR><BR>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.
