可填可选的DropDownList Server Control

前言:
 学程序都是常学常忘,所以把思路和心得都记录下来,那怕是很简单的东西,所以就有了这篇文章

需求:

 因项目需要一个可填可写的DropDownList ;

原理:
 任何ASP.NET Server Control呈现在Client的都是HTML代码,所以我从HTML角度分析,可填可写的DropDownList是由一个INPUT控件和SELECT控件经过剪切叠加组合而成;

分析:
先运行下面一段HTML代码,这段HTML演示了一个可填可写的HTML SELECT控件:

 1<html>
 2 <body>
 3  <input id="txtTest" type="test" style="width:200px;POSITION: absolute">
 4  <select id="ddlTest" onchange="document.getElementById('txtTest').value=this.options[this.selectedIndex].text" style="width:217px;CLIP: rect(auto auto auto 200px); POSITION: absolute">
 5   <option>tt</option>
 6   <option>dd</option>  
 7 </select>

 8 </body>
 9</html>
10
这段代码的关键是CSS2的rect ( number number number number )元素,理解了这个元素整个控件就OK啦,CSS2 handbook的解释:
rect ( number number number number ) :
依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用 auto 替换,即此边不剪切;必须将 position 属性的值设为 absolute ,此属性方可使用。
当我看到这段文字的时候,我还是不能感性地认识这段文字的含义,如果你有和我一样的感觉,不妨按下面的方式测试一下:
做两个select控件,一个有rect css标记,一个没有,对有rect(number number number number )标记的,对其中的一个number设置某个值,其余为auto,然后比对一下就很直观了
也很容易知道,要做这个控件,只需对rect(number number number number )最后一个number设置一个值,其余都为auto,那么这个number的设置有什么规则呢 ?先看下图:
DropDownList.BMP
我测试发现有向下的箭头部分的长度大约17px,所以就有这样一个规律:
select控件的长度=input textbox控件的长度+17px
也就是说,如果我希望在页面上呈现一个217px的可填可写的select控件,就可以设置如下:
input textbox : 200px
select控件    : 217px
rect设置      :rect(auto auto auto 200px )

封装:
把上面的HTML封装成一个server control,这样使用方便,而且可以复用,我把控件代码和调用测试代码都打包,有兴趣的可以下载看看,当然了,封装的不是很好,但既然知其所以然了,知其然还不容易,本来这个东西也不复杂,
Source Code DownLoad

你可能感兴趣的:(server)