程序博客网 > 手机在线拼图软件

asp.net 多页Tab功能

来源：互联网 发布：手机在线拼图软件 编辑：程序博客网 时间：2024/06/10 01:23

 

搜索了相关的资料，转载了4种方式，个人感觉第一种最好，不需要用code改变，比较灵活，也很好看。

Ajax的现成控件应该也比较好用，不过没有试用。

 

=========================================

方法1： 个人感觉最好，灵活，美观

==========================================

灵活的Tab页，使用纯HTML＋CSS实现，正好总结一下。

首先看一下预览界面：

样例HTML可以访问：http://www.demo2do.com/htmldemo/school/attendance/AttendanceGlobal.html

下面开始讲述一下完成上述页面的步骤。

1. 构建HTML
构建HTML是整个过程最基础的部分。我们构建HTML比较关键的一个原则就是“还HTML标签其本来的含义”。所以在这里，我们应该合理分析一下期望做到的HTML的结构的情况，并加以分析，选择比较合适的HTML标签，而不是采用非标准的Table布局或者充斥着大量div和class的布局方式。事实上，现在存在着一种误区，就是凡事采用了DIV＋CSS的方式进行页面编程的就是Web标准的，其实这是完全错误的观点，很容易就导致了“多div症”（divitus）或者“多类症”（classitis）。
回到正题，我们分析一下页面样式，可以将整个Tab页分成2个部分，分别是一级菜单和二级菜单，他们有类似的特点，并以横向方式排列。HTML标签中的无序列表就可以反映出这种逻辑关系。所以我们分别采用2个无序列表来表示一级菜单和二级菜单。代码如下：

Java代码 复制代码
  1. <div class="navg">   
  2.     <div id="attendance" class="mainNavg">   
  3.         <ul>   
  4.             <li id="attendanceNavg"><a href="#">考勤管理</a></li>   
  5.             <li id="teachNavg"><a href="#">教学管理</a></li>   
  6.             <li id="communicationNavg"><a href="#">家校互通</a></li>   
  7.             <li id="systemNavg"><a href="#">系统管理</a></li>   
  8.         </ul>   
  9.     </div>       
  10.     <div id="dailyAttendance" class="secondaryNavg">   
  11.         <ul>   
  12.             <li id="dailyAttendanceNavg"><a href="#">当天考勤</a></li>   
  13.             <li id="leaveApproveNavg"><a href="#">请假审批</a></li>   
  14.             <li id="attendanceStatisticsNavg"><a href="#">考勤统计</a></li>   
  15.             <li id="attendanceCollectNavg"><a href="#">考勤汇总</a></li>   
  16.         </ul>   
  17.     </div>   
  18. </div>  



其中，2个div将菜单级别划分开。其实在以后还会有其他的功效。此时，我们不妨View一下这张页面，我们可以惊喜的发现，这张页面就想Word文档一样，是可读的，这一点我们可以在整个过程做完以后再一次验证。



2. 构建基本CSS

先简单的让ul横向排列，这里面要注意元素float之后要注意清理

然后通过分别在LI 和 A 元素上应用背景来实现主菜单样式，这里有个比较重要的地方是A这个元素变成块级元素（display: block），这样可以便于我们下面做一些处理，也能使整个菜单应用到链接样式。
而其中的line-height，恰恰可以使A中的字纵向居中。text-align使得A中的字横向居中。

Java代码 复制代码
  1. .navg .mainNavg UL {   
  2.     margin: 0;   
  3.     padding: 0;   
  4.     list-style: none;   
  5. }   
  6. .navg .mainNavg UL LI {   
  7.     float: left;       
  8.     background-color: #E1E9F8;   
  9.     background: url(../images/tab_right.gif) no-repeat right top;   
  10.     margin: 10px 3px;   
  11.     height: 25px;   
  12. }   
  13.   
  14. .navg .mainNavg UL LI A {   
  15.     display: block;   
  16.     height: 25px;   
  17.     padding: 0 25px;   
  18.     line-height: 24px;   
  19.     background-color: #E1E9F8;   
  20.     background: url(../images/tab_left.gif) no-repeat left top;   
  21.     text-decoration: none;   
  22.     float: left;   
  23.     text-align:center;   
  24.     color: #fff;   
  25.     font-weight: bold;     
  26. }  



3. 使宽度自适应

我们在这里使用滑动门技术来做宽度自适应。下面简单介绍一下滑动门技术

简单来说，就是在LI上应用一幅大图像背景，并让这个背景居于右侧



然后在A上应用一个小图像背景，并让这个背景居于左侧，遮住大图像边缘



这样无论菜单文字内容长度怎么变，都不会破坏原来的结构了。

4. 当前菜单高亮显示

如果高亮当前页面，这个有很多种做法，最死板的是在每个页面上显式的定义类。
但是对于web项目来说，页面多数是动态的，所以这样不是最理想的方法。

我这里采用的方法是CSS选择器的灵活使用

Java代码 复制代码
  1. #attendance #attendanceNavg,   
  2. #teach #teachNavg,   
  3. #communication #communicationNavg,   
  4. #system #systemNavg {   
  5.     background: url(../images/tab_right_on.gif) no-repeat right top;   
  6. }   
  7. #attendance #attendanceNavg A,   
  8. #teach #teachNavg A,   
  9. #communication #communicationNavg A,   
  10. #system #systemNavg A {   
  11.     background: url(../images/tab_left_on.gif) no-repeat left top;   
  12.     color: #0000ff;   
  13. }  



在<div id="attendance" class="mainNavg">的代码中，我们可以使用不同的id作为选择器，由于CSS中的选择器id的优先级将大于class，所以只要根据id配合上li上面的id，就可以达到动态选择高亮选中的目的。

事实上，由于我们的页面都是动态的，所以id可以由后台生成，这样就可以通过id的不同组合非常精巧的实现了我们的需求。

5. 小技巧

最后可能还有一个问题你在想怎么实现的，就是高亮的tab如何把下面的横线遮掉的

很简单，图片上的小技巧。将高亮的图片高度设置为25px，而普通的图片设置为24px。然后通过padding，就可以将那根横线遮去了。


我们可以使用类似的方式，把二级菜单也做出来，这里就不详细叙述了。大家可以结合源码试一下。

附件为

 

 

============================================================

方法2： 需要用code控制页面切换，当tab页数多时就很不方便

==========================================================

 

asp.net 多页Tab功能（div实现/iframe实现）

原理呢，就是通过后台代码控制div标签的display属性值。这里一定要注意，在定义div时，加上属性runat="server"和style=”overflow:auto“ 。另外，还可以通过控制z-index高度值来控制显隐。
aspx页面：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <style>.aaa {
BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: #E0E0E0; BORDER-BOTTOM-STYLE: none
}
.bbb {
BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: #0000C0; BORDER-BOTTOM-STYLE: none; COLOR:White
}
</style>
</head>
<body>
    <form id="Form1" method="post" runat="server">
        <asp:Button ID="TabButton1" Style=" left: 16px;
            top: 24px" runat="server" Text="查询" CssClass="aaa" OnClick="TabButton1_Click"
            Width="60px"></asp:Button>
        <asp:Button ID="TabButton2" Style=" left: 77px;
            top: 24px" runat="server" Text="新建" CssClass="bbb" OnClick="TabButton2_Click"
            Width="60px"></asp:Button>
        <asp:Button ID="TabButton3" Style=" left: 138px;
            top: 24px" runat="server" Text="批量" CssClass="bbb" OnClick="TabButton3_Click"
            Width="60px"></asp:Button><br />
        <div id="tab1" style="left: 16px; width: 100%;overflow:auto; top: 40px;
            height: 40px; background-color: #E0E0E0" runat="server">
            <asp:Label ID="Label1" runat="server" Text="Label1"></asp:Label></div>
        <div id="tab2" style="left: 16px; width: 100%;overflow:auto;display:none; top: 40px;
            height: 40px; background-color: #E0E0E0" runat="server">
            <asp:Label ID="Label2" runat="server" Text="Label2"></asp:Label></div>
        <div id="tab3" style=" left: 16px; width: 100%;overflow:auto;display:none; top: 40px;
            height: 40px; background-color: #E0E0E0" runat="server">
            <asp:Label ID="Label3" runat="server" Text="Label3"></asp:Label></div>
    </form>
</body>
</html>

cs页面：

protected void TabButton1_Click(object sender, System.EventArgs e)
    {
        tab1.Style.Add("display", "block");
        tab2.Style.Add("display", "none");
        tab3.Style.Add("display", "none");
        TabButton1.CssClass = "aaa";
        TabButton2.CssClass = "bbb";
        TabButton3.CssClass = "bbb";
    }

    protected void TabButton2_Click(object sender, System.EventArgs e)
    {
        tab1.Style.Add("display", "none");
        tab2.Style.Add("display", "block");
        tab3.Style.Add("display", "none");
        TabButton1.CssClass = "bbb";
        TabButton2.CssClass = "aaa";
        TabButton3.CssClass = "bbb";
    }
    protected void TabButton3_Click(object sender, System.EventArgs e)
    {
        tab1.Style.Add("display", "none");
        tab2.Style.Add("display", "none");
        tab3.Style.Add("display", "block");
        TabButton1.CssClass = "bbb";
        TabButton2.CssClass = "bbb";
        TabButton3.CssClass = "aaa";
    }

 

 

==========================================================

方法3： tab页的大小固定，网页全屏和最小化切换时，tab页位置不能固定，根据页面计算的结果让其位置有变化

=============================================================

　　我们经常在主页中要浏览分类信息，在C/S模式下，经常采用Tab分页的方式来做，然后将不同的信息放到不同的Tab页中，然后可以点击页签去查看不同页面中的内容。我们可以用网页的IFRAME来实行这个功能，先建立一个主WebForm1,在上面放两个按钮来模拟页签（今后也可以用Photoshop来制作更精美的页签），然后再建立两个子Form,WebForm2,WebForm3，当按钮被按下的时候来切换IFRAME的src属性去显示不同的子页面。具体代码如下：

WebForm1.ASPx
<%@ Page language="c#" Codebehind="WebForm1.ASPx.cs" AutoEventWireup="false" Inherits="iframetest.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="javascript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<STYLE>.aaa {
BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: #ffcc33; BORDER-BOTTOM-STYLE: none
}
.bbb {
BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: #99ffcc; BORDER-BOTTOM-STYLE: none
}
</STYLE>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<ASP:button id="Button1" style="Z-INDEX: 101; LEFT: 16px; POSITION: absolute; TOP: 24px" runat="server"
Text="Button" CSSClass="aaa"></ASP:button>
<ASP:Button id="Button2" style="Z-INDEX: 102; LEFT: 72px; POSITION: absolute; TOP: 24px" runat="server"
Text="Button" CSSClass="bbb"></ASP:Button>
<iframe id="IFRAME1" style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; Z-INDEX: 103; LEFT: 16px; BORDER-LEFT: 0px solid; WIDTH: 648px; BORDER-BOTTOM: 0px solid; POSITION: absolute; TOP: 40px; HEIGHT: 288px"
runat="server"></iframe>
</form>
</body>
</HTML>

WebForm1.ASPx.cs
.
.
.

private void Button1_Click(object sender, System.EventArgs e)
{
IFRAME1.Attributes.Add("src","Webform2.ASPx");
}

private void Button2_Click(object sender, System.EventArgs e)
{
IFRAME1.Attributes.Add("src","Webform3.ASPx");
}

 

=================================

方法4： 有一个ajax控件可以实现，没用，可以参考：

http://www.ntsky.com/download/code/2007-05-15/3187532351f28876.html

 

手机在线拼图软件 手机在线拼图软件
原创粉丝点击
热门IT博客
网络被骗10万网络被骗10万
qt snmp 网络管理软件qt snmp 网络管理软件
python 字符串连接数字
淘宝店访客少怎么办
javascript 遍历对象
礼来网络大讲堂
airplayer for mac
linux查看内存大小
java重定向怎么写
java创建excel表格
人工智能芯片股票
遥感光谱仪软件
星星知我心电视剧全集
网络保密十条禁令
平板电脑儿童绘画软件
电脑版手机淘宝网首页
mac os x 10.10镜像
淘宝欧式中世纪服饰
哈尔滨犀牛软件培训
得力3969软件
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 男式工装裤 工装裤黑色 哪个牌子工装裤好 什么品牌的工装裤好 工装裤配衬衫 直筒工装裤 工装裤女士 工装裤便宜 女生工装裤 灰色工装裤搭配 工装裤配板鞋 绿色工装裤配什么鞋子 绿色工装裤 穿工装裤配什么鞋子 黑色工装裤配什么鞋 工装裤怎么搭配上衣 工装裤显瘦吗 军绿色工装裤配什么鞋 潮流工装裤 工装裤怎么搭 卫衣配工装裤 胖子工装裤 潮牌工装裤品牌 工装裤配靴子 工装裤如何搭配上衣 配工装裤的上衣 工装裤穿搭 休闲工装裤 灯芯绒男裤 黑色长裙搭配什么鞋子 工装设计费一般多少钱 工装设计费 工装束脚裤 工装鞋图片 工装鞋 选购 耐磨工装鞋 拉夏贝尔工装 工装鞋怎么样 天伯伦工装鞋 工装靴怎么搭配 国产工装靴

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里