Analysis on ComboBox display of ASP. NET control development skills

Source: Internet
Author: User

How does ComboBox display show ASP. NET control development skills? First, let's take a look:

First look at the effect

 

ASP. NET control development skills-ComboBox display Figure 1

ComboBox features:

Compared with DropDownList, You can input text by yourself, but HTML does not provide such a tag, so you can only simulate it using existing tags.

As shown in the preceding figure, let's take a look at the generated HTML code. This part is divided into local code and contains two sets.

 
 
  1. ﹤table id="ComboBox2" class="comboBox" cellpadding="0" cellspacing="0" 
  2.  
  3.  onmouseout="ComboBox2.HandleInputMouseOut()"   
  4.  
  5. onmouseover="ComboBox2.HandleInputMouseOver()" style="display:inline-block;width:200px;"﹥  
  6. ﹤tr﹥  
  7. ﹤td width="100%" id="ComboBox2_TextBox"﹥  
  8.  
  9. ﹤input id="ComboBox2_Input" name="ComboBox2_Input" autocomplete="off"   
  10.  
  11. onsubmit="return false;" type="text"   
  12.  
  13. class="comboTextBox" onfocus="ComboBox2.HandleFocus()"   
  14.  
  15. onblur="ComboBox2.HandleBlur(event)"   
  16.  
  17. onkeydown="ComboBox2.HandleKeyPress(event,this)" style="display:none;" /﹥﹤/td﹥  
  18.  
  19. ﹤td﹥  
  20.  
  21. ﹤img onmouseup="ComboBox2.HandleDropMouseUp(event,this)"   
  22.  
  23. onmousedown="ComboBox2.HandleDropClick(event,this)" src="images/drop.gif"   
  24.  
  25. id="ComboBox2_DropImage" style="display:block;" /﹥﹤/td﹥  
  26. ﹤/tr﹥  
  27. ﹤/table﹥  
  28. ﹤div class="comboDropDown" id="ComboBox2_DropDown" style="display:none;"﹥  
  29. ﹤table cellpadding="0" cellspacing="0" border="0" width="100%"﹥  
  30. ﹤tr﹥  
  31. ﹤td﹥﹤div id="ComboBox2_DropDownContent" onscroll="ComboBox2.HandleScroll(event,this)"   
  32.  
  33.         onmousedown="ComponentArt_CancelEvent(event)"   
  34.  
  35. onmouseup="ComboBox2.HandleMouseUp(event,this)"﹥  
  36.  
  37. ﹤/div﹥﹤/td﹥  
  38. ﹤/tr﹥  
  39. ﹤/table﹥  
  40. ﹤/div﹥ 

(1) A table contains a text box and an image.

 

ASP. NET control development skills-ComboBox display Figure 2

(2) When you select an image on the right, a drop-down box is displayed, indicating that the hidden div is displayed. You can see that it is initialized to hidden, style = "display: none ;".

 

ASP. NET control development skills-ComboBox display Figure 3

The combination of the two forms a ComboBox control.

The ComboBox display of ASP. NET control development skills will be introduced here, and relevant content about ComboBox display will be mentioned in future articles.

  1. Implementation of ASP. NET Component Design Code
  2. Development of ASP. NET controls-analysis of methods for modifying server controls
  3. Development of ASP. NET controls-how to trigger JavaScript scripts using UpdatePanel
  4. ASP. NET control development tips: disable unnecessary functions of the base class
  5. Analysis on the use of HtmlTextWriter class in ASP. NET control development skills

Related Article

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.