仿开心网好友选择功能
转贴至：javaEye开发社区
<!doctype html public "-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>選擇好友</title>
<style type="text/css">
body{font-size:12px;margin:0;padding:0;}
.clearfix{zoom:0;}
.clearfix:after{content:'.';display:block;visibility:hidden;clear:both;height:0px;}
#selectfriend{float:left;border:1px solid #808080;width:400px;line-height:19px;font-size:12px;margin:10px 0 0 10px;}
#selectfriend .shaw{float:left;width:99.6%;border:1px #fff solid;border-right:0;padding-top:1px;}
#selectfriend .fribox{cursor:text;float:left;width:350px;border-top:1px #fff solid;border-left:1px #fff solid;position:relative;left:1px;}
#selectfriend .fribox .fri{background:#E0E5EE; display:block; border:1px solid #CCD5E4; float:left; margin:1px 5px 1px 0; padding:0 5px; _padding:3px 5px 2px 5px;}
#selectfriend .fribox .fri img{border:0;cursor: pointer;}
#selectfriend .fribox input{line-height:19px;width:50px;border:1px solid #fff;float:left;outline:none;}
#selectfriend a.selbtn{display:block;width:16px;height:16px;float:right;margin:3px 3px 0;padding:3px 3px 0;background:url(http://img1.kaixin001.com.cn/i/xx_xx1.gif) no-repeat center;cursor:pointer;}
#selectfriend a.on{display:block;width:16px;height:16px;float:right;margin:3px 3px 0;padding:3px 3px 0;cursor:pointer;background:url(http://img1.kaixin001.com.cn/i/xx_xs1.gif) no-repeat center;}
#selectfriend .frisel a:hover.select{background:url(http://img1.kaixin001.com.cn/i/xx_xx2.gif) no-repeat center;}
.default,.autobox{background:#EEEEEE; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: #666666; width: 220px; border-color:#98B1C8 #7F7F7F #7F7F7F #98B1C8;border-style:solid;border-width:1px 3px 3px 1px;padding:2px 5px;position:absolute;}
.autobox{background:#fff;}
.autobox div{width:98%;;margin:1px;padding:3px 0;cursor:text;background:#fff;border:1px solid #fff;border-bottom:1px solid #cccccc;}
.frisel{float:right;position:relative;right:1px;}
.frisel .allfriend{background:#FFFFFF;border:1px solid #98B1C8;padding:2px;position:absolute;right:-3px;width: 310px;display:none;}
.frisel .allfriend ul {margin:0;padding:0;float:right;width: 300px; height: 100px; overflow-y: scroll; overflow-x: hidden;}
.frisel .allfriend ul li{float:left;text-align:left;width:80px;list-style:none;background:#FFFFFF;border-bottom:1px solid #EEEEEE;color:#666666;height:20px;padding:2px 5px;}
.frisel .allfriend .sgt_on {background:#F2F6FB;border-bottom:1px solid #EEEEEE;color:#000000;height:20px;padding:2px 5px;}
.frisel .allfriend .l {float:left;}
.frisel .allfriend .r {float:right;padding-right: 20px;}
.frisel .allfriend .sgt_of {background:#FFFFFF;border-bottom:1px solid #EEEEEE;color:#666666;height:20px;padding:2px 5px;}
.p5{padding:5px;}
.gbs1 {border:1px solid #E2E2E2;float:left;}
.gb1-12, .gb2-12 {
background:#E5E5E5 none repeat scroll 0 0;
border-color:#FFFFFF #6A6A6A #6A6A6A #FFFFFF;
border-style:solid;
border-width:1px;
color:#333333;
cursor:pointer;
font-size:12px;
height:23px;
padding:3px 5px
}
.gb2-12{background:#dddddd;}
</style>
</head>
<body>
<div id="selectfriend">
<div class="shaw">
<div class="fribox">
<input class="val" type="text" maxlength="20"/>
</div>
<div class="frisel">
<a class="selbtn" href="javascript:" alt="选择好友" title="选择好友"/></a>
<div class="allfriend">
<div style="width: 300px;" class="sgt_on">
<div class="l">请选择发送对象</div>
<div style="padding-right: 20px;" class="r"><span id="selall" style="display: none;"><a href="javascript:" class="sl">全选</a> </span><span><select name="group" id="group"><option value="">全部好友</option> <option value="现在同事">现在同事</option> <option value="以前同事">以前同事</option> <option value="大学同学">大学同学</option> <option value="高中同学">高中同学</option> <option value="家人亲戚">家人亲戚</option> <option value="挚交好友">挚交好友</option> <option value="普通朋友">普通朋友</option> <option value="朋友的朋友">朋友的朋友</option> <option value="其他">其他</option></select></span></div>
</div>
<ul class="friendList">
</ul>
<div class="tac p5">
<div class="gbs1"><input type="button" class="gb1-12" title="确定" value="确定" id="btn_qd"/></div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var bind = function(obj,func){
return function(){
func.apply(obj,arguments);
};
};
var get=function(className, tag ,root) {
if(arguments.length==1){
root = (arguments[0]) ? (typeof arguments[0]=="string")?document.getElementById(arguments[0]):arguments[0] : null || document;
return root;
}
root = (root) ? (typeof root=="string")?document.getElementById(root):root : null || document;
if (!root) {return [];}
var nodes = [],elements = root.getElementsByTagName(tag);
for (var i = 0, len = elements.length; i < len; ++i) {
if(elements[i].className==className||className=="*"){
nodes[nodes.length] = elements[i];
}
}
return nodes;
}
var addEventHandler=function(obj, type, func) {
if(!obj){return;}
var doOn=function(o){
if(o.addEventListener){o.addEventListener(type, func, false);}
else if(o.attachEvent){o.attachEvent("on" + type, func);}
else{o["on" + type] = func;}
}
var IsArray=function(v){
try{
var a = v[0];
return typeof(a) != "undefined";
}catch(e){
return false;
}
}
if(obj.tagName!='SELECT'&&IsArray(obj)){
for(var i=0,oLen=obj.length;i<oLen;i++){
doOn(obj[i],type.func);
}
}else{
doOn(obj);
}
};
var Lang={'zh_CN':{
'id':'开心ID：',
'tip':'请输入好友的姓名(支持拼音首字母输入)',
'del':'移除',
'empty':'姓名不在好友列表哦，请重新输入',
'select':'请选择好友！'
},
'en_US':{}
};
var show=function(id){
this.fribox= get('fribox','div',id)[0];
this.input = get('*','input',id)[0];
this.select = get('selbtn','a',id)[0];
this.listbox=get('allfriend','div',id)[0];
this.friendList=get('friendList','ul',id)[0];
this.tip=null;
this.autobox=null;
this.flag=undefined;
this.selAll=get('sl','a',id)[0];
this.showgroup=get('group');
this.submit=get('btn_qd');
this.getEvent=function(e){
var event=e||window.event;
if(event){return event.srcElement||event.target;}
};
this.batch=function(str){
var trim=function(html){
return (html=='')?'':html.replace(/(^/s*)|(/s*$)/g, "");
}
return (trim(str)=='')?'':trim(str.replace(/<.*?>/g,""));
};
}
show.prototype = {
create:function(tag,cName,pNode){
pNode==(pNode)?pNode:document.body;
var oo=document.createElement(tag);
if(cName){oo.className=cName;}
pNode.appendChild(oo);
return oo;
},
setFocus:function(e){
var target=this.getEvent(e);//獲取鼠標當前點擊對象
if(target.tagName=='HTML'&&this.autobox!=null){//如果點擊頁面和不在自動提示下拉層上，則隱藏下拉層
return this.autobox.style.display='none';
}
while(target&&target.tagName!="BODY"){
if(target==this.fribox||target==this.autobox){//向上遍歷，如果點擊位於好友選擇框或者自動提示層上，則出發onfocus事件
return this.input.focus();
}
target=target.parentNode;
}
},
showDefault:function(e){
this.select.className='selbtn';
this.input.value='';
this.listbox.style.display='none';
if(this.autobox!=null){this.autobox.style.display='none';}
if(this.tip==null){//如果提示層不存在，則自動創建并顯示
this.tip=new this.create('div','default',this.fribox);
this.tip.innerHTML=Lang.zh_CN.tip;
this.tip.style.backgroundColor='#eee';
}
this.tip.style.top=this.input.offsetTop+this.input.offsetHeight+6+'px';
this.tip.style.left=this.input.offsetLeft-3+'px';
this.fribox.parentNode.style.borderLeft=this.fribox.parentNode.style.borderTop='1px #000000 solid';
this.tip.style.display='';
},
hideDefault:function(e){
if(this.tip!=null){//如果提示層存在，則隱藏
this.fribox.parentNode.style.borderLeft=this.fribox.parentNode.style.borderTop='1px #ffffff solid';
this.tip.style.display='none';
}
},
FullData:function(){
var data=[{"uid":24567696,"real_name":["/u9648/u601d","chensi","cs"],"real_name_unsafe":"/u9648/u601d","type":"现在同事"},
{"uid":23248832,"real_name":["/u4e01/u5b97/u79cb","dingzongqiu","dzq"],"real_name_unsafe":"/u4e01/u5b97/u79cb","type":"现在同事"},
{"uid":24463857,"real_name":["/u97e9/u827a/u5170","hanyilan","hyl"],"real_name_unsafe":"/u97e9/u827a/u5170","type":"现在同事"},
{"uid":24742851,"real_name":["/u51b7/u6708","lengyue","ly"],"real_name_unsafe":"/u51b7/u6708","type":"现在同事"},
{"uid":15395689,"real_name":["/u5218/u83f2","liufei","lf"],"real_name_unsafe":"/u5218/u83f2","type":"现在同事"},
{"uid":43740747,"real_name":["/u9a6c/u4e3d/u4f1f","chensi","cs"],"real_name_unsafe":"/u9a6c/u4e3d/u4f1f","type":"现在同事"},
{"uid":752936,"real_name":["/u88f4/u7eaf/u658c","chensi","cs"],"real_name_unsafe":"/u88f4/u7eaf/u658c","type":"现在同事"},
{"uid":1158120,"real_name":["/u6734/u6c38/u5f6c","chensi","cs"],"real_name_unsafe":"/u6734/u6c38/u5f6c","type":"现在同事"},
{"uid":20782013,"real_name":["/u5b8b/u4f1f/u9f99","chensi","cs"],"real_name_unsafe":"/u5b8b/u4f1f/u9f99","type":"现在同事"},
{"uid":7001516,"real_name":["/u5510/u5a77/u5a77","chensi","cs"],"real_name_unsafe":"/u5510/u5a77/u5a77","type":"现在同事"},
{"uid":2672503,"real_name":["/u738b/u7fe0/u7fe0","chensi","cs"],"real_name_unsafe":"/u738b/u7fe0/u7fe0","type":"现在同事"},
{"uid":44584129,"real_name":["/u738b/u4eae","chensi","cs"],"real_name_unsafe":"/u738b/u4eae","type":"以前同事"},
{"uid":6801080,"real_name":["/u8c22/u6167","chensi","cs"],"real_name_unsafe":"/u8c22/u6167","type":"现在同事"},
{"uid":57686711,"real_name":["/u5f90/u79cb/u96e8","chensi","cs"],"real_name_unsafe":"/u5f90/u79cb/u96e8","type":"现在同事"},
{"uid":26406555,"real_name":["/u6768/u5a77","chensi","cs"],"real_name_unsafe":"/u6768/u5a77","type":"普通朋友"},
{"uid":133784,"real_name":["/u5c24/u6708/u5a25","chensi","cs"],"real_name_unsafe":"/u5c24/u6708/u5a25","type":"现在同事"},
{"uid":56572756,"real_name":["/u82d1/u61ff/u5e06","chensi","cs"],"real_name_unsafe":"/u82d1/u61ff/u5e06","type":"现在同事"},
{"uid":20683846,"real_name":["/u8d75/u534e","chensi","cs"],"real_name_unsafe":"/u8d75/u534e","type":"现在同事"},
{"uid":150038,"real_name":["/u8d75/u65b0","chensi","cs"],"real_name_unsafe":"/u8d75/u65b0","type":"现在同事"},
{"uid":56762144,"real_name":["/u4f5f/u7ae5","chensi","cs"],"real_name_unsafe":"/u4f5f/u7ae5","type":"现在同事"},
{"uid":852814,"real_name":["/u741a/u84c9/u84c9","chensi","cs"],"real_name_unsafe":"/u741a/u84c9/u84c9","type":"现在同事"}
];
return data;
},
getData:function(oo){
var _data=this.FullData(),group='';
if(oo!=undefined){//如果經過好友選擇框觸發，則加入此條件
group=oo.options[oo.selectedIndex].value;
this.friendList.innerHTML='';
var selAll=get('selall');
selAll.style.display=(group=='')?'none':'inline';
}
if(_data.length>0){
var oFrag=document.createDocumentFragment();//創建文檔碎片對象，在所有文檔遍歷完成之後一次性插入到頁面顯示，避免多次頁面操作產生頁面閃爍。
for(var i=0,dLen=_data.length;i<dLen;i++){
if(group!=''&&_data[i].type!=group){continue;}
var oNod=document.createTextNode(_data[i].real_name[0]);
var oInput=document.createElement('input');
oInput.type='checkbox';
oInput.setAttribute('title',Lang.zh_CN.id+_data[i].uid);
var oLi=document.createElement('li');
oLi.setAttribute('title',Lang.zh_CN.id+_data[i].uid);
oLi.appendChild(oInput);
oLi.appendChild(oNod);
oFrag.appendChild(oLi);
}
this.friendList.appendChild(oFrag);
}
},
getGroup:function(e){
var target=this.getEvent(e);
this.flag=false;
this.getData(target);
},
showfriendbox:function(e){
var target=this.getEvent(e);
target.blur();
if(this.friendList.getElementsByTagName('input').length==0){this.getData();}//讀取并創建好友列表
this.select.className=(this.select.className=='on')?'selbtn':'on';
this.listbox.style.top=this.fribox.clientHeight+6+'px';
this.listbox.style.display=(this.listbox.style.display=='block')?'none':'block';
},
insertDIV:function(nod,cNod){
var delObj=function(e){
var evt=e||window.event;
var target=evt.srcElement||evt.target;
target.parentNode.parentNode.removeChild(target.parentNode);
}
var img=document.createElement('img');
img.src='http://img1.kaixin001.com.cn/i2/del.gif';
img.setAttribute('alt',Lang.zh_CN.del,true);
addEventHandler(img,'click',delObj);//創建刪除按鈕并綁定事件
var odiv=document.createElement('div');
odiv.className='fri';
odiv.innerHTML=cNod+' ';
odiv.appendChild(img);
nod.appendChild(odiv);
img=odiv=null;
},
doSubmit:function(e){
var flist=this.friendList.getElementsByTagName('input'),slist=get('fri','div',this.fribox),selList=[],friList=[];
if(!flist||flist.length==0){alert(Lang.zh_CN.select);}
for(var i=0,flen=flist.length;i<flen;i++){
if(flist[i].checked==true){
friList.push(this.batch(flist[i].parentNode.innerHTML));
}
}
var oFrag=document.createDocumentFragment(),flag;
if(slist.length>0){
for(var i=0,olen=friList.length;i<olen;i++){
flag=true;
for(var j=0,slen=slist.length;j<slen;j++){
var oInner=this.batch(slist[j].innerHTML),nInner=friList[i];
if(oInner==nInner){
flag=false;
break;
}
}
if(flag==true){this.insertDIV(oFrag,nInner);}
}
}else{
for(var i=0,olen=friList.length;i<olen;i++){
this.insertDIV(oFrag,friList[i]);
}
}
this.fribox.insertBefore(oFrag,this.input);
this.listbox.style.display='none';
},
over:function(e){
this.submit.className='gb2-12';
},
out:function(e){
this.submit.className='gb1-12';
},
autoComplete:function(e){
if(!this.autobox){
this.autobox=new this.create('div','autobox',this.fribox);
}
var target=this.getEvent(e);
if (target&&this.autobox!=null){this.keyDown(target,e);}
this.autobox.style.top=this.input.offsetTop+this.input.offsetHeight+6+'px';
this.autobox.style.left=this.input.offsetLeft-3+'px';
this.fribox.parentNode.style.borderLeft=this.fribox.parentNode.style.borderTop='1px #000000 solid';
this.tip.style.display='none';
this.autobox.style.display='';
},
keyDown:function(iobj,e){
if (document.all){
var keycode=event.keyCode;
}else{
var keycode=e.which;
}
if (keycode==40){/*鍵盤上按鍵觸發函數，用於鍵盤控制提示項，待完善*/}
else if (keycode==38){/*鍵盤下按鍵觸發函數，用於鍵盤控制提示項，待完善*/}
else{
var target=this.getEvent(e),searchtxt=target.value,innerdivhtml="",alldiv=thisdiv=isyouselect=0,sdiv=this.autobox,nowsel=true;
if (searchtxt==""){
sdiv.innerHTML=Lang.zh_CN.tip;
sdiv.style.display="block";
return false;
}
nowsel=true;
var _data=this.FullData();
for (i=0;i<_data.length;i++){
if (_data[i].real_name[0].substr(0,searchtxt.length).toLowerCase()==searchtxt||_data[i].real_name[1].substr(0,searchtxt.length).toLowerCase()==searchtxt||_data[i].real_name[2].substr(0,searchtxt.length).toLowerCase()==searchtxt){
alldiv++;
innerdivhtml=innerdivhtml+"<div>"+_data[i].real_name[0]+"</div>";
if ((searchtxt==_data[i].real_name[0]||searchtxt==_data[i].real_name[1]||searchtxt==_data[i].real_name[2]) && isyouselect==0){
thisdiv++;
isyouselect=1;
}
}
}
if (alldiv!=0 && innerdivhtml!=""){
sdiv.innerHTML=innerdivhtml;
var autoList=get('*','div',this.autobox);
var _getEvent=this.getEvent,_batch=this.batch,_input=this.input,_autobox=this.autobox,_fribox=this.fribox,_insert=this.insertDIV;
var mouseover=function(e){
var tar=_getEvent(e);
tar.style.backgroundColor="#F2F6FB";
}
var mouseout=function(e){
var tar=_getEvent(e);
tar.style.backgroundColor="";
}
var doSelect=function(e){
var tar=_getEvent(e);
var oFrag=document.createDocumentFragment();
_insert(oFrag,_batch(tar.innerHTML));
_fribox.insertBefore(oFrag,_input);
_input.value='';
_autobox.style.display='none';
}
var getValue=function(e){
var tar=_getEvent(e),thisValue=_batch(tar.innerHTML);
_input.value=(thisValue=='')?_batch(autoList[0].innerHTML):thisValue;
}
addEventHandler(autoList,'mouseover',mouseover);
addEventHandler(autoList,'mouseout',mouseout);
addEventHandler(autoList,'click',doSelect);
sdiv.style.backgroundColor='#fff';
}
else{
if (searchtxt){
sdiv.innerHTML=Lang.zh_CN.empty;
sdiv.style.backgroundColor='#eee';
}
thisdiv==0;
}
sdiv.style.display="block";
}
},
selectAll:function(e){
if(!this.flag){this.flag=true;}
else{
this.flag=(this.flag==true)?false:true;
}
var boxAll=this.friendList.getElementsByTagName('input');
for(var i=0,olen=boxAll.length;i<olen;i++){
boxAll[i].checked=this.flag;
}
return this;
},
init:function(e){
addEventHandler(document,'click',bind(this,this.setFocus));
// addEventHandler(this.fribox,'click',bind(this,this.setFocus));
addEventHandler(this.input,'focus',bind(this,this.showDefault));
addEventHandler(this.input,'blur',bind(this,this.hideDefault));
addEventHandler(this.input,'keyup',bind(this,this.autoComplete));
addEventHandler(this.input,'keydown',bind(this,this.autoComplete));
addEventHandler(this.input,'keypress',bind(this,this.autoComplete));
addEventHandler(this.select,'click',bind(this,this.showfriendbox));
addEventHandler(this.submit,'click',bind(this,this.doSubmit));
addEventHandler(this.submit,'mouseover',bind(this,this.over));
addEventHandler(this.submit,'mouseout',bind(this,this.out));
addEventHandler(this.showgroup,'change',bind(this,this.getGroup));
addEventHandler(this.selAll,'click',bind(this,this.selectAll));
}
};
var showFriend=new show('selectfriend');
showFriend.init();
</script>
</html>