jquery實現仿郵箱收件人

讓愛遠航發表於2016-09-30
jQuery

      這些天我沒什麼事，一直都在聊天！趁著有空，我就整理以前做過的東西，順便複習一下知識。無意中發現了這段程式碼，用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>

相關文章