Create the DropDownList JQuery plug-in based on the Bootstrap drop-down menu, dropdownlistjquery

Create the DropDownList JQuery plug-in based on the Bootstrap drop-down menu, dropdownlistjquery

Bootstrap is one of the popular front-end UI component libraries. With Bootstrap, you can easily construct beautiful and unified pages. Free the designer from the specific UI code.

Bootstrap provides many front-end UI components. The text box with a drop-down menu is one of them, as shown below (it takes a lot of effort to design it yourself)

For more information about this component, see the Bootstrap official website and text box with a drop-down menu.

Seeing the above makes me think of the DropDownList control in WinForm programming. However, the following content is missing compared with the DropDownList control:

1. When you click an item in the menu, the text of the menu is automatically displayed in the text box.

2. When you click an item in the menu, a function is provided to obtain the relevant data (either the text of the menu or the relevant text)

3. the text box cannot be edited. You can only click the menu to change the content.

4. You can set the maximum height of the drop-down menu so that a scroll bar appears when there are too many menu items. (Think about how terrible it is to have 30 entries full of the screen)

Of course, Bootstrap only provides the front-end UI appearance, and the above items can be completed through encoding.

Based on the spirit of codenon and self-reliance, I wrote a DropDownList JQuery component myself.

First, plan the attributes of this JQuery component:

InputName: the name and id attributes of the text box. The default value is "Q ";

ButtonText: the text of the button on the right. The default value is "example ";

ReadOnly: editable attribute of the text box. The default value is true, that is, it cannot be edited. You can only click the menu to change the text;

MaxHeight: the highest height of the drop-down menu. The default value is-1. The maximum height is not set. The menu height is determined by the menu entry;

OnSelect: Set the function called when selecting a menu entry. The default value is $. noop (), which is an empty function in JQuery;

Items: a set of menu entries. Each menu item provides the ItemText attribute (menu text), ItemData attribute (related data), and Selected Attribute (multiple items are Selected by default, and the last one is counted)

Sections: ry of the menu group. Each group contains the ItemHeader attribute (group title text) and Items attribute (a set of menu entries in this group ). Each group has a split line. The priority of this attribute is higher than that of the Items attribute (if only Items is set, it means that there is only one menu group, no split line, no group title text ).

The DropDownList component code is as follows. Because it is based on JQuery, You need to place the code under the JQuery reference code:

The code is relatively simple. The HTML code is spliced Based on the attribute value. The following is a brief description:

ReadOnly implementation: Because the ReadOnly attribute of the text box is not set (the appearance of the text box is changed), the cut, copy, paste, and keydown events of the text box are shielded by binding.

MaxHeight: determines whether the Height of the drop-down menu (element UL) exceeds MaxHeight. If it exceeds the value, set the CSS attribute Height and Overflow.

OnSelect function: implement a function by yourself. The parameter has two values. The first value is the name of the text box, and the second is the relevant data (ItemData attribute) of the menu item in the current vertex)

<Script> (function ($) {jQuery. fn. dropDownList = function (options) {// set the default property 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. I NputName + "'/>"; 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'>"; // you can set the drop-down entries by the Sections parameter or Items parameter, the priority of Sections is higher than that of Items. if (o. sections! = Undefined) {$. each (o. sections, function (n, value) {// starting from section 2nd, add a split line if (n> 0) at the top of each section) {S = S + "<li class = 'divider'> </li>" ;}// if the ItemHeader parameter is set, add the title text if (value. itemHeader! = Undefined) {S = S + "<li class = 'dropdown-head'>" + value. itemHeader + "</li>" ;}createitem (value) ;}) ;}else {CreateItem (o) ;}var SelText = ""; var SelData = ""; function CreateItem (Items) {$. each (Items. items, function (n, Item) {// if the ItemData parameter is not defined, pass the ItemText parameter to ItemDate if (Item. itemData = undefined) {Item. itemData = Item. itemText;} S = S + "<li> <a href = '# 'itemdata ='" + Item. itemData + "'>" + Ite M. ItemText + "</a> </li>"; // If the Selected parameter is set, ItemDada and ItemText of the entry are obtained. // If this parameter is set for multiple entries, if (Item. selected = true) {SelText = Item. itemText; SelData = Item. itemData ;}}) ;}s = S + "</ul> </div>"; Obj.html (S); var Input = Obj. find ("input"); // if an entry sets the Selected parameter, call the function if (SelText! = "") {SetData (SelText, SelData);} // bind a click event to all entries, and then call the function Obj. find (""). bind ("click", function (e) extends setdata(((this).html (), $ (this ). attr ("ItemData") ;}; // If the ReadOnly parameter is set to true, events related to the text box are blocked, so that the text box cannot be edited. (And displayed as the activation status) if (o. readOnly = true) {Input. bind ("cut copy paste keydown", function (e) {e. preventDefault () ;}) ;}// after setting the MaxHeight parameter (greater than 0), set the maximum height of the drop-down menu. if there are too many entries, the vertical scroll bar 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>

The following example shows how to use the components for the div element whose Id is DropDownList. Then, add a DropDownList component to the div.

1. Use the Items attribute to implement the drop-down menu (all menu Items are in the same group, with no group title and no split line)

Function ShowData (InputName, Data) {alert (InputName + ":" + Data) ;}$ ("# DropDownList "). dropDownList ({InputName: "Q", ButtonName: "Reference", onSelect: function (I, Data) {ShowData (I, Data) ;}, Items: [{ItemText: "Example 1", ItemData: "Demo1", Selected: true}, {ItemText: "Example 2", ItemData: "Demo2"}, {ItemText: "Example 3 ", itemData: "Demo3"}]});

:

2. Use the Sections attribute to implement the drop-down menu (there is a split line between menu groups, and you can set the group title in the menu Group)

Function ShowData (InputName, Data) {alert (InputName + ":" + Data) ;}$ ("# DropDownList "). dropDownList ({InputName: "Q", ButtonText: "Reference", onSelect: function (I, Data) {ShowData (I, Data) ;}, Sections: [{ItemHeader: "All", Items: [{ItemText: "All", ItemData: "All"}]}, {Items: [{ItemText: "Example 1", ItemData: "Demo1", Selected: true}, {ItemText: "Example 2"}]});

:

3. Select a province or municipality from the drop-down list. Set the MaxHeight attribute.

Function ShowData (InputName, Data) {alert (InputName + ":" + Data) ;}$ ("# DropDownList "). dropDownList ({InputName: "Q", ButtonText: "Reference", MaxHeight: 310, onSelect: function (I, Data) {ShowData (I, Data) ;}, Sections: [{ItemHeader: "municipality", Items: [{ItemText: "Beijing", ItemData: "Beijing" },{ ItemText: "Shanghai", ItemData: "Shanghai", Selected: true },{ ItemText: "Tianjin", ItemData: "Tianjin" },{ ItemText: "Chongqing", ItemData: "Chongqing"}] },{ ItemHeader: "East China", Items: [{ItemText: "Shandong", ItemData: "Shandong" },{ ItemText: "Jiangsu", ItemData: "Jiangsu" },{ ItemText: "Anhui", ItemData: "Anhui" },{ ItemText: "Zhejiang", ItemData: "Zhejiang" },{ ItemText: "Fujian", ItemData: "fujiian"}] },{ ItemHeader: "South China", Items: [{ItemText: "Guangdong", ItemData: "Guangdong" },{ ItemText: "Guangxi ", itemData: "Guangxi" },{ ItemText: "Hainan", ItemData: "Hainan"}] },{ ItemHeader: "Central China", Items: [{ItemText: "Hubei", ItemData: "Hubei" },{ ItemText: "Hunan", ItemData: "Hunan" },{ ItemText: "Henan", ItemData: "Henan "}, {ItemText: "Jiangxi", ItemData: "Jiangxi"}]}, {ItemHeader: "North China", Items: [{ItemText: "Hebei", ItemData: "Hebei" },{ ItemText: "Shanxi", ItemData: "Shanxi" },{ ItemText: "Inner Mongolia", ItemData: "Neimenggu"}] },{ ItemHeader: "northwest China", Items: [{ItemText: "Ningxia", ItemData: "Ningxia" },{ ItemText: "Xinjiang", ItemData: "Xinjiang" },{ ItemText: "Qinghai", ItemData: "Qinghai" },{ ItemText: "Shaanxi", ItemData: "Shaanxi" },{ ItemText: "Gansu", ItemData: "Gansu" },] },{ ItemHeader: "Southwest China", Items: [{ItemText: "Sichuan", ItemData: "Sichuan" },{ ItemText: "Yunnan ", itemData: "Yunnan" },{ ItemText: "Guizhou", ItemData: "Guizhou" },{ ItemText: "Tibet", ItemData: "Xizang"}] },{ ItemHeader: "Northeast China", Items: [{ItemText: "Liaoning", ItemData: "Liaoning" },{ ItemText: "Jilin", ItemData: "Jilin" },{ ItemText: "Heilongjiang", ItemData: "Heilongjiang"}]});

:

The only pity is that when there is a scroll bar, the scroll bar will overwrite the two rounded corners on the right of the drop-down menu. If it is perfect, the source code in Bootstrap may need to be modified.

The above content is all the content of the DropDownList JQuery plug-in that creates a Bootstrap-based drop-down menu. I hope it will help you!