- 浏览: 49638 次
- 性别:
- 来自: 北京
最新评论
-
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 2249如何在html中操作SVG对象的问题,对于嵌入式<emb ... -
YUI3 事件
2011-04-23 20:02 1594YUI3:事件 YUI的事件功能为响应DOM事件提供一个简单 ... -
直接运行html的代码
2010-12-07 17:19 894function runCode(pTargetId){ v ... -
JS正则表达式详解
2010-10-28 10:12 984JS的正则表达式 //校验是否全由数字组成 代码 va ... -
如何在事件代理中正确使用 focus 和 blur 事件
2010-10-21 22:09 1639什么是事件代理(Event Delegation)? 如果不 ... -
如何判断脚本加载完成
2010-10-21 22:04 969在“按需加载”的需求中,我们经常会判断当脚本加载完成时,返回一 ... -
JavaScript 获取事件对象的一个注意点
2010-10-21 22:00 979平时我们获取事件对象一般写法如下: function get ... -
判断 iframe 是否加载完成的完美方法
2010-10-21 21:52 979var iframe = document.createEle ... -
JS将数字转换成三位逗号分隔的样式
2010-08-02 16:33 3798function formatNumber(num){ ... -
YUI 3.0应用初探
2010-06-04 22:42 1373很惭愧。。。YUI3出来这么久了,一直都没有机会正式使用。。这 ... -
JS iframe跨域自适应内容高度
2010-02-24 11:05 2801<!DOCTYPE html PUBLIC " ... -
话说browser的脚本并行下载
2009-12-12 13:32 1393在讨论这次的主题 ... -
初涉YUI3
2009-12-11 13:44 1179study.html <!DOCTYPE HTML ... -
基於YUI2.8的 JS版多文件上传
2009-12-11 12:41 970select files: uploading: ... -
自定义滚动条
2009-11-12 19:42 987<!DOCTYPE html PUBLIC " ... -
javascript 整合的获取ID,className,tagName的方法
2009-11-12 19:40 2569var get=function(className, tag ... -
javascript 中绑定事件监听的函数【支持数组对象绑定】
2009-11-12 19:38 1215var addEventHandler=function(ob ... -
判断指定对象是否存在于另一个对象的原型链中
2009-11-12 19:35 994prototype 下的 isPrototypeOf() 方法 ... -
基于yui3如何写模块(一)
2009-11-12 19:33 959如今的前端开发越来越oo,也越来越注重重用,娴熟的用js写出o ... -
Js 数组排序【支持对象】
2009-11-12 19:30 1117//兼容 IE&FF&Safari var ...
相关推荐
【标题】"仿开心网源码分享"所涉及的知识点主要集中在网站开发、前端设计以及社交网络应用的构建上。开心网是中国早期的社交网络平台,它的用户界面(UI)设计简洁而富有吸引力,因此“仿开心网源码”通常指的是...
【Android仿开心网APP源码】是一个开源项目,旨在帮助开发者了解如何构建一个类似开心网的社交应用程序。这个源码提供了完整的实现,包括用户界面、功能模块和后台交互,为学习Android开发提供了一个实践平台。下面...
【描述】描述中的"android仿开心网源代码.zip"进一步确认了这是一个关于Android开发的学习资源,它提供了实现开心网功能的源代码,可能包括用户登录、动态分享、好友互动、照片上传等社交功能。这个项目可能旨在帮助...
【Android 开发:高仿开心网应用的深度解析】 在移动互联网时代,社交网络应用程序扮演着举足轻重的角色,而“高仿开心网”作为一款仿制原版开心网的应用,为开发者提供了宝贵的参考资源。这个【AndrodeApe.com】...
《基于Android的移动应用仿开心网源代码解析》 在当今移动互联网的浪潮中,Android作为全球最受欢迎的智能手机操作系统之一,其应用开发领域备受开发者关注。本篇文章将深入探讨一个特殊的项目——“基于Android的...
在仿开心网DEMO中,我们可以看到如何设计类似新闻流、好友动态、个人信息页等常见的社交应用界面。 2. **Activity和Fragment管理**:在Android应用中,Activity是用户界面的基本单元,而Fragment则允许在单个...
这暗示源码中可能包含了实现开心网核心功能的各种组件和模块,比如用户登录注册、动态发布与浏览、好友互动等。开发者可以通过阅读和分析这些源码,提升自己的Android应用开发技能,特别是对于社交应用开发的理解。 ...
- **自定义视图**:项目可能包含自定义的UI组件,如仿开心网特色的按钮、滑动菜单等,这些可以通过自定义View类实现。 - **XML布局**:应用的界面布局可能使用XML文件进行描述,遵循Android的布局层次结构,如...
"高仿开心网Android源码.zip" 这个标题表明你获得的是一份基于Android平台开发的应用程序源代码,该应用程序模仿了知名的社交网络平台——开心网的功能和界面设计。通过这份源码,开发者可以深入理解如何在Android...
1. 用户界面(UI):应用的界面设计模仿了开心网,可能包括登录/注册页面、动态流、好友列表、个人信息页面等。这些界面将使用Android的布局管理器(如LinearLayout, RelativeLayout, ConstraintLayout等)和自定义...
【描述】"安卓Android源码——精典源码之高仿开心网.zip" 提示我们,这个项目可能是为了教学或自我提升目的而创建的,它可能包含了完整的应用程序结构,包括登录注册、动态发布、好友系统、评论互动等功能。...
《Android仿开心网源代码分析与学习指南》 在移动应用开发领域,Android平台因其开源性和灵活性备受开发者青睐。本项目“android仿开心网源代码.zip”为一款基于Android平台的应用程序源码,旨在为学生、个人开发者...
这篇文档将深入解析《Android源码——仿开心网源代码》这一项目,旨在帮助开发者理解和学习如何在Android平台上构建类似社交应用。通过分析这个开源项目,我们可以了解到Android应用程序设计的基本原则,以及开心网...
"安卓Android源码——[安卓开源]高仿开心网.zip" 这个标题揭示了我们要探讨的主题是关于一个开源的安卓应用程序,它仿制了开心网的功能和用户体验。开源意味着源代码是公开的,允许开发者研究、学习、修改和分发软件...
"高仿开心网"则表明此项目旨在复制并实现类似开心网的功能,如动态发布、好友互动、照片分享、游戏等功能,这将涉及到Android的UI设计、数据存储、网络通信等多个技术领域。 【标签】"安卓 android"进一步确认了这...
【Android 高仿开心网】是一个基于Android平台的毕业设计项目,旨在帮助学生掌握Android应用开发的基本技能,并深入了解社交网络应用的设计与实现。这个项目模仿了知名的社交网站开心网,提供了一个类似的用户界面和...