Menu控件和MultiView控件组合使用遇到的问题
最近在看ASP.NET 4 揭秘,其中第22章提到组合使用Menu控件和MultiView控件可以实现选项卡式的效果,我下载了源代码但是发现不显示Css的边框.
<style type="text/css">
html
{
background-color:silver;
}
.menuTabs
{
position:relative;
top:1px;
left:10px;
}
.tab
{
border:Solid 1px black;
border-bottom:none;
padding:0px 10px;
background-color:#eeeeee;
}
.selectedTab
{
border:Solid 1px black;
border-bottom:Solid 1px white;
padding:0px 10px;
background-color:white;
}
.tabBody
{
border:Solid 1px black;
padding:20px;
background-color:white;
}
</style>
<title>Menu Tab Strip</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu
id="menuTabs"
CssClass="menuTabs"
StaticMenuItemStyle-CssClass="tab"
StaticSelectedStyle-CssClass="selectedTab"
Orientation="Horizontal"
OnMenuItemClick="menuTabs_MenuItemClick"
Runat="server">
<Items>
<asp:MenuItem
Text="Tab 1"
Value="0"
Selected="true" />
<asp:MenuItem
Text="Tab 2"
Value="1"/>
<asp:MenuItem
Text="Tab 3"
Value="2" />
</Items>
</asp:Menu>
<div class="tabBody">
<asp:MultiView
id="multiTabs"
ActiveViewIndex="0"
Runat="server">
<asp:View ID="view1" runat="server">
Contents of first tab
</asp:View>
<asp:View ID="view2" runat="server">
Contents of second tab
</asp:View>
<asp:View ID="view3" runat="server">
Contents of third tab
</asp:View>
</asp:MultiView>
</div>
</div>
</form>
[解决办法]
一 、最简单方法：AJAX 3.5中有TabContainer控件，可以拖到页面直接使用，和窗体应用程序中tab控件的功能一样
二、
页面上的舌签可以用javascript隐藏div实现，也可以用控件实现。这就要看美工及编程人员的喜好了！下面是一段用控件实现的代码。用来实现舌签效果的。相信大家在做项目的时候一定用得上！这段代码没有用后置代码的方式，而是把后置代码和页面放在了一起。大家千万不要把他和javascript搞混！
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
int index = Int32.Parse(e.Item.Value);
MultiView1.ActiveViewIndex = index;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<style type="text/css">
html
{
background-color:silver;
}
.tabs
{
position:relative;
top:1px;
left:10px;
}
.tab
{
border:solid 1px black;
background-color:#eeeeee;
padding:2px 10px;
}
.selectedTab
{
background-color:white;
border-bottom:solid 1px white;
}
.tabContents
{
border:solid 1px black;
padding:10px;
background-color:white;
}
</style>
<title>MultiView Tabs</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu
id="Menu1"
Orientation="Horizontal"
StaticMenuItemStyle-CssClass="tab"
StaticSelectedStyle-CssClass="selectedTab"
CssClass="tabs"
OnMenuItemClick="Menu1_MenuItemClick"
Runat="server">
<Items>
<asp:MenuItem Text="Tab 1" Value="0" Selected="true" />
<asp:MenuItem Text="Tab 2" Value="1" />
<asp:MenuItem Text="Tab 3" Value="2" />
</Items>
</asp:Menu>
<div class="tabContents">
<asp:MultiView
id="MultiView1"
ActiveViewIndex="0"
Runat="server">
<asp:View ID="View1" runat="server">
<br />This is the first view
<br />This is the first view
<br />This is the first view
<br />This is the first view
</asp:View>
<asp:View ID="View2" runat="server">
<br />This is the second view
<br />This is the second view
<br />This is the second view
<br />This is the second view
</asp:View>
<asp:View ID="View3" runat="server">
<br />This is the third view
<br />This is the third view
<br />This is the third view
<br />This is the third view
</asp:View>
</asp:MultiView>
</div>
</div>
</form>
</body>
</html>
