Custom jquery picklist Plugin-usage and example (2)

Previous Article (http://blog.csdn.net/gengv/archive/2010/04/22/5514813.aspx

() Demonstrates the simplest example. You can use only three or four lines of code to implement a picklist control. This time, we will use personalized settings to create picklist controls that meet various needs.

 

 

Free Selector

As mentioned in the previous article, picklist () has multiple option options, including multiple selector-defined options. With these options, you can customize various selector lookup expressions. These options include:

Option name	Default Value	Description
Availablelist_selector	# Availablelist	The selector expression of availablelist. The default value is "# availablelist ". You can customize various selectors supported by jquery, such as "Ul" and ". alistclass ".
Pickedlist_selector	# Pickedlist	Pickedlist selector expression. The default value is "# pickedlist ". You can customize various selectors supported by jquery, such as "Div" and ". plstclass ".
Item_selector	Li	Selector expressions of entries in availablelist and pickedlist. The default value is "Li". You can also Customize various selectors supported by jquery, such as "Div" and ". picklistitem ".
Addbutton_selector	# Btnadd	The selector expression that moves the selected entry from availablelist to the pickedlist button.
Removebutton_selector	# Btnremove	The selector expression that moves the selected entry from pickedlist to availablelist.
Root_selector (rarely used)	Body	The picklist () function always finds the elements defined by other selector expressions, such as availablelist_selector and item_selector, In the descendant element of the root_selector selector to construct the picklist control. The default value is "body", that is, to find the elements defined by other selector expressions, such as availablelist_selector and item_selector, from the entire page.

You can use the preceding parameters to select components in the picklist control. For example:

Pl2 = $ ("# sample_2 "). picklist ({<br/> availablelist_selector: "# leftlist", <br/> pickedlist_selector: "# rightlist", <br/> item_selector: "Li. simpleitem ", <br/> addbutton_selector:" # addbutton ", <br/> removebutton_selector:" # delbutton "<br/> });

 

Free CSS style

You can not only define the selector, but also customize the CSS style name. You can still use the picklist () option:

Option name	Default Value	Description
Selecteditemclassname	Selecteditem	The CSS style used when the entries in availablelist and pickedlist are highlighted. The default value is "selecteditem"
Hoveritemclassname	Hoveritem	The CSS style used when the mouse slides over entries in availablelist and pickedlist. The default value is "hoveritem"

To replace these two CSS style classes, you only need to add these two custom options when calling picklist:

Pl2 = $ ("# sample_2"). picklist ({<br/> selecteditemclassname: "selecteditem2", <br/> hoveritemclassname: "hoveritem2" <br/> });

 

Free callback

You can also define various callback methods in the picklist () option:

Option name	Default Value	Description
Beforeadd	Null	This method is called back when an entry is moved from availablelist to pickedlist. If false is returned, the entry will not be moved.
Afteradd	Null	After the entries are successfully moved from availablelist to pickedlist, this method is called back.
Beforeremove	Null	This method is called back when the entry is moved from pickedlist to availablelist. If false is returned, the entry will not be moved.
Afterremove	Null	After the entries are successfully moved from pickedlist to availablelist, this method is called back.
Hoveroveravailableitem	Null	This method is called back when you move the cursor over each entry in availablelist.
Hoveroutavailableitem	Null	This method is called back when you hover the cursor over each entry in availablelist.
Hoveroverpickeditem	Null	This method is called back when you move the cursor over each entry in the pickedlist.
Hoveroutpickeditem	Null	This method is called back when you hover the mouse over each entry in the pickedlist.

Another method can be overwritten:

Option name

Description

Containsitem

By default, this method searches ". idcol "element, and then compare this element with each entry in the target list ". the text () Return Value of the child element of idcol. If they are equal, duplicate entries are considered. The entry to be moved will not be moved, the "repeated" entries in the target list will be added with the CSS style defined by "selecteditemclassname. This method can be overwritten in the picklist () parameter. If false is returned, it means that there are no duplicate entries in the target list and the entries will be moved directly.

$ (Function () {<br/> pl2 = $ ("# sample_2 "). picklist ({<br/> availablelist_selector: "# leftlist", <br/> pickedlist_selector: "# rightlist", <br/> item_selector: "Li. simpleitem ", <br/> addbutton_selector:" # addbutton ", <br/> removebutton_selector:" # delbutton ", <br/> selecteditemclassname:" selecteditem2 ", <br/> hoveritemclassname: "hoveritem2", <br/> containsitem: function () {<br/> return false; <br/> }, <Br/> beforeadd: BA, <br/> hoveroverpickeditem: hoverover <br/>}); <br/> }); </P> <p> var BA = function () {<br/> var selectedavailableitems = pl2.getselectedavailableitems (); <br/> If (selectedavailableitems. size () <= 0) {<br/> alert ("please first select item! "); <Br/> return false; <br/>}else {<br/> var MSG =" "; <br/> selectedavailableitems. each (function (I) {<br/> MSG + = (I + 1) + "/t" + $ (this ). find (". namecol "). text () + "/N"); <br/>}); </P> <p> alert ("selected:/n" + MSG ); <br/> return true; <br/>}< br/>}; </P> <p> var hoverover = function () {<br/> var hoveritem = pl2.getpickeditems (). filter (". "+ pl2.settings. hoveritemclassname); <br/> var countryname = "" + hoveritem. find (". namecol "). text (); <br/> If (countryname. length> 0) {<br/> var firstletter = countryname. substring (0, 1); <br/> If (firstletter = "C") {<br/> alert ("the country name starts with 'C '"); <br/>}< br/> };

 

Integrated instance

Complete code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
Other API methods of picklist will be introduced in the next article.