基於Bootstrap的DropDownList的JQuery組件的完善版

在前文 建立基於Bootstrap的下拉菜單的DropDownList的JQuery插件 中，實現了DropDownList的JQuery組件，可是留有遺憾。就是當下拉菜單出現滾動條的時候，滾動條會覆蓋菜單右側的兩個圓角。使得下拉菜單左側有2個圓角，右側沒有，看上去不是很完美。以下圖所示：

 

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

 

先看看本來的下拉菜單的HTML結構：

 

Snippet官網 Snippet使用實例

   
   
   
   

    
    
    
    
<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：

 

Snippet官網 Snippet使用實例

   
   
   
   

    
    
    
    
.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。

 

完善版的源代碼：

 

Snippet官網 Snippet使用實例

   
   
   
   

    
    
    
    
(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實現了下拉菜單，而且滾動條也沒有覆蓋右側的兩個圓角。較之上個版本，比較完善。