这些天我没什么事,一直都在聊天!趁着有空,我就整理以前做过的东西,顺便复习一下知识。无意中发现了这段代码,用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>
ps:我把整个需要用到的东西都上传了!需要看的童鞋,自己下载吧!
分享到:
相关推荐
jquery仿qq邮箱收件人,js没加密
jquery仿qq邮箱收件人,js没加密
jquery实现邮箱收件人效果 很不错的代码 比较易懂
Jquery仿收件人效果 autocomplete,Jquery仿收件人效果 autocomplete, 多选。 测试可用
Jquery仿163收件人效果加邮箱验证以及autocomplete模糊匹配查询效果
jQuery实现网易邮箱页面是一款jquery.fullPage插件。
基于Bootstrap和JQuery实现仿PC文件管理源码.zip基于Bootstrap和JQuery实现仿PC文件管理源码.zip基于Bootstrap和JQuery实现仿PC文件管理源码.zip基于Bootstrap和JQuery实现仿PC文件管理源码.zip基于Bootstrap和...
JQuery实现仿sina新浪微博新鲜事滚动
jquery实现仿qq相册功能,亲测可用。是制作电子相册及相关功能不错的代码。
Jquery实现仿淘宝天猫左侧分类导航插件,供大家一起共同分享学习。
jQuery实现仿淘宝商品评价,
我们经常在注册页面邮箱填写的input 输入框内,输入邮箱的时候底部出现一些163,QQ,gmail等等的一些提示,这种效果是简单的JS实现的,今天给大家推荐的就是
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
基于jquery实现的Email中的收件人效果,可通过del键删除,需要的朋友可以参考下。
jQuery仿Windows系统文件夹目录操作代码,来自资源搜索。
使用jQuery实现仿2010京东商城商品分类导航菜单。测试通过IE 6+, FF3.0+
分享jquery实现仿flash圆盘抽奖特效。
Jquery实现仿搜索引擎文本框自动补全插件 包中含有:jquery-1.7.2.min.js,关键类库:jquery.bigautocomplete.js,应用于百度搜索自动提示内容.
jQuery实现仿百度搜索时的下拉列表文档,最好自己研究再改一下