js implémente les compétences effect_javascript de la couche contextuelle de zone de texte Discuz d'imitation-js tutoriel-php.cn

js implémente les compétences effect_javascript de la couche contextuelle de zone de texte Discuz d'imitation

WBOY

Libérer： 2016-05-16 15:45:22

original

1167 Les gens l'ont consulté

L'exemple de cet article décrit l'implémentation de l'effet de calque contextuel de zone de texte Discuz de type js. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

C'est une question qui a été vivement débattue dans les forums classiques. Je me souviens qu'il existe une fonction similaire dans la boîte aux lettres QQ, et elle est également disponible dans le forum Discuz7.0. Lorsque votre souris clique sur la zone de texte, un message apparaît. contenant du texte et des images apparaîtra, le formulaire a un calque DIV sans élément et les éléments à l'intérieur peuvent être utilisés, ce qui est très pratique. La valeur sélectionnée sera automatiquement ajoutée à la zone de texte. Ce code a été révisé plusieurs fois sans trop d'embellissement. Si vous êtes doué en art, vous pouvez l'embellir vous-même.

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

<!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>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.