Menu、MultiView和View 合作做的tab效果
2007-06-12 13:32
239 查看
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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 id="Head1" runat="server">
<title>Tab</title>
<link rel="stylesheet" href="tabber.css" type="text/css" media="screen" />
</head>
<body>
<form id="form1" runat="server">
<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="tabbernav1">
</td>
<td class="tabbernav">
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" OnMenuItemClick="Menu1_MenuItemClick">
<Items>
<asp:MenuItem Text="吴锋" Value="0" Selected="True"></asp:MenuItem>
<asp:MenuItem Text="吴锋" Value="1"></asp:MenuItem>
<asp:MenuItem Text="吴锋" Value="2"></asp:MenuItem>
</Items>
<StaticMenuItemStyle CssClass="tabItem" BorderWidth="2px" />
<StaticSelectedStyle CssClass="tabSelected" />
<StaticHoverStyle CssClass="tabHover" />
</asp:Menu>
</td>
<td class="tabbernav2">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="tabcontent">
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="Tab1" runat="server">
<table width="600" height="400" cellpadding="0" cellspacing="0">
<tr valign="top">
<td class="TabArea" style="width: 600px">
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>TAB VIEW 1
</td>
</tr>
</table>
</asp:View>
<asp:View ID="Tab2" runat="server">
<table width="600" height="400" cellpadding="0" cellspacing="0">
<tr valign="top">
<td class="TabArea" style="width: 600px">
TA<asp:Button ID="Button1" runat="server" Text="Button" />B VIEW 2
</td>
</tr>
</table>
</asp:View>
<asp:View ID="Tab3" runat="server">
<table width="600" height="400" cellpadding="0" cellspacing="0">
<tr valign="top">
<td class="TabArea" style="width: 600px">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>TAB VIEW 3
</td>
</tr>
</table>
</asp:View>
</asp:MultiView>
</td>
</tr>
</table>
</center>
</form>
</body>
</html>
.tabItem
{
border: 1px solid #778;
background: #DDE;
text-decoration: none;
width: 50px;
height: 20px;
padding-top: 3px;
text-align: center;
}
.tabSelected
{
background-color: #fff;
border-bottom: 1px solid white;
}
.tabHover
{
color: #000;
background: white;
}
.tabbernav
{
margin: 0;
font: bold 12px Verdana, sans-serif;
vertical-align: bottom;
width: 10px;
}
.tabbernav1
{
margin: 0;
padding: 3px 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
width: 5px;
}
.tabbernav2
{
margin: 0;
padding: 3px 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
.tabcontent
{
padding: 5px;
border: 1px solid #aaa;
border-top: 0;
}
protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value);
}
<!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 id="Head1" runat="server">
<title>Tab</title>
<link rel="stylesheet" href="tabber.css" type="text/css" media="screen" />
</head>
<body>
<form id="form1" runat="server">
<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="tabbernav1">
</td>
<td class="tabbernav">
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" OnMenuItemClick="Menu1_MenuItemClick">
<Items>
<asp:MenuItem Text="吴锋" Value="0" Selected="True"></asp:MenuItem>
<asp:MenuItem Text="吴锋" Value="1"></asp:MenuItem>
<asp:MenuItem Text="吴锋" Value="2"></asp:MenuItem>
</Items>
<StaticMenuItemStyle CssClass="tabItem" BorderWidth="2px" />
<StaticSelectedStyle CssClass="tabSelected" />
<StaticHoverStyle CssClass="tabHover" />
</asp:Menu>
</td>
<td class="tabbernav2">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="tabcontent">
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="Tab1" runat="server">
<table width="600" height="400" cellpadding="0" cellspacing="0">
<tr valign="top">
<td class="TabArea" style="width: 600px">
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>TAB VIEW 1
</td>
</tr>
</table>
</asp:View>
<asp:View ID="Tab2" runat="server">
<table width="600" height="400" cellpadding="0" cellspacing="0">
<tr valign="top">
<td class="TabArea" style="width: 600px">
TA<asp:Button ID="Button1" runat="server" Text="Button" />B VIEW 2
</td>
</tr>
</table>
</asp:View>
<asp:View ID="Tab3" runat="server">
<table width="600" height="400" cellpadding="0" cellspacing="0">
<tr valign="top">
<td class="TabArea" style="width: 600px">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>TAB VIEW 3
</td>
</tr>
</table>
</asp:View>
</asp:MultiView>
</td>
</tr>
</table>
</center>
</form>
</body>
</html>
.tabItem
{
border: 1px solid #778;
background: #DDE;
text-decoration: none;
width: 50px;
height: 20px;
padding-top: 3px;
text-align: center;
}
.tabSelected
{
background-color: #fff;
border-bottom: 1px solid white;
}
.tabHover
{
color: #000;
background: white;
}
.tabbernav
{
margin: 0;
font: bold 12px Verdana, sans-serif;
vertical-align: bottom;
width: 10px;
}
.tabbernav1
{
margin: 0;
padding: 3px 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
width: 5px;
}
.tabbernav2
{
margin: 0;
padding: 3px 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
.tabcontent
{
padding: 5px;
border: 1px solid #aaa;
border-top: 0;
}
protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value);
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Menu、MultiView和View 合作做的tab效果
- Menu、MultiView和View 合作做的tab效果
- Menu、MultiView和View 合作做的tab效果
- Menu、MultiView和View 合作做的tab效果
- Android 自定义View结合自定义TabLayout实现顶部标签滑动效果
- TabLayout+TabItem+ViewPager+Fragment实现早期微信屏幕滑动效果
- AndroidUI组件---SlidingTabLayout实现ViewPager页卡滑动效果
- Android ViewPager和Fragment实现顶部导航界面滑动效果、标签下的tab位置
- Android开发之CoordinatorLayoutAppBarLayoutViewPagerTabLayout实现顶部伸缩效果
- Tablayout和Viewpager的结合使用，实现导航的效果
- TabLayout+ViewPager 实现页签滑动的效果
- ViewPager+Tablayout实现页面标题联动效果
- 使用ViewPagerIndicator结合ViewPager实现网易新闻客户端的Tab标签效果
- （四）使用PagerSlidingTabStrip和ViewPager实现可左右滑动和点击效果功能
- ASP.NET 用MultiView和View实现选项卡效果
- React Native利用ScrollableTabView实现Tab+ViewPager效果
- Fragment、ViewPager、ActionBar实现TAB导航条效果
- 使用PagerSlidingTabStrip实现滑动标签同步的ViewPager效果
- ASP.NET 用MultiView和View实现选项卡效果
- ViewPagerIndicator 取代TabHost，实现滑动tab，引导页等效果