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);
        else
            return null;
    }
}

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

 

下载