Implement the winform control on the webpage: ComboBox

Source: Internet
Author: User

In fact, there are many ready-made comboboxes implemented using JavaScript, including Ms, but I still like to do it myself. First look at the figure:

The word "combo" means "Combination", so ComboBox should be more than just an input + drop-down. Therefore, when designing a plug-in, I considered using the plug-in mode. Each plug-in is called a provider. Its function is to implement the functions in the drop-down window. Therefore, in the future, more extensions can be provided for this ComboBox, such as the drop-down of the tree structure and date selection. ComboBox comes with a default provider, which implements the basic functions of ComboBox in winform.

Anyone who has used the ComboBox control in winform knows that it uses three drop-down styles (dropdownstyle attribute settings in. Net:

Simple-only supports text editing, which works the same as textbox.
Dropdownlist-only drop-down options are provided. text content cannot be edited.
Dropdown-you can select from the drop-down list or edit the text content.

In addition to implementing these styles, my ComboBox controls are also extended and used more closely to the web. You can refer to the figure above. Because the time is tight, I will not write the specific description. If you are interested, you can try it online or download it directly.

The latest versions of IE7, 8, ff, and chrome are all tested and can be used in IE6, but the keyboard event seems to be a problem. Support is not considered for other browsers.

Because it has not been applied in practice, there may be a lot of things that have not been implemented or unreasonable. You are welcome to give feedback.

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.