html模拟下拉列表,模拟下拉列表

名称：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