• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Asp.Net Web控件 (八)(TabControl 选项卡控件)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

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

下面来实现一个简单的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 来实现自定义解析逻辑。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap