- 浏览: 48213 次
- 性别:
- 来自: 北京
最新评论
-
hanxiao84322:
强大啊,虽然没有完全看明白。
YUI 3.0应用初探 -
osacar:
不行啊。没效果!在Opera下测试
IE也不行。
JS iframe跨域自适应内容高度 -
xxzjzb1:
中秋送礼,首选书画、艺术品交易平台爱艺购!
JS将数字转换成三位逗号分隔的样式 -
mozart0:
货币:num.toFixed(2).replace(/(\d) ...
JS将数字转换成三位逗号分隔的样式 -
cnxxg:
这样能处理一个元素含有多个classname的情况吗?
javascript 整合的获取ID,className,tagName的方法
功能效果图如下:
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; } },
评论
29 楼
heavilyarmed
2009-12-10
呵呵 功能很好
28 楼
海阔天空love
2009-12-10
顶。。。功能很好。。。很值得学习。。。
27 楼
ayue222
2009-12-04
因為這段時間比較忙。。所以一直拖到今天才修復完善這個小程序。。所有已知BUG都已經修復,并新增了幾位朋友提到的選擇數據輸出的功能,請各位朋友重新下載文件包~
感謝各位朋友的熱心建議和測試。。
感謝各位朋友的熱心建議和測試。。
26 楼
pn2008
2009-11-29
????如何得到选择了那些好友呢???
25 楼
pn2008
2009-11-29
怎么取得已选择任意信息呢?
24 楼
ayue222
2009-11-23
cuixiping 写道
ayue222 写道
附件包再次更新
修復過濾重複好友的重大BUG。。。。。
修復過濾重複好友的重大BUG。。。。。
1.
先点下拉选择好友,再在输入框中输入进行选择,回车,再点下拉选择好友,看到,下拉框里的名单变成双份了;再在输入框中输入,回车,再点下拉,下拉框里的名单变成3份了;一直下去,就4份,5份,,。。。
2.
输入lf出现“刘菲”单独一个选项时,选择,回车,这时出问题了,本来应该是[刘菲x]的,但现在只有个小小的[x]。
只要是拼音首字母输全了,就会出这个问题。比如“丁宗秋”,输入d或者dz进行选择是正常的,但是输入dzq进行选择就不行了。
我看,楼主是不是弄个demo网址呢,比较方便大家测试。
============>
昏倒。。。上周灰常忙,匆匆改了下,没想到会有这么大的BUG存在,灰常对不起大家了~
这礼拜继续在忙着。。抽时间把问题fixed。。。感谢大伙的关心和建议。
23 楼
cuixiping
2009-11-21
ayue222 写道
附件包再次更新
修復過濾重複好友的重大BUG。。。。。
修復過濾重複好友的重大BUG。。。。。
1.
先点下拉选择好友,再在输入框中输入进行选择,回车,再点下拉选择好友,看到,下拉框里的名单变成双份了;再在输入框中输入,回车,再点下拉,下拉框里的名单变成3份了;一直下去,就4份,5份,,。。。
2.
输入lf出现“刘菲”单独一个选项时,选择,回车,这时出问题了,本来应该是[刘菲x]的,但现在只有个小小的[x]。
只要是拼音首字母输全了,就会出这个问题。比如“丁宗秋”,输入d或者dz进行选择是正常的,但是输入dzq进行选择就不行了。
我看,楼主是不是弄个demo网址呢,比较方便大家测试。
22 楼
310628570
2009-11-20
哈哈 不错啊 支持一下~~
21 楼
ayue222
2009-11-19
附件包再次更新
修復過濾重複好友的重大BUG。。。。。
修復過濾重複好友的重大BUG。。。。。
20 楼
ayue222
2009-11-19
2009.11.19 新增鍵盤上、下、回車、退格按鍵的事件
新增對已選擇好友的重複過濾和好友面板的預選擇
對之前的一些小BUG進行了修復
下載鏈接已經update,各位童鞋請到頂樓下載。。
新增對已選擇好友的重複過濾和好友面板的預選擇
對之前的一些小BUG進行了修復
下載鏈接已經update,各位童鞋請到頂樓下載。。
19 楼
ayue222
2009-11-18
cuixiping 写道
下载来看了下,bug挺多的,不具备实用性啊。
1,输入字母键的时候,弹出下拉选单的项似乎不准,不知道楼主按的是什么规则过滤。
2,点击右边下拉选择区出来后,原来的弹出下拉菜单没有隐藏掉。
3,已经选择的好友,删除后,再点右侧弹出选择区,里面还是勾上的。
4,按键弹出下拉选单,选择后,再点右侧弹出选择区,里面却没有勾上。
1,输入字母键的时候,弹出下拉选单的项似乎不准,不知道楼主按的是什么规则过滤。
2,点击右边下拉选择区出来后,原来的弹出下拉菜单没有隐藏掉。
3,已经选择的好友,删除后,再点右侧弹出选择区,里面还是勾上的。
4,按键弹出下拉选单,选择后,再点右侧弹出选择区,里面却没有勾上。
-->
1、請看看data數據源就明白了,當時因為偷懶,除了前面幾人更改了拼音之外,後面的拼音都是一樣的,如果按照名字把拼音更改好的話就不會有這個問題
2、此問題沒有注意到,多謝提醒
3、4、已選擇好友在好友選擇區內并沒有關聯起來,而且在按鍵彈出的自動提示層上選擇的好友都沒有重複檢測的。。
18 楼
cuixiping
2009-11-18
下载来看了下,bug挺多的,不具备实用性啊。
1,输入字母键的时候,弹出下拉选单的项似乎不准,不知道楼主按的是什么规则过滤。
2,点击右边下拉选择区出来后,原来的弹出下拉菜单没有隐藏掉。
3,已经选择的好友,删除后,再点右侧弹出选择区,里面还是勾上的。
4,按键弹出下拉选单,选择后,再点右侧弹出选择区,里面却没有勾上。
1,输入字母键的时候,弹出下拉选单的项似乎不准,不知道楼主按的是什么规则过滤。
2,点击右边下拉选择区出来后,原来的弹出下拉菜单没有隐藏掉。
3,已经选择的好友,删除后,再点右侧弹出选择区,里面还是勾上的。
4,按键弹出下拉选单,选择后,再点右侧弹出选择区,里面却没有勾上。
17 楼
ayue222
2009-11-17
让你笑了 写道
功能很强大,也很漂亮,用起来也很方便...
貌似有些...比如上下键选择,DEL键....
貌似有些...比如上下键选择,DEL键....
上下按键滚动选择等功能有空的时候会添加上,之前是因为没有这个需求。。呵呵
这次更改了发帖方式之后修改了一点细微的地方,请大家斧正。
16 楼
让你笑了
2009-11-17
功能很强大,也很漂亮,用起来也很方便...
貌似有些...比如上下键选择,DEL键....
貌似有些...比如上下键选择,DEL键....
15 楼
nishijia
2009-11-17
这仿得很强大
把编码改为 GBK 就ok了
把编码改为 GBK 就ok了
14 楼
ayue222
2009-11-17
瀑布汗。。俺還不會在這裡貼圖上傳附件。。。立馬學習改進
感謝各位兄弟支持、建議
感謝各位兄弟支持、建議
13 楼
xiaoxie2007
2009-11-17
功能不错,楼主什么时间有空也整理一个比较好点:不乱码、可执行的例子添加到附件中来就更好了
12 楼
liua2003
2009-11-17
功能确实强大
11 楼
cds1118
2009-11-16
呵呵 拷贝流飘过~~ 很强大 就是字体乱码 再加点注释就好了
10 楼
jolongriver
2009-11-16
仿的很真。。 。。。。
发表评论
-
使用javascript动态创建SVG对象的问题
2011-04-24 01:04 2198如何在html中操作SVG对象的问题,对于嵌入式<emb ... -
YUI3 事件
2011-04-23 20:02 1531YUI3:事件 YUI的事件功能为响应DOM事件提供一个简单 ... -
直接运行html的代码
2010-12-07 17:19 857function runCode(pTargetId){ v ... -
JS正则表达式详解
2010-10-28 10:12 929JS的正则表达式 //校验是否全由数字组成 代码 va ... -
如何在事件代理中正确使用 focus 和 blur 事件
2010-10-21 22:09 1602什么是事件代理(Event Delegation)? 如果不 ... -
如何判断脚本加载完成
2010-10-21 22:04 929在“按需加载”的需求中,我们经常会判断当脚本加载完成时,返回一 ... -
JavaScript 获取事件对象的一个注意点
2010-10-21 22:00 916平时我们获取事件对象一般写法如下: function get ... -
判断 iframe 是否加载完成的完美方法
2010-10-21 21:52 924var iframe = document.createEle ... -
JS将数字转换成三位逗号分隔的样式
2010-08-02 16:33 3767function formatNumber(num){ ... -
YUI 3.0应用初探
2010-06-04 22:42 1325很惭愧。。。YUI3出来这么久了,一直都没有机会正式使用。。这 ... -
JS iframe跨域自适应内容高度
2010-02-24 11:05 2776<!DOCTYPE html PUBLIC " ... -
话说browser的脚本并行下载
2009-12-12 13:32 1339在讨论这次的主题 ... -
初涉YUI3
2009-12-11 13:44 1144study.html <!DOCTYPE HTML ... -
基於YUI2.8的 JS版多文件上传
2009-12-11 12:41 926select files: uploading: ... -
自定义滚动条
2009-11-12 19:42 956<!DOCTYPE html PUBLIC " ... -
javascript 整合的获取ID,className,tagName的方法
2009-11-12 19:40 2540var get=function(className, tag ... -
javascript 中绑定事件监听的函数【支持数组对象绑定】
2009-11-12 19:38 1182var addEventHandler=function(ob ... -
判断指定对象是否存在于另一个对象的原型链中
2009-11-12 19:35 960prototype 下的 isPrototypeOf() 方法 ... -
基于yui3如何写模块(一)
2009-11-12 19:33 931如今的前端开发越来越oo,也越来越注重重用,娴熟的用js写出o ... -
Js 数组排序【支持对象】
2009-11-12 19:30 1080//兼容 IE&FF&Safari var ...
相关推荐
仿美团的地址选择模块
城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市...
易语言模块加入好友.rar 易语言模块加入好友.rar 易语言模块加入好友.rar 易语言模块加入好友.rar 易语言模块加入好友.rar 易语言模块加入好友.rar
仿QQ自动隐藏模块仿QQ自动隐藏模块仿QQ自动隐藏模块
仿qq登陆模块
易语言模块模块_仿WinXP窗口v2.0特别版.rar 易语言模块模块_仿WinXP窗口v2.0特别版.rar 易语言模块模块_仿WinXP窗口v2.0特别版.rar 易语言模块模块_仿WinXP窗口v2.0特别版.rar 易语言模块模块_仿WinXP窗口v2.0...
仿google个性化首页模块拖拽效果 随便拖放在页面一个位置,就停止在那
开心网语音发送模块的录音功能,希望能帮到你
易语言模块仿XP界面3.0特别版模块 3.0.rar 易语言模块仿XP界面3.0特别版模块 3.0.rar 易语言模块仿XP界面3.0特别版模块 3.0.rar 易语言模块仿XP界面3.0特别版模块 3.0.rar 易语言模块仿XP界面3.0特别版模块 3.0....
易语言模块仿vista截图.rar 易语言模块仿vista截图.rar 易语言模块仿vista截图.rar 易语言模块仿vista截图.rar 易语言模块仿vista截图.rar 易语言模块仿vista截图.rar
易语言模块大全,里面包含775个模块!!! 易语言模块大全,里面包含775个模块!!! 易语言模块大全,里面包含775个模块!!! ACCESS到高级表格1.1(1.1).zip Access操作(1.0).zip ACCESS到超级列表框(1.0).zip ...
仿360扫描模块 [注:本内容来自网络,在此分享仅为帮助有需要的网友,如果侵犯了您的权利,麻烦联系我,我会第一时间删除,谢谢您。]
开心网语音发送模块的录音功能
Android 开心网语音发送模块的录音功能源码.zip
开心网语音发送模块的录音功能源码,而且效果很炫,相信很多童鞋需要的是里面的部分功能,但苦于代码多,不知从何看起,今天闲的无聊就把里面的一个录音功能分解下来,测试了一下,语音质量很好。
易语言模块模块_仿WinXP窗口v1.0.rar 易语言模块模块_仿WinXP窗口v1.0.rar 易语言模块模块_仿WinXP窗口v1.0.rar 易语言模块模块_仿WinXP窗口v1.0.rar 易语言模块模块_仿WinXP窗口v1.0.rar 易语言模块模块_仿...
开心网语音发送模块的录音功能.zip
jQuery仿iGoogle 主页模块拖动、编辑完整版
易语言模块模块_仿WinXP窗口v3.1版.rar 易语言模块模块_仿WinXP窗口v3.1版.rar 易语言模块模块_仿WinXP窗口v3.1版.rar 易语言模块模块_仿WinXP窗口v3.1版.rar 易语言模块模块_仿WinXP窗口v3.1版.rar 易语言模块...