「シミュレート」ドロップダウンリスト

名前: laSelect

機能: ブラウザーのネイティブ ドロップダウン リスト機能をシミュレートします。

理由: IE 7 でのドロップダウン リストの互換性の問題を解決します。 - 外観と機能の設定の自由度が向上します。

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

1. 使用法:

(1) HTML 構造:

作成 すべてのコンテンツをラップするボックスは ID を指定する必要があります。この要素はユーザーによって作成されます:

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

(2) はじめに: laSelect.js

2. .js core メソッドの説明:

コア メソッド:

 laSelect()

パラメータの説明:

コア メソッドによって実装されるすべての関数には、パラメータとしてオブジェクトが必要です。

このパラメータ オブジェクトで使用できる属性は次のとおりです:

dom: [必須]、値はラッピング ボックス要素の ID です。

テーマ: デフォルトのスタイルの有無を設定します。デフォルトのスタイルを使用する場合は、記述する必要はありません。 値「none」は、デフォルトのスタイルが適用できないことを示します。

css: テーマの値が「none」ではない場合に、デフォルトのスタイルを微調整するために使用されます。

data: ドロップダウン リスト オプションを生成するためのデータを保存するために使用される配列。

fn: ドロップダウン リスト オプションが選択されたときにトリガーされるユーザー定義のコールバック関数。

属性の詳細な説明:

・テーマ

は、デフォルトのスタイルがあるかどうかを設定するために使用されます。

値が theme:'none' の場合、スタイルを含まずに必要な HTML 構造のみが生成されることを意味します。

すべてのスタイルはユーザー自身によって作成されます。

・css

テーマの値が「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 ]

* 名前と ID が必要です。 名前はドロップダウン リスト オプションに表示されるテキストであり、ID はドロップダウン リスト オプションに必要です。背景。

· fn

ドロップダウン リスト オプションを選択すると、ユーザーはカスタム コールバック関数を送信できます。

値は関数です。

fn のメソッドは次のパラメータを受け取ることができます:

elem: 現在のドロップダウン リスト オプション:

—| のインデックス値を取得できます。現在のドロップダウン リスト。

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

id | class

description

customId

ユーザー定義の自作宅配ボックス ID

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

customId > UL

  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)

パッケージ ボックス内の UL リスト。ドロップダウン リスト データを表示するために使用されます。データ属性の値に基づいて自動的に作成されます。

customId > b

ドロップを生成するために使用される、ラッピング ボックス内の b 要素down 三角アイコン

customId > em

ラッピング ボックス内の em 要素。記録 最終的な選択結果であるその要素の内容は、ユーザーが選択したドロップダウン リストの内容であり、その value 属性はドロップダウン リスト オプションの ID 名です。

6. リンケージの実装 アイデア: ユーザーが fn 属性を使用してドロップダウン リスト オプションを選択した後にイベント コールバックをバインドします。コールバックは、現在のドロップダウン リスト オプションのインデックス値 (インデックス属性) を使用して、次のレベルの選択を再生成できます。 例: =========================== コード ==== ========================