锁定老帖子 主题:仿开心网好友选择模块
精华帖 (2) :: 良好帖 (0) :: 新手帖 (1) :: 隐藏帖 (5)
|
|
---|---|
作者 | 正文 |
发表时间:2009-11-12
最后修改:2009-12-09
功能效果图如下:
PS:2009.11.19 新增鍵盤上、下、回車、退格按鍵的事件 新增對已選擇好友的重複過濾和好友面板的預選擇 對之前的一些小BUG進行了修復 2009.12.4 修復了一些朋友提出的BUG 新增了數據輸出功能
Demo演示地址:http://justname.whleer.com/selectfriend.html
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();//創建文檔碎片對象,在所有文檔遍歷完成之後一次性插入到頁面顯示,避免多次頁面操作產生頁面閃爍 var slist=get('fri','div',this.fribox),flag; for(var i=0,dLen=_data.length;i<dLen;i++){ if(group!=''&&_data[i].type!=group){continue;} flag=this.strip(slist,_data[i].real_name[0]); 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); if(flag==false){oInput.checked=true;} } 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'; if(this.autobox!=null){this.autobox.style.display='none';} 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; }, strip:function(from,to){ for(var j=0,slen=from.length;j<slen;j++){ var oInner=batch(from[j].innerHTML); if(oInner==to){ return flag=false; } } return true; }, 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(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=this.strip(slist,friList[i]); if(flag==true){this.insertDIV(oFrag,friList[i]);} } }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'; }, run:function(path){ this.Arr.push(this.index); if(this.Arr.length%2==0){ var allfriList=get('*','div',this.autobox); if(allfriList.length==0){return;} allfriList[this.index].style.backgroundColor=""; if(path=='down'){ if(allfriList[this.index+1]){ allfriList[this.index+1].style.backgroundColor="#F2F6FB"; this.index++; }else{ allfriList[0].style.backgroundColor="#F2F6FB"; this.index=0; this.Arr.length=0; } }else{ if(allfriList[this.index-1]){ allfriList[this.index-1].style.backgroundColor="#F2F6FB"; this.index--; }else{ allfriList[allfriList.length-1].style.backgroundColor="#F2F6FB"; this.index=allfriList.length-1; this.Arr.length=0; } } } }, keyDown:function(iobj,e){ if (document.all){ var keycode=event.keyCode; }else{ var keycode=e.which; } var target=this.getEvent(e),searchtxt=target.value.replace(/\s/ig,''),innerdivhtml="",alldiv=isyouselect=0,sdiv=this.autobox,nowsel=true; switch(keycode){ case 40:/*鍵盤下按鍵*/ this.run('down'); break; case 38:/*鍵盤上按鍵*/ this.run('up'); break; default: this.keyword.push(this.input.value);//分別捕獲keydown和keyup時候的input.value,放入到數組之中 var selFri=get('fri','div',this.fribox); if(keycode==8){ // console.debug(this.keyword[this.keyword.length-2]+"||"+this.keyword[this.keyword.length-1]); if(selFri.length>0&&this.keyword[this.keyword.length-2]==''){//刪除時需要keydown時捕獲的input.value來判斷是否需要刪除最後一個好友。如果使用keyup時的value,則會在value為1個字母的時候就開始刪除最後一個好友 this.keyword.length=0; if(selFri[selFri.length-1]){this.fribox.removeChild(selFri[selFri.length-1]);this.input.focus();return false;}; } } 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){ this.index++; isyouselect=1; } } } if (alldiv!=0 && innerdivhtml!=""){ sdiv.innerHTML=innerdivhtml; var autoList=get('*','div',this.autobox),_strip=this.strip; var _getEvent=this.getEvent,_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,theObj){ var tar=(theObj)?theObj:_getEvent(e),oInner=batch(tar.innerHTML); var slist=get('fri','div',_fribox),oFrag=document.createDocumentFragment(); var flag=_strip(slist,oInner); if(flag==true){ _insert(oFrag,oInner); _fribox.insertBefore(oFrag,_input); } _input.value=''; sdiv.style.display='none'; } var getValue=function(e){ var tar=_getEvent(e),thisValue=batch(tar.innerHTML); _input.value=(thisValue=='')?batch(autoList[0].innerHTML):thisValue; } if(keycode==13){ if(this.keyword.length%2==0){ var allfriList=get('*','div',this.autobox); doSelect(e,allfriList[this.index]); this.keyword.length=0; this.index=0; return; } } 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'; } this.index=0; } sdiv.style.display="block"; return false; } },
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2009-11-15
你这样发帖子是不对的 起码有个界面 给大家一个大体印象 代码必须格式化 看起来就舒服
这样你的帖子就不会白发 PS:纯属友情建议 |
|
返回顶楼 | |
发表时间:2009-11-15
nickevin 写道 你这样发帖子是不对的 起码有个界面 给大家一个大体印象 代码必须格式化 看起来就舒服
这样你的帖子就不会白发 PS:纯属友情建议 骚蕾骚蕾,偶还是第一次在这里发东东。。。不晓得怎么个搞法,晚点看看他们怎么搞的,参考着改进一下。。呵呵,多谢哥们提醒 |
|
返回顶楼 | |
发表时间:2009-11-15
你可以看下发帖的智慧。。
|
|
返回顶楼 | |
发表时间:2009-11-16
把标题看成了伤心网...
|
|
返回顶楼 | |
发表时间:2009-11-16
把代码保存成html文件打开就看到效果了,仿真度还是挺高的,不过建议lz:
- 先给截图效果 - 保存成html文件作为附件(不需要整段全贴上来) - 给出关键性代码片段就ok |
|
返回顶楼 | |
发表时间:2009-11-16
Hooopo 写道 把标题看成了伤心网...
汗,我也是。。。 |
|
返回顶楼 | |
发表时间:2009-11-16
而且代码没注释
|
|
返回顶楼 | |
发表时间:2009-11-16
功能很强大
|
|
返回顶楼 | |
发表时间:2009-11-16
nickevin 写道 你这样发帖子是不对的 起码有个界面 给大家一个大体印象 代码必须格式化 看起来就舒服
这样你的帖子就不会白发 PS:纯属友情建议 支持这种说法. .. |
|
返回顶楼 | |