在项目开发中经常会用到选项卡控件,网上也有很多,其实只是简单的功能,很多却实现的很复杂,功能很强大,并不是我需要的。
下面来实现一个简单的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 来实现自定义解析逻辑。
分享到:
相关推荐
Winform开源控件:TabControl 选项卡控件 本人在codeproject上面整理出来的选项卡控件,个人感觉这几个都还不错. Tabbed MDI Child Forms http://www.codeproject.com/Articles/17640/Tabbed-MDI-Child-Forms Tab...
asp.net实现TabControls选项卡功能,后台动态生成
内容索引:.NET源码,控件组件,选项卡,控件 一个用C#编写的用于网页的TAB选项卡控件源代码,并附有一个使用示例,包括在静态环境下的一个HTML示例,TAB选项卡如图示,效果很不错,部分功能使用了JQUERY配合,这使得...
在TabControl窗体选项卡控件的基础上进行二次开发扩展,使其可以对TabPage颜色(前景色、背景色等)进行设置,并增加了关闭按钮,功能更完善了一些,使用其它更方便了用户,压缩包内包括了扩展的TabControl控件的完整...
控件使用VB.NET开发(暂无C#的代码,可以自行转换),仿Edge浏览器标签页风格,不过稍做调整,可以作为浏览器容器使用。 控件具有ReadOnly属性,开启后可以防止用户键盘鼠标操作控件及网页。标签条只有在鼠标移动到...
C# TabControl选项卡 TabStrip控件 源码 已用VS.NET2010编译测试正常
1.可以自己替换TabControl上的图片,图片可以闪动 2.其他的和.net下的tabcontrol区别不大
C# TabControl选项卡 TabStrip控件 源码 已用VS.NET2010编译测试正常
一组常用的asp.net控件.包括菜单,分页,专栏框架,tabcontrol...
有多种样式和关闭按钮的TabControl的例程,通过自定义用户控件的方式实现,可以编译为Dll控件进行调用
在Win Form窗体应用中,使用用户控件来手动加载TabControl控件的选项页面的操作方法对应的C#源码的简单例程。
C# Winform TabControl选项卡 动态添加,删除,修改
自定义控件之TabControl
VC.NET使用 tabControl 使用tabcontrol
自定义Tabpage控件,tabcontrol控件,很漂亮哦,C#源代码
到我的博客去哦,有更多的源码下载的………… http://blog.csdn.net/mohongmao/
话不多说,C#窗体TabControl控件美化版源代码TabControlEx,就是美化标签页,大家可以下载下来看看。新手可以学习学习,老鸟飘过吧
TabControl实现Windows选项卡效果.rar
C#tabcontrol中标签居左显示重绘代码
功能上,除继承TabControl基本功能之外还有: 1、选项卡标签区域更换背景色或使用背景图片 2、选项卡标签在激活与非激活状态下...5、当选项卡数量超出控件本身宽度时,将进行自动缩放 6、后续还在完善其他功能中……