Menu控件和MultiView控件组合使用遇到的有关问题
日期：2014-05-17 浏览次数：21262 次
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.o
最近在看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.o
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
