`
ayue222
  • 浏览: 49638 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

仿开心网好友选择模块

阅读更多

功能效果图如下:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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;
  }
 },

 

  • 大小: 14.1 KB
分享到:
评论
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。。。。。

1.
先点下拉选择好友,再在输入框中输入进行选择,回车,再点下拉选择好友,看到,下拉框里的名单变成双份了;再在输入框中输入,回车,再点下拉,下拉框里的名单变成3份了;一直下去,就4份,5份,,。。。

2.
输入lf出现“刘菲”单独一个选项时,选择,回车,这时出问题了,本来应该是[刘菲x]的,但现在只有个小小的[x]。
只要是拼音首字母输全了,就会出这个问题。比如“丁宗秋”,输入d或者dz进行选择是正常的,但是输入dzq进行选择就不行了。

我看,楼主是不是弄个demo网址呢,比较方便大家测试。

============>
昏倒。。。上周灰常忙,匆匆改了下,没想到会有这么大的BUG存在,灰常对不起大家了~
这礼拜继续在忙着。。抽时间把问题fixed。。。感谢大伙的关心和建议。
23 楼 cuixiping 2009-11-21  
ayue222 写道
附件包再次更新
修復過濾重複好友的重大BUG。。。。。

1.
先点下拉选择好友,再在输入框中输入进行选择,回车,再点下拉选择好友,看到,下拉框里的名单变成双份了;再在输入框中输入,回车,再点下拉,下拉框里的名单变成3份了;一直下去,就4份,5份,,。。。

2.
输入lf出现“刘菲”单独一个选项时,选择,回车,这时出问题了,本来应该是[刘菲x]的,但现在只有个小小的[x]。
只要是拼音首字母输全了,就会出这个问题。比如“丁宗秋”,输入d或者dz进行选择是正常的,但是输入dzq进行选择就不行了。

我看,楼主是不是弄个demo网址呢,比较方便大家测试。
22 楼 310628570 2009-11-20  
哈哈 不错啊  支持一下~~
21 楼 ayue222 2009-11-19  
附件包再次更新
修復過濾重複好友的重大BUG。。。。。
20 楼 ayue222 2009-11-19  
2009.11.19 新增鍵盤上、下、回車、退格按鍵的事件

             新增對已選擇好友的重複過濾和好友面板的預選擇

             對之前的一些小BUG進行了修復

下載鏈接已經update,各位童鞋請到頂樓下載。。
19 楼 ayue222 2009-11-18  
cuixiping 写道
下载来看了下,bug挺多的,不具备实用性啊。

1,输入字母键的时候,弹出下拉选单的项似乎不准,不知道楼主按的是什么规则过滤。
2,点击右边下拉选择区出来后,原来的弹出下拉菜单没有隐藏掉。
3,已经选择的好友,删除后,再点右侧弹出选择区,里面还是勾上的。
4,按键弹出下拉选单,选择后,再点右侧弹出选择区,里面却没有勾上。

-->
1、請看看data數據源就明白了,當時因為偷懶,除了前面幾人更改了拼音之外,後面的拼音都是一樣的,如果按照名字把拼音更改好的話就不會有這個問題
2、此問題沒有注意到,多謝提醒
3、4、已選擇好友在好友選擇區內并沒有關聯起來,而且在按鍵彈出的自動提示層上選擇的好友都沒有重複檢測的。。
18 楼 cuixiping 2009-11-18  
下载来看了下,bug挺多的,不具备实用性啊。

1,输入字母键的时候,弹出下拉选单的项似乎不准,不知道楼主按的是什么规则过滤。
2,点击右边下拉选择区出来后,原来的弹出下拉菜单没有隐藏掉。
3,已经选择的好友,删除后,再点右侧弹出选择区,里面还是勾上的。
4,按键弹出下拉选单,选择后,再点右侧弹出选择区,里面却没有勾上。
17 楼 ayue222 2009-11-17  
让你笑了 写道
功能很强大,也很漂亮,用起来也很方便...

貌似有些...比如上下键选择,DEL键....


上下按键滚动选择等功能有空的时候会添加上,之前是因为没有这个需求。。呵呵
这次更改了发帖方式之后修改了一点细微的地方,请大家斧正。
16 楼 让你笑了 2009-11-17  
功能很强大,也很漂亮,用起来也很方便...

貌似有些...比如上下键选择,DEL键....
15 楼 nishijia 2009-11-17  
这仿得很强大
把编码改为 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  
仿的很真。。 。。。。

相关推荐

    仿开心网源码分享

    【标题】"仿开心网源码分享"所涉及的知识点主要集中在网站开发、前端设计以及社交网络应用的构建上。开心网是中国早期的社交网络平台,它的用户界面(UI)设计简洁而富有吸引力,因此“仿开心网源码”通常指的是...

    Android仿开心网APP源码.zip

    【Android仿开心网APP源码】是一个开源项目,旨在帮助开发者了解如何构建一个类似开心网的社交应用程序。这个源码提供了完整的实现,包括用户界面、功能模块和后台交互,为学习Android开发提供了一个实践平台。下面...

    android仿开心网源代码.zip

    【描述】描述中的"android仿开心网源代码.zip"进一步确认了这是一个关于Android开发的学习资源,它提供了实现开心网功能的源代码,可能包括用户登录、动态分享、好友互动、照片上传等社交功能。这个项目可能旨在帮助...

    [AndrodeApe.com]高仿开心网完整版.zip

    【Android 开发:高仿开心网应用的深度解析】 在移动互联网时代,社交网络应用程序扮演着举足轻重的角色,而“高仿开心网”作为一款仿制原版开心网的应用,为开发者提供了宝贵的参考资源。这个【AndrodeApe.com】...

    基于android的移动应用仿开心网源代码.zip

    《基于Android的移动应用仿开心网源代码解析》 在当今移动互联网的浪潮中,Android作为全球最受欢迎的智能手机操作系统之一,其应用开发领域备受开发者关注。本篇文章将深入探讨一个特殊的项目——“基于Android的...

    Android仿开心网DEMO

    在仿开心网DEMO中,我们可以看到如何设计类似新闻流、好友动态、个人信息页等常见的社交应用界面。 2. **Activity和Fragment管理**:在Android应用中,Activity是用户界面的基本单元,而Fragment则允许在单个...

    Android应用源码之高仿开心网.zip

    这暗示源码中可能包含了实现开心网核心功能的各种组件和模块,比如用户登录注册、动态发布与浏览、好友互动等。开发者可以通过阅读和分析这些源码,提升自己的Android应用开发技能,特别是对于社交应用开发的理解。 ...

    Androd 高仿开心网.zip

    - **自定义视图**:项目可能包含自定义的UI组件,如仿开心网特色的按钮、滑动菜单等,这些可以通过自定义View类实现。 - **XML布局**:应用的界面布局可能使用XML文件进行描述,遵循Android的布局层次结构,如...

    高仿开心网Android源码.zip

    "高仿开心网Android源码.zip" 这个标题表明你获得的是一份基于Android平台开发的应用程序源代码,该应用程序模仿了知名的社交网络平台——开心网的功能和界面设计。通过这份源码,开发者可以深入理解如何在Android...

    [安卓源码]高仿开心网.zip项目安卓应用源码下载

    1. 用户界面(UI):应用的界面设计模仿了开心网,可能包括登录/注册页面、动态流、好友列表、个人信息页面等。这些界面将使用Android的布局管理器(如LinearLayout, RelativeLayout, ConstraintLayout等)和自定义...

    安卓Android源码——精典源码之高仿开心网.zip

    【描述】"安卓Android源码——精典源码之高仿开心网.zip" 提示我们,这个项目可能是为了教学或自我提升目的而创建的,它可能包含了完整的应用程序结构,包括登录注册、动态发布、好友系统、评论互动等功能。...

    android仿开心网源代码.zip项目安卓应用源码下载

    《Android仿开心网源代码分析与学习指南》 在移动应用开发领域,Android平台因其开源性和灵活性备受开发者青睐。本项目“android仿开心网源代码.zip”为一款基于Android平台的应用程序源码,旨在为学生、个人开发者...

    Android源码——仿开心网源代码.zip

    这篇文档将深入解析《Android源码——仿开心网源代码》这一项目,旨在帮助开发者理解和学习如何在Android平台上构建类似社交应用。通过分析这个开源项目,我们可以了解到Android应用程序设计的基本原则,以及开心网...

    安卓Android源码——[安卓开源]高仿开心网.zip

    "安卓Android源码——[安卓开源]高仿开心网.zip" 这个标题揭示了我们要探讨的主题是关于一个开源的安卓应用程序,它仿制了开心网的功能和用户体验。开源意味着源代码是公开的,允许开发者研究、学习、修改和分发软件...

    安卓Android源码——[安卓开源]高仿开心网.7z

    "高仿开心网"则表明此项目旨在复制并实现类似开心网的功能,如动态发布、好友互动、照片分享、游戏等功能,这将涉及到Android的UI设计、数据存储、网络通信等多个技术领域。 【标签】"安卓 android"进一步确认了这...

    Android 高仿开心网-IT计算机-毕业设计.zip

    【Android 高仿开心网】是一个基于Android平台的毕业设计项目,旨在帮助学生掌握Android应用开发的基本技能,并深入了解社交网络应用的设计与实现。这个项目模仿了知名的社交网站开心网,提供了一个类似的用户界面和...

Global site tag (gtag.js) - Google Analytics