自己封裝的乙個模擬下拉列表的外掛程式

2022-02-19 18:19:05 字數 2430 閱讀 3188

簡述:

通過使用simselect

可以實現由傳統

html

模擬類似於原生

select

標籤的功能。

主要是解決select

標籤樣式在不同瀏覽器中的相容性問題。

通過模擬,使用者便可以完全自定義下拉列表的樣式。

該工具主要有以下幾種功能:

結構:

通過使用simselect

,可以在指定的

dom物件內生成乙個模擬的結構,這個模擬的

html

結構詳細內容如下:

dom|- em       -> 用於顯示使用者選中的結果。

|- span         -> 下來列表的三角形箭頭。

|- input:hidden     -> 結合表單提交的表單控制項。

|-ul           -> 用於展示生成的下拉列表選項。

|- li         -> 每乙個下來列表選項。

具體**:

1 ;(function

(root)9}

1011 document.onclick=hideul;

12 document.oncontextmenu=hideul;

1314

function

simselect(param)

2526 simselect.prototype.init=function

()47

break;48

}495051

for(var i = 0,l = (this.data && this.data.length)?this.data.length : 0;i)

5455}56

57this.ul.innerhtml = a.join('');

58this.ul.style.display = 'none';

59this.cnt.innerhtml = "請選擇";

60this.mark.innerhtml = '▼'

6162

63.cnt);

64.mark);

65.inp);

66.ul);

6768 ulbox.push(this

.ul);

69this.oli = this.ul.getelementsbytagname('li');

7071

};72

7374 simselect.prototype.core=function

()86

87function hideandshow()else

9899

for(var i=0;i)

104}

105106

if(document.addeventlistener)else

113}

114115

}116

117for(var i=0;i123this.oli[i].onmouseover=function

();126

this.oli[i].onmouseout=function

();129

this.oli[i].oncontextmenu=function

(event);

135136

}137

this.cnt.onclick=hideandshow();

138this.mark.onclick=hideandshow();

139};

140141 root.simselect=function

(p);

144145 })(window)

呼叫方式如下:

1

simselect();6/*

7|-- dom [object] :指定生成下拉列表元件的dom物件。

8|-- name[string] :設定表單控制項的name屬性值。

9|-- data [object] :生成下拉列表選項的資料。

10|-- fn[function] :選擇下來列表後的**函式。

11*/

示例:聯動生成:

1

var data =[

2 ,

3 ,

4

5];

6var data2 =[

7 ,

8 ,

9

10];

11simselect(

24});25}

26}27 });

自己封裝的乙個GridView控制項

效果如圖 使用方法 void viewdidload cgfloat gridview mygridview gridview heightofrow nsinteger row nsinteger numberofgridview mygridview gridview void gridview...

自己封裝的乙個MySQL類

import pymysql import logging 獲取logger的例項 logger logging.getlogger lzjf 指定logger的輸出格式 formatter logging.formatter asctime s levelname s message s 檔案日誌...

封裝乙個自己的通用Ajax

首先在封裝乙個自己的ajax函式之前,我們需要先知道怎麼實現乙個簡單的ajax請求。這裡我建了兩個檔案,ajax01.html和ajax01.php ajax01.html 點選上面的按鈕,我會變哦 可以看到使用ajax發請求並獲取響應資料只需要簡單的4步 引數說明 xhr.status statu...