Create a DropDownList jquery plugin _javascript technique based on the Bootstrap Drop-down menu

Bootstrap is one of the current popular front-end UI component libraries. The use of bootstrap, can be very convenient to construct beautiful, unified page. Free the designer from the specific UI code.

Bootstrap provides a number of front-end UI components. The text box with the Drop-down menu is one of them, and the effect is as follows (you really have to do it yourself.)

For more information on this component, see the bootstrap website, the text box with the Drop-down menu

Seeing the above effect chart reminds me of the DropDownList control in WinForm programming. However, the following is missing compared to the DropDownList control

1. When clicking on an item in the menu, the text of the menu is automatically displayed in the text box

2. When clicking on an item in the menu, provide a function to obtain the relevant data (can be the text of the menu, can also be related text)

3, text box can not edit, only by clicking the menu to change the content

4, can set the maximum height of the Drop-down menu, make the menu items too much, can appear scroll bar. (Think about how scary it would be to have 30 items full of screens.)

Of course, bootstrap only provides the appearance of the front-end UI, which can be done by coding

Based on the code farming Spirit, self-reliance writes a DropDownList jquery component.

First, plan the attributes of this jquery component:

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

ButtonText: The text of the right button, the default is "example";

ReadOnly: The editable properties of the text box. The default is true, that is, can not edit, only by clicking the menu to change the text;

MaxHeight: The highest height of the Drop-down menu. The default value is-1, do not set the highest height, the height of the menu is determined by the menu item;

Onselect: Sets the function that is called when the menu entry is selected. The default value is $.noop (), the null function in jquery;

Items: A collection of menu entries. Each menu item provides Itemtext properties (menu text), ItemData properties (related data), Selected properties (default selection, multiple, last)

Sections: The geometry of the menu group. Each group contains the ItemHeader attribute (group header text), the Items property (a collection of menu entries for that group). There is a split line between each group. This property takes precedence over the Items property (if only items are set, it means that there is only one menu group, no split lines, no group header text).

DropDownList's component code is as follows, because it is based on jquery, so you want to place the code under the jquery reference code:

The code is relatively simple, mainly based on the attribute value to the stitching of HTML code, the following simple description:

ReadOnly implementation: Because it is not by setting the ReadOnly property of the text box (which changes the appearance of the text box), the Cut, copy, paste, and KeyDown events of the text box are masked by binding.

MaxHeight implementation: To determine whether the Drop-down menu (element ul) of the height of more than maxheight, if more than set the CSS property height and overflow

Onselect function: To implement a function yourself, the argument has two values, the first value is the name of the text box, and the second is the relevant data for the menu item in the current point (ItemData property)

<script> (function ($) {jQuery.fn.DropDownList = function (options) {//Set plug-in default properties var defaults ={inputname: "Q" , ButtonText: "Example", Readonly:true, Maxheight:-1, Onselect:$.noop (),} var options = $.extend (defaults,optio  
NS);   
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 + "&L   
T;span class= ' caret ' ></span></button> '; 
   s = s + "<ul class= ' dropdown-menu dropdown-menu-right ' role= ' menu ' >"; Drop-down entries can be set by the Sections parameter or the items parameter, and the Sections priority is higher than the items high if (o.sections!== undefined) {$.each (o.sections,function UE) {//Starting from section 2nd, add a split line at the top of each section if (n>0) {s=s + <li class= ' divider ' &Gt;</li> "; ///If the ItemHeader parameter is set, add the title text if (value) to the section. itemheader!==undefined) {s = s + "<li class= ' Dropdown-header ' >" + 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 undefined, pass the Itemtext parameter to Itemdate     
if (item.itemdata===undefined) {item.itemdata=item.itemtext;}     
S=s + "<li><a href= ' # ' itemdata= '" + item.itemdata + "' >" + item.itemtext + "</a></li>";     
If the selected parameter is set, the Itemdada and itemtext of the entry are obtained. If more than one entry sets the parameter, the last entry to the condition (item.selected==true) {Seltext=item.itemtext) is obtained.   
Seldata=item.itemdata;}   
});   
} S =s + "</ul></div></div>";    
Obj.html (S);   
var input=obj.find ("Input");    
If an entry sets the selected parameter, the function if (seltext!= "") {SetData (Seltext,seldata) to set the activity entry is invoked; To bind all entries to the event, click to invoke the function that sets the activity entry ObJ.find ("a"). Bind ("click", Function (e) {SetData ($ (this). html (), $ (this). attr ("ItemData")); If the ReadOnly parameter is set to True, the related events of the text box are masked so that the text box cannot be edited.   
(and then shown as active) if (o.readonly==true) {input.bind ("Cut Copy paste KeyDown", function (e) {E.preventdefault ();});    
//Set the MaxHeight parameter (greater than 0), then set the maximum height of the Drop-down menu, if too many entries, there will be 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>

Here are some examples of usages: using the component for a DIV element with ID DropDownList, add a DropDownList component inside the DIV

1, with the Items property implementation Drop-down menu (all menu items are in a group, no group title, 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"}  
] 
});

Effect Chart:

2, with the Sections property implementation drop-down menu (menu groups have a split line, menu groups can set group headings)

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"
}    
]   
}  
] 
});

Effect Chart:

3, the implementation of the national province of the Drop-down selection of municipalities, to set the MaxHeight property

function ShowData (inputname,data) {alert (InputName + ":" + Data); } $ ("#DropDownList"). DropDownList ({inputname: "Q", ButtonText: "Reference", maxheight:310, Onselect:function (i,data) {ShowData (I,da   
TA); }, sections:[{itemheader: "municipality", items:[{itemtext: "Beijing", ItemData: "Beijing"}, {itemtext: "Shanghai", Itemda   
TA: "Shanghai", Selected:true}, {itemtext: "Tianjin", ItemData: "Tianjin"}, {itemtext: "Chongqing", ItemData: "Chongqing"}] {itemheader: "East China", Items: [{itemtext: "Shandong", ItemData: "Shandong"}, {itemtext: "Jiangsu", ItemData: "Jiangs U "}, {itemtext:" Anhui ", ItemData:" Anhui "}, {itemtext:" Zhejiang ", ItemData:" Zhejiang "}, {itemtext:" Fujian ", ItemData:" Fujian "}]}, {itemheader:" South China ", items:[{itemtext:" Guangdong ", ItemData:" Guangdong "}, {itemtext:" Guangxi ", Itemdat A: "Guangxi"}, {itemtext: "Hainan", ItemData: "Hainan"}]}, {itemheader: "Central", items:[{itemtext: "lake North ", ItemData:" Hubei "}, {itemtext:" Hunan ", itemdATA: "Hunan"}, {itemtext: "Henan", ItemData: "Henan"}, {itemtext: "Jiangxi", ItemData: "Jiangxi"}]}, {Itemheade R: "North China", items:[{itemtext: "Hebei", ItemData: "Hebei"}, {itemtext: "Shanxi", ItemData: "Shanxi"}, {itemtext: "Inner Mongolia", ItemData: "Neimenggu"}]}, {itemheader: "Northwest", items:[{itemtext: "Ningxia", ItemData: "Ningxia"}, {I     
Temtext: "Xinjiang", ItemData: "Xinjiang"}, {itemtext: "Qinghai", ItemData: "Qinghai"}, {itemtext: "Shaanxi", ItemData: "Shaanxi"}, {itemtext: "Gansu", ItemData: "Gansu"},]}, {itemheader: "Southwest", items:[{itemtext: "Sichuan", ItemData: "Sichua     
N "}, {itemtext:" Yunnan ", ItemData:" Yunnan "}, {itemtext:" Guizhou ", ItemData:" Guizhou "}, {itemtext:" Tibet ", ItemData:" Xizang "} ]}, {itemheader: "Northeast", items:[{itemtext: "Liaoning", ItemData: "Liaoning"}, {itemtext: "Jilin", ItemData : "Jilin"}, {itemtext: "Heilongjiang", ItemData: "Heilongjiang"}]});

Effect Chart:

The only regret is that when there is a scroll bar, the scroll bar will cover the two rounded corners on the right side of the Drop-down menu, if you really want to be perfect, you may have to modify the source code in the bootstrap.

The above content is a small series to introduce the creation of the bootstrap Drop-down menu of the DropDownList jquery Plug-ins all the content, I hope to help!