asp.net tab

最新推荐文章于 2014-07-30 21:43:38 发布

黄家闲人

最新推荐文章于 2014-07-30 21:43:38 发布

阅读量870

点赞数

分类专栏：杂记

杂记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在asp.net网页中实现tabPage功能——来自一位网友

2011-09-07 20:53:11| 分类： .Net系列 | 标签：asp.net |举报 |字号订阅

第一种方法是用Menu控件+MultiView控件实现：

第一步是在网页中拖入一个Menu控件，编辑一下项目，并设置一下它的属性通常要把Orientation属性设为Horizontal，每加入一个Item，建议把它的Value设为一个数字，比如1，2，3……，这样方便我们后面的编程：

第二步是在网页中拖入一个MultiView控件（注意它的css定位属性一定要是相对定位，relative!），它实际上是View控件的容器：

第三步是往MultiView控件里面拖入若干个View控件，每个View控件都相当于一个页面，我们可以像编辑普通页面那样编辑每一个View：

至此，网页的原型已经做好了，它的源代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>tabPage</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="Menu1" runat="server" BackColor="#E3EAEB" DynamicHorizontalOffset="2"
Font-Names="Verdana" Font-Size="0.8em" ForeColor="#666666" Orientation="Horizontal"
StaticSubMenuIndent="10px" Style="position: relative" Width="801px" OnMenuItemClick="Menu1_MenuItemClick">
<StaticSelectedStyle BackColor="#1C5E55" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#666666" ForeColor="White" />
<DynamicMenuStyle BackColor="#E3EAEB" />
<DynamicSelectedStyle BackColor="#1C5E55" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticHoverStyle BackColor="#666666" ForeColor="White" />
<Items>
<asp:MenuItem Text="Page 1" Value="1"></asp:MenuItem>
<asp:MenuItem Text="Page 2" Value="2"></asp:MenuItem>
<asp:MenuItem Text="Page 3" Value="3"></asp:MenuItem>
<asp:MenuItem Text="Page N" Value="4"></asp:MenuItem>
</Items>
</asp:Menu>
</div>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
这是第 1 页</asp:View>
<asp:View ID="View2" runat="server">
这是第 2 页</asp:View>
<asp:View ID="View3" runat="server">
这是第 3 页</asp:View>
<asp:View ID="View4" runat="server">
这是第 N 页</asp:View>
</asp:MultiView>
</form>
</body>
</html>
接下来需要加入控制页面跳转的代码，首先我们默认网页第一次打开时，Menu的第一项就自动选中，所以要把MultiView1控件的ActiveViewIndex属性设为0，并且把它第一个Item的Selected属性设为true。

此外，双击Menu1控件，添加MenuItemClick事件的代码如下：

protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
switch (Menu1.SelectedValue)
{
case "1"://这个值是在Menu中加入Item时设定的
{
MultiView1.ActiveViewIndex = 0;
break;
}
case "2":
{
MultiView1.ActiveViewIndex = 1;
break;
}
case "3":
{
MultiView1.ActiveViewIndex = 2;
break;
}
case "4":
{
MultiView1.ActiveViewIndex = 3;
break;
}
default:
break;
}
}
至此，利用Menu+MultiView实现tabPage功能已经做好了，大家看看它的运行效果：

点击Page N：

从功能的角度来讲，tabPage的功能已经实现了。在下篇中，将介绍如何用其它控件实现tabPage，欢迎关注！

黄家闲人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
asp.net tab

在asp.net网页中实现tabPage功能——来自一位网友 2011-09-07 20:53:11| 分类：.Net系列 | 标签：asp.net |举报|字号订阅第一种方法是用Menu控件+MultiView控件实现：第一步是在网页中拖入一个Menu控件，编辑一下项目，并设置一下它的属性通常要把Orientation属性设为H
复制链接

扫一扫

专栏目录