ASP.NET Ajax工具包TabStrip控件

分享于 

5分钟阅读

Web开发

  繁體

Screenshot - TabStrip.jpg

介绍

is ASP.NET Ajax工具箱提供了优秀的选项卡控件,在每一个视图一次显示一个视图时组织多个。 使用这里控件来管理在不同页之间拆分的任务更加困难。 本文中提供的TabStrip控件可以用于在多个页面之间进行导航。

背景

TabStrip控件是从 ASP.NET Ajax工具包选项卡控件中修改的。 它包含表示标题文本的选项卡对象集。 TabStrip控件不包括用于定义页内容的模板。 选项卡元素是从XML文件填充的,或者是在页标记中定义的。 一个页面URL可以与每个选项卡关联,一个属性指示它是否被禁用。 无法选择禁用的选项卡。 选项卡可以包含一层嵌套超链接,这些链接也在XML文件中定义。

控件在服务器上触发 ActiveItemChanged 事件,并在客户端上触发 ClientActiveItemChanged 事件。 服务器端事件包含有关被单击的选项卡的信息,例如ID和 URL。 客户端事件还保存当前选中标签的ID,并允许取消标签更改。

使用代码

必须使用以下指令显式注册该控件:

<%@RegisterAssembly="TabStrip"Namespace="AjaxControlToolkit"TagPrefix="act"%>

控件的用法可以通过标记代码来说明:

<act:TabStriprunat="server"ID="TabStrip1"DataFile="~/TabMap.xml"OnActiveItemChanged="OnActiveItemChanged1"OnClientActiveItemChanged="ClientActiveItemChanged"/>

可以初始化选项卡,如下面的代码所示:

protectedvoid Page_Load(object sender, EventArgs e)
{
 if (!Page.IsPostBack)
 {
 TabStrip1.DataBind();
 }
}

数据XML文件具有以下格式:

<ArrayOfTabMap><TabMapText="Tab #1"><ArrayOfTabMap><TabMapUrl="Default.aspx"Text="Sub #1"/><TabMapUrl="SubPage2.aspx"Text="Sub #2"/><TabMapUrl="SubPage3.aspx"Text="Sub #3"Disabled="true"/></ArrayOfTabMap></TabMap><TabMapUrl="Page2.aspx"Text="Tab #2"Disabled="true"/><TabMapUrl="Page3.aspx"Text="Tab #3"/><TabMapText="Tab #4"DefaultActiveSubItemIndex="1"><ArrayOfTabMap><TabMapUrl="SubPage4.aspx"Text="Sub #4"/><TabMapUrl="SubPage5.aspx"Text="Sub #5"/></ArrayOfTabMap></TabMap></ArrayOfTabMap>

在本示例中,TabMap元素的第一层定义了顶级导航选项卡。 可选的嵌套TabMap条目定义当前选项卡内的导航链接元素。 如果TabMap条目具有子元素,则它不应该有关联的页 URL。 如果TabMap元素设置了 Disabled 属性,随后的选项卡或者链接控件将不会被单击,并且将以淡入的颜色呈现。 TabMap元素可以具有 DefaultActiveSubItemIndex 定义的属性。 在这种情况下,选择选项卡时选择具有相应索引的嵌套超链接。

当选定的选项卡更改时,可以激发服务器端 OnActiveTabChanged 事件。 它包含当前选中的标签和目标页面URL的ID。 此事件具有以下签名:

protectedvoid OnActiveItemChanged1(object sender, 
 ActiveItemChangedEventArgs e)
{
 Response.Redirect(e.Url);
}

但是,对于导航,不需要对此事件进行处理。 控件不允许任何代码数据绑定。 事件 OnClientActiveItemChanged 是在客户端上的选项卡更改时生成的。 事件带有选项卡ID并允许取消对服务器的事件传播:

<script type="text/javascript">function ClientActiveItemChanged(sender, e) 
{
 var result = 
 confirm("You are about to switch to the tab with ID" + 
 e.get_id() + ".nAre you sure?");
 if (!result)
 e.set_cancel(true);
}
</script>

若要更改控件默认外观,可以通过页面引用自定义CSS文件,而页加载时可以与控件关联:

protectedvoid Page_Load(object sender, EventArgs e)
{
 if (!Page.IsPostBack)
 {
 TabStrip1.CssClass = "my_tab";
 TabStrip1.DataBind();
 }
}

历史记录

  • 06/01/2007: 第一个版本

tool  控制  asp  asp-net  tab  工具箱  
相关文章