Asp.Net Web控件（八）（TabControl 选项卡控件）

在项目开发中经常会用到选项卡控件，网上也有很多，其实只是简单的功能，很多却实现的很复杂，功能很强大，并不是我需要的。

下面来实现一个简单的TabControl 。

先看演示：

位置：TabContorl演示   <hxj:TabControl ID="TabControl1" runat="server" TabSelectedIndex="0">       <hxj:TabItem Text="Section 1" runat="server">           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh           euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.        </hxj:TabItem>       <hxj:TabItem Text="Section 2" runat="server">           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh           euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor           sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt           ut laoreet dolore magna aliquam erat volutpat.       </hxj:TabItem>       <hxj:TabItem Text="Section 3" runat="server">           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh           euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor           sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt           ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer           adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna       </hxj:TabItem>       <hxj:TabItem Text="Section 4" runat="server">           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh           euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor           sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt           ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer           adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna           aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,           sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.       </hxj:TabItem>       <hxj:TabItem Text="Section 5" runat="server">           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh           euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor           sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt           ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer           adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna           aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,           sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh           euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.       </hxj:TabItem>   </hxj:TabControl>

运行出来的效果：

下面开始贴代码：

[ControlBuilder(typeof(TabItemBuilder))][DefaultProperty("TabSelectedIndex")]
[ToolboxData("<{0}:TabControl runat=server></{0}:TabControl>")]
[ParseChildren(typeof(TabItem))]
[Description("选项卡Web控件")]
[Designer(typeof(Hxj.Web.UI.Design.HxjControlDesigner))]
public class TabControl : WebControl

其中[ParseChildren(typeof(TabItem))] 表示控件嵌套的子节点必须是TabItem控件，就是上面的示例代码。

控件比较简单值定义了两个自定义属性：

[Description("默认显示的选项卡项")]
public int TabSelectedIndex

[Description("自定义选项卡CSS样式")]
public string HeaderCssClass

下面是控件输出HTML：

    int totalTab = TabItems.Count;if (!string.IsNullOrEmpty(HeaderCssClass)){writer.AddAttribute(HtmlTextWriterAttribute.Class, HeaderCssClass);}else{writer.AddAttribute(HtmlTextWriterAttribute.Class, "tabheader");}writer.AddAttribute(HtmlTextWriterAttribute.Id, this.ClientID + "header");writer.RenderBeginTag(HtmlTextWriterTag.Div);writer.RenderBeginTag(HtmlTextWriterTag.Ul);for (int i = 0; i < totalTab; i++){if (i == TabSelectedIndex){writer.AddAttribute(HtmlTextWriterAttribute.Class, "current");}if (!TabItems[i].Visible){writer.AddStyleAttribute(HtmlTextWriterStyle.Display, "none");}writer.RenderBeginTag(HtmlTextWriterTag.Li);writer.AddAttribute(HtmlTextWriterAttribute.Href, "javascript:void(0)");writer.AddAttribute(HtmlTextWriterAttribute.Onclick, string.Concat("htabs('", this.ClientID, "',", i.ToString(), ")"));writer.AddAttribute(HtmlTextWriterAttribute.Title, TabItems[i].ToolTip);writer.RenderBeginTag(HtmlTextWriterTag.A);writer.Write(TabItems[i].Text);writer.RenderEndTag();writer.RenderEndTag();}writer.RenderEndTag();writer.RenderEndTag();for (int i = 0; i < totalTab; i++){if (i != TabSelectedIndex){writer.AddStyleAttribute(HtmlTextWriterStyle.Display, "none");}writer.AddAttribute(HtmlTextWriterAttribute.Id, string.Concat(this.ClientID, "Content", i.ToString()));writer.RenderBeginTag(HtmlTextWriterTag.Div);TabItems[i].RenderControl(writer);writer.RenderEndTag();}

输出的代码也是很简单。

其实也可以这么写：

<hxj:TabControl ID="TabControl1" runat="server" TabSelectedIndex="0"><tab Text="123">tab123</tab>
</hxj:TabControl>

 主要是由于TabControl的特性

[ControlBuilder(typeof(TabItemBuilder))]

其中TabItemBuilder是自定义的ControlBuilder。

代码如下：

public class TabItemBuilder : ControlBuilder
{public override Type GetChildControlType(string tagName, IDictionary attribs){if (String.Compare(tagName, "tab", true) == 0)return typeof(TabItem);elsereturn null;}
}

即通过ControlBuilder 来实现自定义解析逻辑。

Asp.Net Web控件（八）（TabControl 选项卡控件）相关推荐

TabControl 选项卡控件
TabControl 控件是由System.Windows.Forms.TabControl类提供的,作用就是讲相关的组件组合到一系列选项卡页面上. MulitiLine 属性用来设置是否显示多行 ...
ASP.NET Web程序设计第三章高级控件
一.母版页与内容页(重点) 1.母版页(主控页)是以".master"为后缀名的特殊页面,用于实现页面统一布局. 2.母版页与普通页面的区别: 1)母版页不能直接访问,而普通页可以 ...
ASP.NET Web程序设计——FileUpload文件上传控件
FileUpload文件上传控件主要功能:向指定的目录上传文件控件包括:一个文本框一个浏览按钮属性说明 HasFile 控件是否含有将要上传的文件 FileName 上传文件的文件名 Sav ...
asp.net web 开发登录相关操作的控件LoginName、LoginStatus和LoginView控件使用详解
http://book.51cto.com/art/200909/154039.htm http://book.51cto.com/art/200909/154041.htm ASP.NET提供了一套 ...
【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
VS2008 Tips #008 如何创建ASP.NET Web 用户控件并包含在Web 页面中
在 Visual Web Developer 中创建 ASP.NET Web 用户控件就像 ASP.NET Page 页面一样简单. 以下是创建步骤: 1.打开您想添加用户控件的站点. 2.右键点击站 ...
自学Web开发第十四天-基于VB和ASP.NET；丰富数据呈现：TreeView控件的使用及与GridView控件联动，深入研究从GridView中取数据
自学Web开发第十四天-基于VB和ASP.NET:丰富数据呈现:TreeView控件的使用及与GridView控件联动,深入研究从GridView中取数据 GridView操作数据库后,刷新TreeV ...
【ASP.NET】第八课——GridView 控件的编辑功能优化，GridView控件中嵌套DropDownList控件
知识点:掌握 GridView 的编辑.高亮显示的功能 .GridView控件中嵌套DropDownList控件获取数据源. [ASP.NET]第七课--数据绑定和 GridView 控件的使用重点 ...
ASP.NET Web开发中Repeater控件的使用
在ASP.NET中数据绑定是其提供的访问数据库的方法,数据控件则是用来显示从数据库中获取的数据. 首先讲下待会要用到的属性和方法: DataBind():显示绑定的数据 DataSource:指定数据 ...

Asp.Net Web控件（八）（TabControl 选项卡控件）

Asp.Net Web控件（八）（TabControl 选项卡控件）相关推荐

最新文章

热门文章

Asp.Net Web控件 （八）（TabControl 选项卡控件）

Asp.Net Web控件 （八）（TabControl 选项卡控件）相关推荐

最新文章

热门文章

Asp.Net Web控件（八）（TabControl 选项卡控件）

Asp.Net Web控件（八）（TabControl 选项卡控件）相关推荐