ASP.NET控件開(kāi)發(fā)技巧之ComboBox顯示是如何的呢？首先讓我們來(lái)看看效果圖：

先看下效果

ASP.NET控件開(kāi)發(fā)技巧之ComboBox顯示圖一

ComboBox特性:

與DropDownList相比,可以自己輸入文本,但HTML未提供這樣的標(biāo)簽,所以只能利用現(xiàn)有的標(biāo)簽來(lái)模擬.

上面為截圖,讓我們來(lái)看下生成的HTML代碼,此部分為局部代碼.包含了兩個(gè)集合

﹤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)一個(gè)table  里面存在著一個(gè)文本框和一個(gè)圖片,看下圖

ASP.NET控件開(kāi)發(fā)技巧之ComboBox顯示圖二

(2)當(dāng)選中右邊的圖片時(shí),會(huì)出現(xiàn)一個(gè)下拉框,即把隱藏的div呈現(xiàn)出來(lái),可以看到其初始化為隱藏,style="display:none;".看下圖

ASP.NET控件開(kāi)發(fā)技巧之ComboBox顯示圖三

兩個(gè)組合在一起就形成了一個(gè)ComboBox控件。

ASP.NET控件開(kāi)發(fā)技巧之ComboBox顯示就向大家介紹到這里，關(guān)于ComboBox顯示等相關(guān)的內(nèi)容在以后的文章中還會(huì)提及。

【編輯推薦】

1. ASP.NET組件設(shè)計(jì)代碼實(shí)現(xiàn)淺析
2. ASP.NET控件開(kāi)發(fā)之修改服務(wù)器控件方法淺析
3. ASP.NET控件開(kāi)發(fā)之UpdatePanel觸發(fā)JavaScript腳本技巧
4. ASP.NET控件開(kāi)發(fā)技巧之關(guān)閉基類不必要的功能
5. ASP.NET控件開(kāi)發(fā)技巧之使用HtmlTextWriter類淺析