名称：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结构如下表：
|
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‘: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)
时间： 2024-10-01 03:15:31