jquery实现仿邮箱收件人

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lanjian056/article/details/52711299

      这些天我没什么事,一直都在聊天!趁着有空,我就整理以前做过的东西,顺便复习一下知识。无意中发现了这段代码,用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=# οnclick=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="" οnmοusemοve="">
	</div>
</div>
<input type="text" id="code" name="code"/>
</td>
<td>
<div class="list" exp="">
<ul>
	<li><a href="#" οnclick="javascript:selected('张山','1001');">张山</a></li>
	<li><a href="#" οnclick="javascript:selected('李斯','1002');">李斯</a></li>
	<li><a href="#" οnclick="javascript:selected('王武','1003');">王武</a></li>
	<li><a href="#" οnclick="javascript:selected('赵溜','1004');">赵溜</a></li>
</ul>
</div>
</td>
</tr>
</table>
</body>
</html>
展开阅读全文

没有更多推荐了,返回首页