JQuery components are based on Bootstrap DropDownList (full version) and jquerydropdownlist

JQuery components are based on Bootstrap DropDownList (full version) and jquerydropdownlist

In the previous document, the DropDownList JQuery plug-in created based on the Bootstrap drop-down menu has implemented the DropDownList JQuery component, but it is a pity. When the scroll bar appears in the drop-down menu, the scroll bar will overwrite the two rounded corners on the right of the menu. So that there are 2 rounded corners on the left of the drop-down menu, and there is no rounded corner on the right. It does not look perfect. As shown in:

This article describes how to restore the rounded corner on the right.

First, let's look at the HTML structure of the original 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, we can see that the ul label is used to display the drop-down menu (by referencing the dropdown-menu style), and the li label is used to implement menu items (including menus, delimiters, and group titles ). Let's take a look at the CSS corresponding to the ul and li labels:

.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;}

Because the style of a is passed. dropdown-menu> li> a, so the appearance of a must be in the li of the ul containing the dropdown-menu style.

Then, I thought about it. In the ul in the HTML structure, another ul containing the dropdown-menu is nested in li, and in ul is li and a in li.

However, as can be seen from the CSS above, the ul nested in it also achieves the menu appearance (rounded corner, projection, floating, etc.), so the style attribute is forcibly added to the ul label, forcibly remove some styles (change to inherit and use the default style ), these styles include display, position, top, float, padding, border, border-radius,-webkit-box-shadow, and box-shadow.

Let's talk about MaxHeight. After this modification, the CSS style max-height is used directly to reduce the menu height judgment. What if the browser does not support max-height? First, there are few browsers that do not support max-height (such as IE6). Second, if the browser does not support max-height, it cannot support Bootstrap very well. Therefore, you do not have to consider whether the browser supports the max-height attribute. Because there are two ul labels inside and outside, we need to apply the max-height attribute to the ul label, so UL = Obj is used. find ("ul [style]") statement to find the ul label (because ul contains the style attribute, but ul does not ).

Let's talk about JQuery's height method. When JQuery's height method is called to calculate the height of a hidden element, it is estimated that the element is displayed first, then the height is calculated, and then the element is hidden. There are two problems. First, the display is hidden, and the speed is very fast. However, the browser does not lie, and sometimes the browser displays a scroll bar. Second, if the parent element of the element is hidden, the height method returns 0.

Improved Version source code:

Functions ($) {invoke jQuery. fn. dropDownList = function (options) {response var defaults = {response InputName: "Q", response ButtonText: "example", response ReadOnly: true, response MaxHeight:-1, response onSelect: $. noop (), response} callback var options = $. extend (defaults, options); extends your return this. each (function () {callback var o = options; callback var Obj = $ (this); callback var S = "<div class = 'input-group'> ";  S = S + "<input type = 'text' class = 'form-control' name = '" + o. inputName + "'id = '" + o. in PutName + "'/>"; 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; bo Rder: 0px; border-radius: 0px;-webkit-box-shadow: inherit; '> "; adjust callback var SelText, SelData; when else if (o. sections! = Undefined) Detail {detail $. each (o. sections, function (n, value) {else if (n> 0) {S = S + "<li class = 'divider'> </li> ";} else if (value. itemHeader! = Undefined) {S = S + "<li class = 'dropdown-head'>" + value. itemHeader + "</li>";} Your CreateItem (value); items}); tags} Your else items {Your CreateItem (o );} finally completed function CreateItem (Items) failed {success $. each (Items. items, function (n, Item) {else if (Item. itemData = undefined) {Item. itemData = Item. itemText;} S = S + "<li> <a href = '# 'itemdata ='" + Item. itemData + "'>" + Item. itemText + "</a> </li>"; when if (Item. selected = true) {SelText = I Tem. itemText; SelData = Item. itemData;} tags}); tags} tags  S = S + "</ul> </li> </ul> </div> "; required bytes Obj.html (S); required bytes var Input = Obj. find ("input"); contains rows if (SelText! = "") {SetData (SelText, SelData);} contains multiple objects Obj. find (""). bind ("click", function (e) {response setdata(metadata (this).html (), $ (this ). attr ("ItemData"); items}); then else if (o. readOnly = true) handle {specify Input. bind ("cut copy paste keydown", function (e) {e. preventDefault () ;}); then} else if (o. maxHeight> 0) returns {callback var UL = Obj. find ("ul [style]");  UL.css ({'max-height': o. maxHeight, 'overflow': 'auto'}); Response} extends function SetData (Text, Data) extends {extends Input. val (Text); then if (o. onSelect) {o. onSelect (o. inputName, Data) ;}}}}}} }; Parameters} (jQuery );

Example:

 

In this way, two levels of ul are used to implement the drop-down menu, and the scroll bar does not overwrite the two rounded corners on the right. Compared with the previous versions, this version is relatively complete.

Author: hichina yiyu

Source: http://grenet.cnblogs.com/

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.