使用MultiView控件的简单 ASP.NET 选项卡控件

分享于 

6分钟阅读

Web开发

  繁體

介绍

最近,我使用 ASP.NET 2.0编写了一个小型web废弃应用程序。 在那期间,我试图研究 ASP.NET 2.0中的一些新控件。 我发现其中一个特别有趣的2.0控件是 MultiView 控件。 新的MultiView 控件与嵌入式 View 控件一起工作。 每个 View 控件充当一个内容容器,它的行为非常类似于 Panel 或者 Canvas 区域。 运行时,MultiView 控件管理 View 控件,以确保一次仅可见一个 View。 可以使用 MultiView 控件的ActiveViewIndex 属性指定在任何特定时间可见的View。 听起来像 Tab 控件的右边? 我想做的是实现一个快速选项卡控件,而不必购买商业组件。 免责声明,商业组件更加鲁棒,但是如果你没有现金或者不需要"cadillac",那么下面的代码。

关于控件

当我接近编写我的简单选项卡控件时,我把这篇文章放在了我的背面, CSS和圆角: 构建可以访问的菜单选项卡: 关于如何使用CSS技巧和图像制作选项卡控件的好文章。

我想把这个CSS文章中的想法与 ASP.NET MenuMultiView 控件结合起来,创建一个相对漂亮的选项卡控件。 这就是我所提出的:

首先,我将 Menu 控件放到页面上。 Menu 控件将呈现我的"制表符",同时也是 MultiView 控件的控制器。 我把菜单设置为水平方向。 同样,我给每个 MenuItem 一个 ImageURL,指向我的标签图像。 注意,你必须实现自己的选项卡图像,如你所见。 below 是我的Menu 控制规范:

<asp:MenuID="Menu1"Width="168px"runat="server"Orientation="Horizontal"StaticEnableDefaultPopOutImage="False"OnMenuItemClick="Menu1_MenuItemClick"><Items><asp:MenuItemImageUrl="~/selectedtab.GIF"Text=""Value="0"></asp:MenuItem><asp:MenuItemImageUrl="~/unselectedtab.GIF"Text=""Value="1"></asp:MenuItem><asp:MenuItemImageUrl="~/unselectedtab.GIF"Text=""Value="2"></asp:MenuItem></Items></asp:Menu>

接下来,我将 MultiView 控件放到页面上。 注意,每个 View 控件都包含一个 table,其中包含 <td> 标记,它将保存活动选项卡的所有内容。 请考虑 <td> 元素作为选项卡内容的占位符。 我把这个 <td> 一个名为" TabArea"的CSS类中的元素。 此类在内容周围设置边框。 参考示例下载中的样式表。

<asp:MultiViewID="MultiView1"runat="server"ActiveViewIndex="0"><asp:ViewID="Tab1"runat="server"><tablewidth="600"height="400"cellpadding=0 cellspacing=0><trvalign="top"><tdclass="TabArea"style="width: 600px"><br/><br/> TAB VIEW 1
 INSERT YOUR CONENT IN HERE
 CHANGE SELECTED IMAGE URL AS NECESSARY
 </td></tr></table></asp:View><asp:ViewID="Tab2"runat="server"><tablewidth="600px"height="400px"cellpadding=0 cellspacing=0><trvalign="top"><tdclass="TabArea"style="width: 600px"><br/><br/> TAB VIEW 2
 INSERT YOUR CONENT IN HERE
 CHANGE SELECTED IMAGE URL AS NECESSARY
 </td></tr></table></asp:View><asp:ViewID="Tab3"runat="server"><tablewidth="600px"height="400px"cellpadding=0 cellspacing=0><trvalign="top"><tdclass="TabArea"style="width: 600px"><br/><br/> TAB VIEW 3
 INSERT YOUR CONENT IN HERE
 CHANGE SELECTED IMAGE URL AS NECESSARY
 </td></tr></table></asp:View></asp:MultiView>

最后,我将 Menu 控件的MenuItemClick 事件连接到下面的方法:

ProtectedSub Menu1_MenuItemClick(ByVal sender AsObject, _
 ByVal e As MenuEventArgs) Handles Menu1.MenuItemClick
 MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value)
 Dim i AsInteger'Make the selected menu item reflect the correct imageurlFor i = 0To Menu1.Items.Count - 1If i = e.Item.Value Then Menu1.Items(i).ImageUrl = "selectedtab.gif"Else Menu1.Items(i).ImageUrl = "unselectedtab.gif"EndIfNextEndSub

在这里事件中,你可以看到,基于单击的选项卡( 真正的MenuItem ),我设置了相关视图。 同样,我为选中的MenuItem 设置了正确的ImageURL。 这基本上是为标签交换和输出图像。 这应该是你想要的标签看起来像什么样子的图像。 在我的示例中,有两个图像,一个选中的标签和一个未选中的标签。 这就是选择"选项卡 2"时的示例:

这个控件基本上在一些基本CSS样式和 ASP.NET MenuMultiView 控件上。 就 这么 简单, 对 吧?

希望你能为它找到一些用途。


控制  asp  asp-net  tab  Control M  Multiview  
相关文章