也算是自己刚毕业时候的作品吧,当时在一家创业公司工作,考虑给公司建立一个公司的控件库,于是也学习过一段时间的控件设计,当时领我入门的是《道不远人》那本控件开发书,觉得谭振宁写的还是相当不错的,推荐一下:)。那么就开始分享我设计的一些控件,并且告诉一些基本的设计思路。
具体实现了这些控件:
CheckTextBox: 可以对于输入TextBox的字符做出判断
HighSlideHyperLink: 点击HyperLink可以弹出相关Div层或者Img图象
ContextMenu: 上下文菜单特效
Menu: 菜单特效
EnablePageDataList: 具有分页功能的DataList
EnablePageRepeater: 具有分页功能的Repeater
GroupDropDownList: 具有分组选项功能的DropDownList
GroupListBox: 具有分组选项功能的ListBox
SearchCloud:Tag云图,可以根据关键词的搜索数量,进行排列
1. CheckTextBox
效果图:
该控件继承自TextBox控件:
其中DefaultProperty将Text作为默认属性,代表着在属性窗口中自动被选中的是Text属性;ToolboxData代表你从工具箱拖动控件到设计页面时,会自动在代码中产生该字符串的代码。
控件的属性代码:
Description属性将在设计窗口属性中显示出描述:
通过AddAttributesToRender方法实现脚本的注册:
其中InputType包括几种方式以及一些事件发生的脚本:
调用服务器控件页面代码:
2. HighSlideHyperLink
效果图:
看到类的头部:
1 |
[assembly: WebResource( "Conovosoft.Web.UI.WebControls.highslide.css" , "text/css" )] |
2 |
[assembly: WebResource( "Conovosoft.Web.UI.WebControls.highslide.js" , "text/javascript" )] |
3 |
[assembly: WebResource( "Conovosoft.Web.UI.WebControls.highslide-html.js" , "text/javascript" )] |
这里控件需要引用一些JS以及CSS的资源文件,highslide作为第三方的JS脚本,为了实现图片放大的效果。
在OnPreRender方法中注册脚本文件:
调用代码:
ID="HighSlideHyperLink2" runat="server">
<img border="0" src="p_w_picpaths/thumb.jpg" />
</cc1:HighSlideHyperLink>
3. EnablePageRepeater
效果图:
实现了带分页的Repeater控件。同理,也可以实现带分页的DataList。
4. GroupDropDownList
效果图:
控件代码:
注意到RenderContents方法调用了OptionAndGroupRenderContents,通过该方法的逻辑实现Option以及OptionGroup的呈现。
调用代码:
<cc1:GroupDropDownList ID="GroupDropDownList1" runat="server">
</cc1:GroupDropDownList>
后台绑定数据代码:
同样GroupListBox实现代码和GroupDropDownList.cs类似。
5. SearchCloud标签云
效果图:
控件代码:
调用代码:
<cc1:SearchCloud ID="SearchCloud1" runat="server" />
后台绑定数据代码:
这样就实现了类似博客系统中的标签云。
最后附上我的源代码:WebControl.UI.rar,希望能够给大家带来些ASP.NET服务器控件开发上的帮助!