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.
- ﹤table id="ComboBox2" class="comboBox" cellpadding="0" cellspacing="0"
-
- onmouseout="ComboBox2.HandleInputMouseOut()"
-
- onmouseover="ComboBox2.HandleInputMouseOver()" style="display:inline-block;width:200px;"﹥
- ﹤tr﹥
- ﹤td width="100%" id="ComboBox2_TextBox"﹥
-
- ﹤input id="ComboBox2_Input" name="ComboBox2_Input" autocomplete="off"
-
- onsubmit="return false;" type="text"
-
- class="comboTextBox" onfocus="ComboBox2.HandleFocus()"
-
- onblur="ComboBox2.HandleBlur(event)"
-
- onkeydown="ComboBox2.HandleKeyPress(event,this)" style="display:none;" /﹥﹤/td﹥
-
- ﹤td﹥
-
- ﹤img onmouseup="ComboBox2.HandleDropMouseUp(event,this)"
-
- onmousedown="ComboBox2.HandleDropClick(event,this)" src="images/drop.gif"
-
- id="ComboBox2_DropImage" style="display:block;" /﹥﹤/td﹥
- ﹤/tr﹥
- ﹤/table﹥
- ﹤div class="comboDropDown" id="ComboBox2_DropDown" style="display:none;"﹥
- ﹤table cellpadding="0" cellspacing="0" border="0" width="100%"﹥
- ﹤tr﹥
- ﹤td﹥﹤div id="ComboBox2_DropDownContent" onscroll="ComboBox2.HandleScroll(event,this)"
-
- onmousedown="ComponentArt_CancelEvent(event)"
-
- onmouseup="ComboBox2.HandleMouseUp(event,this)"﹥
-
- ﹤/div﹥﹤/td﹥
- ﹤/tr﹥
- ﹤/table﹥
- ﹤/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.
- Implementation of ASP. NET Component Design Code
- Development of ASP. NET controls-analysis of methods for modifying server controls
- Development of ASP. NET controls-how to trigger JavaScript scripts using UpdatePanel
- ASP. NET control development tips: disable unnecessary functions of the base class
- Analysis on the use of HtmlTextWriter class in ASP. NET control development skills