在上一篇文章《AjaxControlToolkit环境下用Javascript实现简单的Dropdownlist 》里写了关于用javascript写的一个dropdownlist的例子,由于不易于复用和在C#里进行管理,所以后来用UserControl重新封装了一个DropDownList控件,基本模拟Asp.Net原有的DropDownList控件,使得其他用户直接托拽到相应地方即可正常工作。
首先还是先看一下截图:
实现过程如下:
1、Aspx代码部分:
用div及textbox等模拟相应的文字框和下拉框,并在Sys.Application.init时创建对应的SELDropDownListBehavior。
2、C#代码部分:
声明了一些属性,并在呈现时做些处理:
3、用Javascript实现的SELDropDownListBehavior部分:
javascript主要用来控制各个控件的展现和状态:
4、调用SELDropDownList
调用SELDropDownList首先要求在AjaxControlToolKit环境下,其次要引用对应的js文件来包含SELDropDownListBehavior:
当然,这个控件还有很多需要完善和扩展的地方,例如滚动条的样式,背景色等等。通过修改对应的Class可以改变大部分样式,但一般没有必要修改CSS。对应的代码可以在这里下载。