ASP.NET控件開發技巧之ComboBox顯示淺析
作者：Clingingboy
ASP.NET控件開發技巧之ComboBox顯示淺析主要想大家講述ComponentArt控件分析之ComboBox顯示效果的情況。
ASP.NET控件開發技巧之ComboBox顯示是如何的呢？首先讓我們來看看效果圖：
先看下效果
ASP.NET控件開發技巧之ComboBox顯示圖一
ComboBox特性:
與DropDownList相比,可以自己輸入文本,但HTML未提供這樣的標簽,所以只能利用現有的標簽來模擬.
上面為截圖,讓我們來看下生成的HTML代碼,此部分為局部代碼.包含了兩個集合
- ﹤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)一個table 里面存在著一個文本框和一個圖片,看下圖
ASP.NET控件開發技巧之ComboBox顯示圖二
(2)當選中右邊的圖片時,會出現一個下拉框,即把隱藏的div呈現出來,可以看到其初始化為隱藏,style="display:none;".看下圖
ASP.NET控件開發技巧之ComboBox顯示圖三
兩個組合在一起就形成了一個ComboBox控件。
ASP.NET控件開發技巧之ComboBox顯示就向大家介紹到這里，關于ComboBox顯示等相關的內容在以后的文章中還會提及。
【編輯推薦】
責任編輯：仲衡
來源：
博客園
