六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 40|回复: 0

自己写的select

[复制链接]

升级  16%

18

主题

18

主题

18

主题

秀才

Rank: 2

积分
74
 楼主| 发表于 2013-1-29 08:39:45 | 显示全部楼层 |阅读模式
由于项目中下拉框的list比较长 显的不好看,于是自己写了一个select 时间关系 写的不是很规范;都是使用的内嵌样式,可以自己调整select的高度

调用方式:只需要把 装有select的 父标签(如div,form,里面装有多个select)id传入 changeselect(id) 即可 changeselect('divid')  
代码:var ly_select_currtren=null; //存放当前操作的下拉框var ly_input_currtren=null;  //存放当前操作的 inputfunction changeselect(id){   $('#'+id).find('select').each(function(i){var csel = $(this);var top = isExplorer(ExplorerType.MSIE)?'absmiddle':'top';var inp = $('<input readonly id="'+id+i+'" type="text" />').prependTo(csel.parent());var ini = $('<img align="'+top+'"  style="cursor:pointer;" alt="" src="cnznjt_images/arrowxl.png" />');inp.after(ini);inp.width(csel.width()-17).val(csel.find('option:first').text());if(csel[0].className.indexOf('validate') != -1)inp.addClass('validate[custom[isnull]');  //这里是为了培训项目中的验证框架 要不要无所谓csel.hide();inp[0].onclick=hand;ini[0].onclick=hand;var options = csel.find('option');var w = csel.width();var h = 150;function hand(event){ly_select_currtren = csel;ly_input_currtren = inp;$('.selectdiv').remove();var pos = GetObjPos(inp[0]);var jid1 = $('<div id="id1" class="selectdiv" style="width:300px;height:98px;border:#7F9DB9 1px solid;z-index:202;position:absolute;background:#ffffff;overflow-y:scroll;"></div>').appendTo('body');var str = '';options.each(function(){  //获取原来select中的option 放到div中模拟select下拉列表str += '<div myid="'+this.value+'"  onmouseout="this.style.backgroundColor=\'\';this.style.color=\'\'"  style="overflow:hidden;white-space:nowrap;heigth:20px;cursor:pointer;width:'+(w-20)+'px;margin-top:1px;" title="'+$(this).text()+'">'+$(this).text()+'</div>';});jid1.css('left',pos.x).css('top',pos.y+22).width(w).height(h).html(str);        stopBubble(event);         document.onmousedown=function(){           jid1.remove();      document.onmousedown=null;         }        jid1[0].onmousedown=function(event){        //只阻止了向上冒泡,而没有阻止向下捕获,所以点击con的内部对象时,仍然可以执行这个函数        stopBubble(event);     }        return false;}function bb(d){alert(d.className)csel.val(d.className);$('.selectdiv').remove();}});}function clickhand(d){$('.selectdiv').remove();ly_select_currtren.val(d.getAttribute('myid'));ly_input_currtren.val(d.innerHTML);ly_input_currtren[0].focus();ly_input_currtren[0].blur();if(ly_select_currtren[0].onchange)ly_select_currtren[0].onchange();}function CPos(x, y){    this.x = x+1;    this.y = y;}function GetObjPos(ATarget){ //获取坐标    var target = ATarget;    var pos = new CPos(target.offsetLeft, target.offsetTop);        var target = target.offsetParent;    while (target)    {        pos.x += target.offsetLeft;        pos.y += target.offsetTop;                target = target.offsetParent    }        return pos;} function stopBubble(e){           if(e && e.stopPropagation){            e.stopPropagation();    //w3c    }else{        window.event.cancelBubble=true; //IE    }}
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表