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 來實現自訂解析邏輯。

 

下載