可填可选的DropDownList Server Control 摘抄
前言:
学程序都是常学常忘,所以把思路和心得都记录下来,那怕是很简单的东西,所以就有了这篇文章
需求:
因项目需要一个可填可写的DropDownList ;
原理:
任何ASP.NET Server Control呈现在Client的都是HTML代码,所以我从HTML角度分析,可填可写的DropDownList是由一个INPUT控件和SELECT控件经过剪切叠加组合而成;
分析:
先运行下面一段HTML代码,这段HTML演示了一个可填可写的HTML SELECT控件:
<html> <body> <input id="txtTest" type="text" style="width:200px;POSITION: absolute"> <select id="ddlTest" onchange="document.getElementById('txtTest').value=this.options[this.selectedIndex].text" style="width:217px;CLIP: rect(auto auto auto 200px); POSITION: absolute"> <option>tt</option> <option>dd</option> </select> </body> </html>
这段代码的关键是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的设置有什么规则呢 ?先看下图:
我测试发现有向下的箭头部分的长度大约17px,所以就有这样一个规律:
select控件的长度=input textbox控件的长度+17px
也就是说,如果我希望在页面上呈现一个217px的可填可写的select控件,就可以设置如下:
input textbox : 200px
select控件 : 217px
rect设置 :rect(auto auto auto 200px )