Create a custom picklist plug-in using jquery

Source: Internet
Author: User

Now you can find a variety of jquery plug-ins everywhere on the Internet. Many projects have been used for the company, such as jqmodal. Although third-party plug-ins help me implement many functions, I still like to use the plug-ins in jqueryui. I always feel that these plug-ins should be mature, become a system, and have better compatibility with each other.
Therefore, in the current project, use the native components of jqueryui as much as possible. At the same time, because the struts2 framework has been used recently, jquery plug-in for struts2 is selected.

In the past, I had almost no idea about JavaScript, and Ajax had no system to learn, but it was just a crude principle. It is through jquery's concise syntax and the root of Java that JavaScript and Ajax become increasingly familiar. In the previous project, jquery was used with great ease.
We are working on a system for our friends. The picklist component is needed. I remember that when I was learning richfaces, The picklist in it was very useful, but richfaces was involved for this picklist. It was a little complicated. Haha ~

So I consulted Google and found that there are not many jquery plug-ins on the Internet for picklist (or the query keywords I use may be inaccurate ). Two of them look pretty good.
Jqjquery picklist plugin (http://gsgd.co.uk/sandbox/jquery/picklists
)
Dodo's picklist (http://pure-essence.net/stuff/webTips/dodosPicklist/index.html
)

These two plug-ins are based on two multi-choice <SELECT> controls, I personally feel that the Dodo's picklist design is better. These two plug-ins are enough to handle simple applications. However, if the options are complex HTML content, it seems that the options are insufficient. Because the <SELECT> control can only hold the <option> class label, the <option> label cannot contain content such as <div> or <span>, therefore, it seems impossible to create a picklist with complex content items based on the above two plug-ins.
In this case, it is better to do it by yourself and write a plug-in for fun? Previously, jquery looked at the translation documents of online experts and learned how to learn and use them. Now that you have touched the stone before, you can try it this time.

Re-open the translation document, carefully read the chapter on designing custom plug-ins, and then look for the rules from the third-party plug-ins downloaded earlier. In this way, I wrote my first jquery plug-in. There must be a lot of improvements to the code, but it basically implements what I expected.

Now, I want to share it with you (including the demo ). At the same time, I would like to ask the experts for advice. For more information, go to the blog later.

Jquery. pickList-0.1.7


Http://code.google.com/p/jquery-picklist/downloads/list
)

 

Main features:
1. Multiple options are supported, such as <div> and ;
2. You can define fully-free jquery selectors and CSS styles for child components;
3. Supports CTRL and shift operations;
4. Multiple Event Callback Callbacks are supported;

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.