模拟下拉列表-HTML Tutorial-php.cn

名称：laSelect

功能：模拟浏览器的原生下拉列表功能

原因：解决下拉列表在IE 7 - 下的兼容性问题，并提供更自由的外观以及功能设定。

----------------------------------------------------------------

1. 使用方法：

（1） html 结构：

创建一个包裹所有内容的盒子，必须要指定一个id，该元素由使用者自己创建：

<div id='selectBox'></div>

Copy after login

（2）引入：laSelect.js

2. laSelect.js核心方法说明：

核心方法：

 laSelect()

Copy after login

参数说明：

核心方法实现的所有功能，必须要有一个对象作为参数。

以下是该参数对象中可接受的属性：

dom : [必须]，取值为包裹盒子元素的id。

theme : 设置是否有默认的样式，如果使用默认的样式，可以不写。取值为'none'时表示不适用默认样式。

css : 在theme值不为'none'时，用于微调默认的样式。

data : 一个数组，该数组用于存放着生成下拉列表选项的数据。

fn : 当下拉列表选项被选择后触发的一个由用户自定义的回调功能。

属性详解：

· theme

用于设置是否有默认的样式。

如果取值为 theme:'none'，则表示只生成所需要的HTML结构，而不具有任何样式，

所有的样式都是由使用者自己书写。

· css

如果theme取值不为'none'时，会生成默认的样式。

css对象可以对默认的样式进行调整。

css是一个对象，它可以接受以下属性参数：

W: 设置包裹盒子元素的宽度，示例：W:'180px'。H: 设置包裹盒子元素的高度。bg: 设置下拉列表的背景，示例：bg:'#fff'。fontSize: 设置字体的大小，示例：fontSize:'13px'。color: 设置文字的颜色，示例：color:'#000'。border: 设置包裹盒子元素的边框样式，示例：border:'1px solid #eee'。Uborder: 设置包裹下拉列表选项的边框样式。borderRadius:设置包裹盒子元素的圆角，示例：borderRadius:'5px'。textIndent:设置文字的首行缩进，示例：textIndent:'5px'。linkcolor: 设置下拉列表选项默认的文字颜色。hovercolor: 设置hover下的下拉列表选项的文字颜色。linkbg: 设置下拉列表默认的背景颜色。hoverbg: 设置hover下的下拉列表选项背景颜色。

Copy after login

· data

一个数组。保存着生成下拉列表选项的数据。

其格式如下：

1 [2   {'name':'text1','id','idValue1'},3   {'name':'text2','id','idValue2'},4   ....5 ]

Copy after login

* 必须要有name与id，name是下拉列表选项要显示的文本，id是后台所需要用到的。

· fn

当下拉列表选项被选择后，用户可以发送一个自定义的回调功能。

取值是一个function。

fn中的方法可以接收以下参数：

elem : 当前的下拉列表选项：

—| elem.index 可以获取当前下拉列表的索引值。

ulElem : 获得包含所有下拉列表选项的ul元素。

oBoxElement：获得整个下拉列表对象。

示例：

1 'fn':function(elem,ulElem,oBoxElement){2         console.log(elem)3         console.log(ulElem)4         console.log(oBoxElement)5  }

Copy after login

3. 一般的使用示例：

1 laSelect({2   'dom':'selectBox'3 });4 // 生成一个默认的初始下拉列表框

Copy after login

1 laSelect({2   'dom':'selectBox',3   'theme':'none',4   'data' :Data5 });6 // 生成一个不带任何样式的下拉列表

Copy after login

1 laSelect({2   'dom':'selectBox',3   'css':{'W':'180px','H':'30px','bg':'#000'},4   'data':Data,5   'fn':function(elem){alert(elem.index)}6  });7 //自定义一个下拉列表框，并可传入自定义的事件功能

Copy after login

4. HTML 结构说明

本次模拟原生下拉列表所用到的HTML结构如下表：

id \| class	description
customId	用户自定义自创建的包裹盒子ID
customId > UL	包裹盒子内的一个UL列表，用于展示下拉列表数据。根据data属性的值自动创建。
customId > b	包裹盒子内的一个b元素，用于生成下拉的三角形图标
customId > em	包裹盒子内的一个em元素，用于记录最终的选择结果，它的元素内容，是用户选择的下拉列表的内容，它的value属性，则是下拉列表选项的id名称。

6 .实现联动

思路：通过fn属性为用户选择下拉列表选项后绑定事件回调，该回调利用了当前下拉列表选项的索引值(index 属性) 实现对下一级的select进行重新生成。

示例：

 1 var select1 = function(x,y,z){ 2     var indexs = x.index-1,  //获取当前下拉列表选项的索引 3         val = '';          //保存着生成下一级下拉列表的数据。 4     if(indexs>=0){    //如果用户选择的是"请选择"，那么将生成数据值为空。 5         val = '';      6     }else{      //否则获取生成数据 7         val = subData;   8     } 9 10     SubSelect(val) //执行下级下拉列表的生成方法。11 }12 13 14 laSelect({15     'dom':'select',16     'data':data,17     'css':{'H':'20px'},18     'fn':select119 });20 21 function SubSelect(val){22     laSelect({23         'dom':'select1',24         'css':{'H':'25px','bg':'#eee'},25         'data':val26     });27 }28 29 SubSelect(); //默认生成一条

Copy after login

============================ Code ============================

  1 ;(function(root){  2   3     var UlBox = [];    4     function hideUl(){  5         for(var i=0;i<UlBox.length;i++){     6             UlBox[i].style.display="none";  7             UlBox[i].flag = true;  8         }  9     } 10  11     document.onclick=hideUl; 12     document.oncontextmenu=hideUl; 13  14     function laSelect(param){ 15  16         this.oBox = document.getElementById(param.dom); 17         if(!this.oBox) return false; 18         this.data = param.data?param.data:[]; 19         this.css = param.css; 20         this.fn = param.fn; 21         this.theme = param.theme; 22         this.UL = document.createElement('UL'); 23         this.EM = document.createElement('EM'); 24         this.Tr = document.createElement('B'); 25         this.initStyle = {'W':'198px','H':'17px','bg':'white','fontSize':'13px','border':'1px solid #aaaaaa','Uborder':'1px solid #7a9cd3','borderRadius':'2px','color':'#000','textIndent':'5px','linkcolor':'#000','hovercolor':'#fff','linkbg':'none','hoverbg':'#1e90ff'}; 26  27         for(var i in this.css){ 28             if(this.css[i] != this.initStyle[i]) this.initStyle[i] = this.css[i]; 29         } 30          31         this.init(); 32         if(this.theme!="none"){ 33             this.setStyle(); 34         } 35         this.core(); 36  37     } 38  39     laSelect.prototype.createStyle=function(obj,css){ 40         for(var i in css){ 41             obj.style[i]=css[i]; 42         } 43     }; 44  45     laSelect.prototype.init=function(){ 46  47         var a = []; 48         this.oBox.innerHTML=""; 49         a.push('<li value="undefined">请选择</li>'); 50  51         for(var i = 0;i<this.data.length;i++){ 52             a.push('<li value="'+ this.data[i].id +'">'+ this.data[i].name + '</li>'); 53         } 54         this.UL.innerHTML = a.join(''); 55         this.EM.innerHTML = "请选择"; 56         this.EM.setAttribute('value','undefined'); 57         this.oBox.appendChild(this.EM); 58         this.oBox.appendChild(this.UL); 59         UlBox.push(this.UL); 60         this.oLi = this.UL.getElementsByTagName('li'); 61         this.oBox.appendChild(this.Tr); 62  63     }; 64  65     laSelect.prototype.setStyle=function(){ 66  67         this.oBox.style.cssText = "position:relative;height:"+ this.initStyle.H +";line-height:"+ this.initStyle.H +";width:"+ this.initStyle.W +";color:"+ this.initStyle.color +";background:"+ this.initStyle.bg +";font-size:"+ this.initStyle.fontSize +";border:"+ this.initStyle.border +";border-radius:"+this.initStyle.borderRadius; 68  69         this.UL.style.cssText = "position:absolute;width:"+ this.initStyle.W +";left:-1px;top:"+( parseInt(this.initStyle.H)+1)+"px;display:none;border:"+this.initStyle.Uborder +";border-radius:"+ this.initStyle.borderRadius +";background:"+this.initStyle.bg; 70  71         this.EM.style.cssText = "position:absolute;width:"+ this.initStyle.W + ";height:" + this.initStyle.H +";line-height:"+ this.initStyle.H +";text-indent:"+ this.initStyle.textIndent + ";cursor:pointer;font-style:normal;font-size:"+this.initStyle.fontSize; 72  73         this.Tr.style.cssText = "position:absolute;width:0px;height:0px;border-width:5px;border-style:solid;border-color:transparent;_border-color:"+ this.initStyle.bg +";border-top-width:8px;border-top-color:#000;line-height:0px;overflow:hidden;right:6px;top:50%;margin-top:-4px;cursor:pointer"; 74  75         for(var i=0;i<this.oLi.length;i++){ 76             this.createStyle(this.oLi[i],{'lineHeight':this.initStyle.H,'textIndent':this.initStyle.textIndent,'cursor':'pointer','fontSize':this.initStyle.fontSize}); 77         } 78  79     }; 80  81     laSelect.prototype.core=function(){ 82  83         var _this = this, 84             ulElement = this.UL, 85             liElement = this.oLi, 86             oBoxElement = this.oBox; 87         this.UL.flag = true; 88  89         function hide(__this){ 90             _this.UL.style.display="none"; 91             _this.EM.innerHTML = __this.innerHTML; 92             _this.EM.setAttribute('value',__this.getAttribute('value')); 93             _this.UL.flag=true; 94             if(_this.fn && typeof(_this.fn)=='function') _this.fn(__this,liElement,ulElement,oBoxElement); 95         } 96  97         function HADIS(event){ 98              99             return function(event){100                 var event = event || window.event;101                 if(_this.UL.flag){102                     _this.UL.style.display="block";103                     _this.UL.flag=false;104                 }else{105                     _this.UL.style.display="none";106                     _this.UL.flag=true;107                 }108 109                 for(var i=0;i<UlBox.length;i++){110                     if(_this.UL != UlBox[i]){111                         UlBox[i].style.display="none";112                         UlBox[i].flag = true;113                     }114                 }115 116                 if(document.addEventListener){117                     event.stopPropagation();118                     event.preventDefault();119                 }else{120                     event.cancelBubble = true;121                     event.returnValue = false;122                 }123             }124 125         }126 127         for(var i=0;i<this.oLi.length;i++){128             this.oLi[i].index = i;129             this.oLi[i].onmouseover=function(){130                 _this.createStyle(this,{'background':_this.initStyle.hoverbg,'color':_this.initStyle.hovercolor});131             };132             this.oLi[i].onmouseout=function(){133                 _this.createStyle(this,{'background':_this.initStyle.linkbg,'color':_this.initStyle.linkcolor});134             };135             this.oLi[i].onclick=function(){136                 hide(this);137             };138             this.oLi[i].oncontextmenu=function(event){139                 var event = event || window.event,140                     oTarget = event.srcElement ? event.srcElement : event.target;141                     hide(this);142                     return false;143             };144         }145         146         this.EM.onclick=HADIS(event);147         this.Tr.onclick=HADIS(event);148     };149 150     root.laSelect=function(p){151         new laSelect(p);152     }153 154 })(window)

Copy after login