我这里提供两种方法,都使用控件的,一种是Menu控件与MultiView组合,另一种是DataList与MultiView组合;这里只说第二种
具体如下,先建一个用户控件(.ascx),里面添加DataList控件
先看看.ascx 文件的源码吧(我这里没有把代码和源码分开)
TabControl.ascx 文件源码:
<%@ Control Language="C#" ClassName="TabControl" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server">
public event EventHandler TabsClick;//声明一个不含任何事件参数的委托方法
public int SelectIndex
{
get
{
return DataList1.SelectedIndex;
}
}
protected void Page_Load()
{
if(!Page.IsPostBack)
{
List<string> tabs = new List<string>();
tabs.Add("新闻导读");
tabs.Add("体育快讯");
tabs.Add("娱乐爆料");
DataList1.DataSource = tabs;
DataList1.DataBind();
DataList1.SelectedIndex = 0;
}
}
protected void SelectedIndexChanged(object sender ,System.EventArgs e)
{
//判断委托存在
if(TabsClick != null)
{
//前一个参数是触发事件的对象(用户控件本身,这里的this不是DataList),后一个参数表明该事件数据为空
TabsClick(this ,EventArgs.Empty); //实现委托方法
}
}
</script>
<asp:DataList runat="server" ID="DataList1" RepeatDirection="Horizontal" ItemStyle-CssClass="tab"
SelectedItemStyle-CssClass="SelectedTab" OnSelectedIndexChanged="SelectedIndexChanged"
CssClass="tabs">
<ItemTemplate>
<asp:LinkButton runat="server" ID="LinkButton1" CommandName="Select"><%#Container.DataItem %></asp:LinkButton>
</ItemTemplate>
</asp:DataList>
注意:自定义控件中提供了一个只读属性,用来记录DataList1选的是哪一个项,同时LinkButton1的CommandName枚举的是开发环境识别的项Select,用来确定选择SelectedIndex所指向的Item,这里的CSS样式均可在调用的页面实现,看下面文件。
实现方代码(也是将代码源码置于一个文件ShowTabs.aspx)
代码如下:
<%@ Page Language="C#" %>
<%@ Register Src="TabControl.ascx" TagName="TabControl" TagPrefix="user" %>
<!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>Show Tabs</title>
<style type="text/css">
html
{
background-color:silver;
font:14px Georgia Serif;
}
.tabs a
{
color:blue;
text-decoration:none;
font:14px Arial,Sans-Serif;
}
.tab
{
background-color:#eee;
padding:5px;
border:solid 1px black;
border-bottom:none
}
.views
{
background-color:orange;
width:400px;
border:solid 1px black;
border-top:none;
padding:10px
}
.SelectedTab
{
background-color:orange;
padding:5px;
border:Solid 1px black;
border-bottom:none;
}
</style>
<script runat="server">
protected void TabClick(object sender ,EventArgs e)
{
MultiView1.ActiveViewIndex = TabControl1.SelectIndex;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<user:TabControl ID="TabControl1" runat="server" OnTabsClick="TabClick"></user:TabControl>
<div class="views">
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="News" runat="server">
<h1>
News Navigation</h1>
微软为Windows 7大力造势 Vista何去何从? 目前,微软正全力为其下一代操作系统Windows 7大造声势,Windows 7 RC今日已开放下载。而业界人士最为关心的是:
Windows 7正式版发布后, 微软计划继续销售Windows Vista操作系统多长时间?
</asp:View>
<asp:View ID="Sports" runat="server">
<h1>
Sport News</h1>
微软WMM手机应用商店向开发者开放 9月上线70%收入归开发者 商业周刊:谷歌云计算武器App Engine微软和Rackspace是主要竞争对手 史上最恶毒10大病毒
Conficker排名第八Melissa来自浪漫爱情故事 Windows 7 RC今日开放下载 服务器或不堪重负重蹈Vista时期覆辙 惠普与RIM合作 推黑莓手机打印服务ProLiant服务器上可运行黑莓软件
技术与产品
</asp:View>
<asp:View ID="Entertainment" runat="server">
<h1>
Entertainment</h1>
50000年薪,顶级嵌入式课程 并不是所有云都相同 用AWS快速构建自己的云计算 经典案例讲述自定义Veloci 服务器节电小妙招 多线程多核的并行度分析 强大的Moblin开发应用程序
U盘将AMT配置成SMB模式 【惊】一个人玩转一个公司 【赞】SOA的十大技术理论体系 【赞】看专家教你用CUDA编程 【免费】VSTS项目管理培训 推荐好友注册,赢索爱手机
【快】专业手机主题片刻完成
</asp:View>
</asp:MultiView>
</div>
</div>
</form>
</body>
</html>
这里用到了MultiView控件,对于他的使用可以查看ASP.NET 3.5揭秘和详细的。或者查看CSDN。TabControl编译成功之后就成了控件类,你可以调用它的属性,比如这里的SelectIndex
注意:该页面的上面
<%@ Register Src="TabControl.ascx" TagName="TabControl" TagPrefix="user" %>
只要你拖过来就会生成,不过TagPrefix 默认的是uc1 我改成了user,这个都没关系的,不过下面的引用控件部分也要改成<user: 开始,</use结束。 TagName是你的控件标签名 <user:TabControl ID="TabControl1" runat="server" OnTabsClick="TabClick"></user:TabControl>就是这里的TabControl
效果如下: