jquery實現仿郵箱收件人
阿新 • • 發佈:2018-12-24
這些天我沒什麼事,一直都在聊天!趁著有空,我就整理以前做過的東西,順便複習一下知識。無意中發現了這段程式碼,用jquery實現的仿QQ郵箱新增收件人形式的一個例子。只是一個例子,如果大家有需要,可以根據自己的需求修改一下。寫的比較簡陋,望大家見諒!
<!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=gbk" /> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <title></title> <style> *{font-size:12px} .out1,in1{border:1px inset #ccc;height:20px;overflow-y:hidden;line-height:20px;width:500px} #input1{border:0px;clear:none} img {border-width: 0px 0px 0px 0px} <!--就是這行 程式碼起作用--> </style> <script language="javascript" defer> $(document).ready(function() { $("#code").val(''); }); function selected(name,code) { var ids = $("#code").val(); if(ids.indexOf(code) == -1){ //沒有找到匹配的id $("#in1").append("<div style='width:auto;float:left;' id="+code+">"+name+" <a href=# onclick=javascript:deleteCode("+code+");><img src='cal.png'/></a>;</div>"); $("#"+code).hover(function(){ $(this).css("background","yellow");},function(){ $(this).css("background","white"); }); //新增隱藏域的值 ids += code + ","; $("#code").val(ids); } } function deleteCode(code){ alert(code); var ids = $("#code").val(); $("#code").val(ids.replace(code+",","")); $("#"+code).remove(); } </script> </head> <body> <table> <tr> <td width="10%" aglin="right"> 收件人: </td> <td> <div class="out1" id="out1" exp=""> <div class="in1" id="in1" exp="" onmousemove=""> </div> </div> <input type="text" id="code" name="code"/> </td> <td> <div class="list" exp=""> <ul> <li><a href="#" onclick="javascript:selected('張山','1001');">張山</a></li> <li><a href="#" onclick="javascript:selected('李斯','1002');">李斯</a></li> <li><a href="#" onclick="javascript:selected('王武','1003');">王武</a></li> <li><a href="#" onclick="javascript:selected('趙溜','1004');">趙溜</a></li> </ul> </div> </td> </tr> </table> </body> </html>