ComponentArt控件分析之ComboBox（1）

ComponentArt控件分析之ComboBox（1）2011-12-30 博客园 ClingingboyComponentArt相信很多人都用过.功能比较强大,而且使用方便.最近可能要用到这套控件.所以顺便要学习一下这套控件是如何实现的.

我并不会贴一下代码就了事,也不可能一篇就把一个控件就讲完.这样的话,一个商业控件也太简单了.

还是让我们来一起来慢慢的分析.我会尽量凭自己能力把细节都写出来

我们先从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>