The jquery component is based on the bootstrap DropDownList (full version) _jquery

The DropDownList jquery component is implemented in the DropDownList jquery plugin of the previous creation of the bootstrap Pull-down menu, but regrets remain. When a scroll bar appears in the Drop-down menu, the scroll bar overwrites the two rounded corners on the right side of the menu. There are 2 rounded corners on the left side of the dropdown menu, not on the right, and it doesn't look perfect. As shown in the following illustration:

This article is about how to recover the rounded corners on the right

First look at the original HTML structure of the Drop-down menu:

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

From the above structure can be seen, by the UL tag to achieve the appearance of the Drop-down menu (by referencing the Dropdown-menu style), by the LI Tag Implementation menu items (including menus, separators, group headings). Look at the UL and Li tags corresponding to the CSS:

.dropdown-menu {position:absolute;top:100%;left:0;z-index:1000;displa
Y: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:non
E
background-color: #f5f5f5; } 

Because the style of a is implemented through the. Dropdown-menu > li > A, the appearance of a must be in the inside of the Li in the UL containing the style dropdown-menu.

So, a thought, in the HTML structure of the UL inside Li and then nested a containing style Dropdown-menu Ul,ul inside is Li,li inside is a.

But as you can see from the above CSS, embedded in the UL will also achieve the appearance of the menu (fillet, projection, floating, etc.), so in the UL label forced to add style attributes, some of the mandatory removal of style (changed to inherit, using the default style), these styles include display, Position, top, float, padding, border, Border-radius,-webkit-box-shadow, Box-shadow.

Again, MaxHeight. After this change directly using CSS style max-height, and reduce the judge of the height of the menu. What if the browser doesn't support Max-height? One is not support Max-height browser is less (IE6, etc.), the second is if the browser does not support Max-height, also can not very good support bootstrap. Therefore, you do not have to consider whether the browser supports Max-height properties. As there are 2 UL tags inside and outside, we need to apply the Max-height attribute to the UL tag, so use the Ul=obj.find ("Ul[style]") statement to find the UL tag inside (because the UL inside contains style attribute, and the UL is not there).

Again, jquery's height method. When you call jquery's Height method to calculate the height of a hidden element, it is estimated that the element is first displayed, then the height is calculated, and then the element is hidden. This will have two problems. One is the display and then hide, fast, the naked eye can not see, but the browser will not lie, sometimes the browser will display additional scroll bar. The second is that if the element's parent element is also hidden, the height method returns 0.

Perfect version of the source code:

 (function ($) {jquery.fn.dropdownlist = function (options) {var defaults ={inputname: "Q", buttontext: "Example", 
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=" divi
Der ' ></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.Ite
Mdata + "' >" + 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). HT
ML (), $ (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);

Proof:

This is done through the two-level UL implementation of the Pull-down menu, and the scroll bar does not cover the right side of the two rounded corners. Compared to the previous version, More perfect.

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.