Bootstrap是當(dāng)下流行的前端UI組件庫之一。利用Bootstrap，可以很方便的構(gòu)造美觀、統(tǒng)一的頁面。把設(shè)計師從具體的UI編碼中解放出來。
Bootstrap提供了不少的前端UI組件。帶下拉菜單的文本框就是其中之一，效果圖如下（真要自己完全設(shè)計，還得費(fèi)一番功夫）
關(guān)于該組件的詳情參看Bootstrap官網(wǎng)、帶下拉菜單的文本框
看到上面的效果圖，使我想到WinForm編程中的DropDownList控件。不過，和DropDownList控件相比，還缺少以下內(nèi)容
1、當(dāng)點(diǎn)擊菜單中的某一項(xiàng)，菜單的文字自動顯示在文本框中
2、當(dāng)點(diǎn)擊菜單中的某一項(xiàng)，提供一個函數(shù)來獲得相關(guān)的數(shù)據(jù)（可以是菜單的文字，也可以是相關(guān)的文本）
3、文本框不能編輯，只能通過點(diǎn)擊菜單來更改內(nèi)容
4、能設(shè)置下拉菜單的最大高度，使得菜單項(xiàng)過多時，能出現(xiàn)滾動條。（想想看，30條目將會占滿整個屏幕是多么恐怖的事）
當(dāng)然，Bootstrap只提供了前端UI的外觀，上面的這幾條都可以通過編碼來完成
基于碼農(nóng)的精神，自力更生，自己寫一個DropDownList的JQuery組件。
先規(guī)劃好這個JQuery組件的屬性：
InputName：文本框的name和id屬性，默認(rèn)值是“Q”；
ButtonText：右側(cè)按鈕的文字，默認(rèn)值是“示例”；
ReadOnly：文本框的可編輯性屬性。默認(rèn)是true，也就是不能編輯，只能通過點(diǎn)擊菜單來改變文字；
MaxHeight：下拉菜單的最高高度。默認(rèn)值是-1，不設(shè)置最高高度，菜單的高度由菜單的條目決定；
onSelect：設(shè)置選擇菜單條目時調(diào)用的函數(shù)。默認(rèn)值是$.noop()，JQuery中的空函數(shù)；
Items：菜單條目的集合。每個菜單項(xiàng)提供ItemText屬性（菜單文字）、ItemData屬性（相關(guān)數(shù)據(jù)）、Selected屬性（默認(rèn)選擇項(xiàng)，有多個，算最后一個）
Sections：菜單組的幾何。每個組包含ItemHeader屬性（組標(biāo)題文字）、Items屬性（該組菜單條目的集合）。每個組之間有一條分割線。該屬性的優(yōu)先級高于Items屬性（如果僅僅設(shè)置了Items，則意味著只有一個菜單組，沒有分割線，沒有組標(biāo)題文字）。
DropDownList的組件代碼如下，由于是基于JQuery，故要把該代碼置于JQuery引用代碼之下：
代碼比較簡單，主要就是依據(jù)屬性值來拼接HTML代碼，下面簡單的說明一下：
ReadOnly的實(shí)現(xiàn)：由于不是通過設(shè)置文本框的ReadOnly屬性（會改變文本框的外觀），因此采用綁定屏蔽掉文本框的cut、copy、paste、keydown事件來實(shí)現(xiàn)。
MaxHeight的實(shí)現(xiàn)：判斷下拉菜單（元素UL）的高度是否超過MaxHeight，若超過則設(shè)置CSS屬性Height和Overflow
onSelect函數(shù)：要自己實(shí)現(xiàn)一個函數(shù)，參數(shù)有兩個值，第一個值是文本框的名字，第二個是當(dāng)前點(diǎn)中的菜單項(xiàng)的相關(guān)數(shù)據(jù)（ItemData屬性）
<script>(function($){ jQuery.fn.DropDownList = function(options) {//設(shè)置插件的默認(rèn)屬性 var defaults ={ InputName:"Q", ButtonText:"示例", ReadOnly:true, MaxHeight:-1, onSelect:$.noop(), } var options = $.extend(defaults,options); return this.each(function(){ var o=options; var Obj=$(this); var S="<div class='input-group'>"; S = S + "<input type='text' class='form-control' name='" + o.InputName + "' id='" + o.InputName + "' />"; S = S + "<div class='input-group-btn'>"; S = S + "<button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown'>" + o.ButtonText + "<span class='caret'></span></button>"; S = S + "<ul class='dropdown-menu dropdown-menu-right' role='menu'>"; //可以由Sections參數(shù)或Items參數(shù)設(shè)置下拉條目，Sections的優(yōu)先級比Items高 if (o.Sections!== undefined) { $.each(o.Sections,function(n,value){ //從第2節(jié)開始，在每節(jié)的頂部添加一條分割線 if (n>0) { S=S + "<li class='divider'></li>"; } //如果設(shè)置了ItemHeader參數(shù)，則給該節(jié)添加標(biāo)題文本 if (value.ItemHeader!==undefined) { S = S + "<li class='dropdown-header'>" + value.ItemHeader + "</li>"; } CreateItem(value); }); } else { CreateItem(o); } var SelText=""; var SelData=""; function CreateItem(Items) { $.each(Items.Items,function(n,Item){ //如果ItemData參數(shù)沒有定義，則把ItemText參數(shù)傳給ItemDate if (Item.ItemData===undefined) {Item.ItemData=Item.ItemText;} S=S + "<li><a href='#' ItemData='" + Item.ItemData + "' >" + Item.ItemText + "</a></li>"; //如果設(shè)置了Selected參數(shù)，則獲取該條目的ItemDada和ItemText。 //如果有多個條目設(shè)置該參數(shù)，則獲取的是滿足條件最后一個條目 if (Item.Selected==true) { SelText=Item.ItemText;SelData=Item.ItemData;} }); } S =S + "</ul></div></div>"; Obj.html(S); var Input=Obj.find("input"); //如果有條目設(shè)置Selected參數(shù)，則調(diào)用設(shè)置活動條目的函數(shù) if (SelText!="") { SetData(SelText,SelData); } //給所有的條目綁定單擊事件，單擊后調(diào)用設(shè)置活動條目的函數(shù) Obj.find("a").bind("click", function(e) {SetData($(this).html(),$(this).attr("ItemData"));}); //如果ReadOnly參數(shù)設(shè)置為true，則屏蔽掉文本框的相關(guān)事件，使得文本框不能編輯。（而又顯示為激活狀態(tài)） if (o.ReadOnly==true) { Input.bind("cut copy paste keydown", function(e) {e.preventDefault();}); } //設(shè)置MaxHeight參數(shù)后（大于0），則設(shè)置下拉菜單的最大高度，若條目過多，會出現(xiàn)垂直滾動條 if (o.MaxHeight>0) { var UL=Obj.find("ul"); if (UL.height()>o.MaxHeight) {UL.css({'height':o.MaxHeight,'overflow':'auto'});} } function SetData(Text,Data) { Input.val(Text); if (o.onSelect) { o.onSelect(o.InputName,Data); } } }); }})(jQuery);</script>下面是幾個用法實(shí)例：對Id為DropDownList的div元素運(yùn)用組件，則在該div內(nèi)部添加一個DropDownList組件
1、用Items屬性實(shí)現(xiàn)下拉菜單（所有菜單項(xiàng)都在一個組里，沒有組標(biāo)題，沒有分割線）
function ShowData(InputName,Data){ alert(InputName + ":" + Data); }$("#DropDownList").DropDownList( { InputName:"Q", ButtonName:"參考", onSelect : function(I,Data) { ShowData(I,Data); }, Items:[ {ItemText:"示例1",ItemData:"Demo1",Selected:true}, {ItemText:"示例2",ItemData:"Demo2"}, {ItemText:"示例3",ItemData:"Demo3"} ] });效果圖：
2、用Sections屬性實(shí)現(xiàn)下拉菜單（菜單組之間有分割線，菜單組可以設(shè)置組標(biāo)題）
function ShowData(InputName,Data){ alert(InputName + ":" + Data); }$("#DropDownList").DropDownList( { InputName:"Q", ButtonText:"參考", onSelect : function(I,Data) { ShowData(I,Data); }, Sections:[ { ItemHeader:"全部", Items:[ {ItemText:"全部",ItemData:"All"} ] }, { Items:[ {ItemText:"示例1",ItemData:"Demo1",Selected:true}, {ItemText:"示例2"} ] } ] });效果圖：
3、實(shí)現(xiàn)全國省份直轄市的下拉選擇，要設(shè)置MaxHeight屬性
function ShowData(InputName,Data){ alert(InputName + ":" + Data); }$("#DropDownList").DropDownList( { InputName:"Q", ButtonText:"參考", MaxHeight:310, onSelect : function(I,Data) { ShowData(I,Data); }, Sections:[ { ItemHeader:"直轄市", Items:[ {ItemText:"北京",ItemData:"Beijing"}, {ItemText:"上海",ItemData:"Shanghai",Selected:true}, {ItemText:"天津",ItemData:"Tianjin"}, {ItemText:"重慶",ItemData:"Chongqing"} ] }, { ItemHeader:"華東地區(qū)", Items:[ {ItemText:"山東",ItemData:"Shandong"}, {ItemText:"江蘇",ItemData:"Jiangsu"}, {ItemText:"安徽",ItemData:"Anhui"}, {ItemText:"浙江",ItemData:"Zhejiang"}, {ItemText:"福建",ItemData:"Fujian"} ] }, { ItemHeader:"華南地區(qū)", Items:[ {ItemText:"廣東",ItemData:"Guangdong"}, {ItemText:"廣西",ItemData:"Guangxi"}, {ItemText:"海南",ItemData:"Hainan"} ] }, { ItemHeader:"華中地區(qū)", Items:[ {ItemText:"湖北",ItemData:"Hubei"}, {ItemText:"湖南",ItemData:"Hunan"}, {ItemText:"河南",ItemData:"Henan"}, {ItemText:"江西",ItemData:"Jiangxi"} ] }, { ItemHeader:"華北地區(qū)", Items:[ {ItemText:"河北",ItemData:"Hebei"}, {ItemText:"山西",ItemData:"Shanxi"}, {ItemText:"內(nèi)蒙古",ItemData:"Neimenggu"} ] }, { ItemHeader:"西北地區(qū)", Items:[ {ItemText:"寧夏",ItemData:"Ningxia"}, {ItemText:"新疆",ItemData:"Xinjiang"}, {ItemText:"青海",ItemData:"Qinghai"}, {ItemText:"陜西",ItemData:"Shaanxi"}, {ItemText:"甘肅",ItemData:"Gansu"}, ] }, { ItemHeader:"西南地區(qū)", Items:[ {ItemText:"四川",ItemData:"Sichuan"}, {ItemText:"云南",ItemData:"Yunnan"}, {ItemText:"貴州",ItemData:"Guizhou"}, {ItemText:"西藏",ItemData:"Xizang"} ] }, { ItemHeader:"東北地區(qū)", Items:[ {ItemText:"遼寧",ItemData:"Liaoning"}, {ItemText:"吉林",ItemData:"Jilin"}, {ItemText:"黑龍江",ItemData:"Heilongjiang"} ] } ] });效果圖：
唯一的遺憾就是有滾動條的時候，滾動條會覆蓋下拉菜單右側(cè)的兩個圓角，如果真要完美的話，可能要對Bootstrap中的源代碼進(jìn)行修改了。
以上內(nèi)容是小編給大家介紹的創(chuàng)建基于Bootstrap的下拉菜單的DropDownList的JQuery插件的全部內(nèi)容，希望對大家有所幫助！
新聞熱點(diǎn)
疑難解答
