利用Menu和MutiView控件实现类似tabControl效果

利用Menu和MutiView控件实现类似tabControl效果

2010-05-10 15:41

前台：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>

前台：控件代码
<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>

后台代码：
protected void menuTabs_MenuItemClick(object sender, MenuEventArgs e)
{
multiTabs.ActiveViewIndex = Int32.Parse(menuTabs.SelectedValue);
}