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

先看下效果

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

ComboBox特性:

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

上面為截圖,讓我們來看下生成的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控件開發(fā)技巧之ComboBox顯示圖二

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

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

兩個組合在一起就形成了一個ComboBox控件。

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

【編輯推薦】

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