登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

清风幻影的博客

Where there is love, I will be there.

 
 
 

日志

 
 
关于我

同是天涯沦落人,相逢何必曾相识. 天生我材必有用,千金散尽还复来. 天若有情天亦老,人间正道是沧桑. 月影西斜人已去, 堤上梅花情依旧, 此情故已成追忆, 美人如玉夜留香

选择好友的下拉控件  

2009-11-20 16:20:36|  分类: jscript3 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<!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>

  评论这张
 
阅读(1131)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018