标签：
名称：laSelect
功能：模拟浏览器的原生下拉列表功能
原因：解决下拉列表在IE 7 - 下的兼容性问题，并提供更自由的外观以及功能设定。
----------------------------------------------------------------
1. 使用方法：
（1） html 结构：
创建一个包裹所有内容的盒子，必须要指定一个id，该元素由使用者自己创建：
<div id=‘selectBox‘></div>
（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‘ :Data 5 }); 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结构如下表：
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‘:select1 19 }); 20 21 function SubSelect(val){ 22 laSelect({ 23 ‘dom‘:‘select1‘, 24 ‘css‘:{‘H‘:‘25px‘,‘bg‘:‘#eee‘}, 25 ‘data‘:val 26 }); 27 } 28 29 SubSelect(); //默认生成一条
============================ 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)
标签：
原文地址：http://www.cnblogs.com/HCJJ/p/5136647.html
