模拟下拉列表

名称：laSelect

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

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

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

1. 使用方法：

（1） html 结构：

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

（2） 引入：laSelect.js

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

核心方法：

 laSelect()

参数说明：

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

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

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下的下拉列表选项背景颜色。

· data

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

其格式如下：

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

* 必须要有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  }

3. 一般的使用示例：

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

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

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 //自定义一个下拉列表框，并可传入自定义的事件功能

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(); //默认生成一条

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

  1 ;(function(root){  2   3     var UlBox = [];    4     function hideUl(){  5         for(var i=0;i请选择'); 50  51         for(var i = 0;i'+ this.data[i].name + ''); 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