JQuery組件基於Bootstrap的DropDownList（完整版），jquerydropdownlist

JQuery組件基於Bootstrap的DropDownList（完整版），jquerydropdownlist

在前文 建立基於Bootstrap的下拉式功能表的DropDownList的JQuery外掛程式 中，實現了DropDownList的JQuery組件，但是留有遺憾。就是當下拉式功能表出現捲軸的時候，捲軸會覆蓋菜單右側的兩個圓角。使得下拉式功能表左側有2個圓角，右側沒有，看上去不是很完美。如所示：

本文的內容就是如何恢複右側的圓角 

先看看原本的下拉式功能表的HTML結構：

 <ul class="dropdown-menu dropdown-menu-right" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li></ul>

從上面的結構可以看出，由ul標籤實現下拉式功能表的外觀（通過引用dropdown-menu樣式），由li標籤實現功能表項目（包括菜單、分隔字元、組標題）。來看看ul和li標籤對應的CSS：

.dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; -webkit-background-clip: padding-box;   background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);   box-shadow: 0 6px 12px rgba(0, 0, 0, .175);}.dropdown-menu > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.42857143; color: #333; white-space: nowrap;}.dropdown-menu > li > a:hover,.dropdown-menu > li > a:focus { color: #262626; text-decoration: none; background-color: #f5f5f5;}

由於a的樣式是通過.dropdown-menu > li > a來實現的，故要實現a的外觀必須是在含有樣式dropdown-menu的ul裡面的li的裡面的a的。 

於是，動了一個念頭，在HTML結構裡的ul裡面的li裡再嵌套一個包含樣式dropdown-menu的ul，ul裡面是li，li裡面是a。

但是從上面的CSS可以看出，嵌套在裡面的ul也會實現菜單的外觀（圓角、投影、浮動等），故在該ul的標籤裡強制添加style屬性，把一些樣式強制性的去除（改成inherit，採用預設樣式），這些樣式包括display、position、top、float、padding、border、border-radius、-webkit-box-shadow、box-shadow。 

再說說MaxHeight。本次修改後直接採用CSS的樣式max-height，而減少對菜單高度的判斷。會有疑問，如果瀏覽器不支援max-height怎麼辦？一是不支援max-height的瀏覽器比較少（IE6等），二是如果瀏覽器不支援max-height，也就不能很好的支援Bootstrap。故不必考慮瀏覽器是否支援max-height屬性。由於裡外有2個ul標籤，我們需要對裡面的ul標籤應用max-height屬性，故用UL=Obj.find("ul[style]")語句來找尋裡面的ul標籤（因為裡面的ul含有style屬性，而外面的ul沒有）。 

再說說JQuery的height方法。當調用JQuery的height方法來計算隱藏元素高度時，估計是先會顯示元素，然後計算高度，再隱藏元素。這會有兩個問題。一是顯示再隱藏，速度很快，肉眼看不出，但是瀏覽器不會說謊，有時瀏覽器會額外顯示捲軸。二是如果該元素的父元素也是隱藏的，則height方法會返回0。 

完善版的原始碼：

(function($){ jQuery.fn.DropDownList = function(options) {  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' >";   S = S + "<li><ul class='dropdown-menu ' style='display:inherit;position:inherit;top:0;float:inherit;padding:0;border:0px;border-radius:0px;-webkit-box-shadow: inherit;box-shadow: inherit;'>";   var SelText,SelData;   if (o.Sections!== undefined)    {     $.each(o.Sections,function(n,value){      if (n>0) {S=S + "<li class='divider'></li>";}      if (value.ItemHeader!==undefined) {S = S + "<li class='dropdown-header'>" + value.ItemHeader + "</li>";}      CreateItem(value);     });    }   else    {     CreateItem(o);    }    function CreateItem(Items)   {    $.each(Items.Items,function(n,Item){     if (Item.ItemData===undefined) {Item.ItemData=Item.ItemText;}     S=S + "<li><a href='#' ItemData='" + Item.ItemData + "' >" + Item.ItemText + "</a></li>";     if (Item.Selected==true) {SelText=Item.ItemText;SelData=Item.ItemData;}    });   }    S =S + "</ul></li></ul></div></div>";   Obj.html(S);   var Input=Obj.find("input");   if (SelText!="") {SetData(SelText,SelData);}   Obj.find("a").bind("click", function(e) {           SetData($(this).html(),$(this).attr("ItemData"));          });   if (o.ReadOnly==true)   {    Input.bind("cut copy paste keydown", function(e) {e.preventDefault();});    }   if (o.MaxHeight>0)   {    var UL=Obj.find("ul[style]");    UL.css({'max-height':o.MaxHeight,'overflow':'auto'});   }   function SetData(Text,Data)   {    Input.val(Text);    if (o.onSelect) {o.onSelect(o.InputName,Data);}   }  }); }})(jQuery);

樣張：

 

這樣通過兩層的ul實現了下拉式功能表，並且捲軸也沒有覆蓋右側的兩個圓角。較之上個版本，比較完善。

作者：萬倉一黍

出處：http://grenet.cnblogs.com/

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。