前言:
学程序都是常学常忘,所以把思路和心得都记录下来,那怕是很简单的东西,所以就有了这篇文章
需求:
因项目需要一个可填可写的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的解释:![None.gif](/Images/OutliningIndicators/None.gif)
2
![None.gif](/Images/OutliningIndicators/None.gif)
3
![None.gif](/Images/OutliningIndicators/None.gif)
4
![None.gif](/Images/OutliningIndicators/None.gif)
5
![None.gif](/Images/OutliningIndicators/None.gif)
6
![None.gif](/Images/OutliningIndicators/None.gif)
7
![None.gif](/Images/OutliningIndicators/None.gif)
8
![None.gif](/Images/OutliningIndicators/None.gif)
9
![None.gif](/Images/OutliningIndicators/None.gif)
10
![None.gif](/Images/OutliningIndicators/None.gif)
rect ( number number number number ) | : |
当我看到这段文字的时候,我还是不能感性地认识这段文字的含义,如果你有和我一样的感觉,不妨按下面的方式测试一下:
做两个select控件,一个有rect css标记,一个没有,对有rect(number number number number )标记的,对其中的一个number设置某个值,其余为auto,然后比对一下就很直观了
也很容易知道,要做这个控件,只需对rect(number number number number )最后一个number设置一个值,其余都为auto,那么这个number的设置有什么规则呢 ?先看下图:
![DropDownList.BMP](https://i-blog.csdnimg.cn/blog_migrate/4413c6bef569fc1e9f9a002349660d9d.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