jQuery实战(四) - tab菜单

最新推荐文章于 2023-12-26 21:16:38 发布

learning_1

最新推荐文章于 2023-12-26 21:16:38 发布

阅读量143

点赞数

分类专栏： jQuery 文章标签： jQuery Ajax CSS Chrome IE ViewUI

jQuery 专栏收录该内容

22 篇文章

订阅专栏

本文介绍使用jQuery实现Tab菜单的方法，包括纯CSS展示及通过AJAX动态加载内容的技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很多天前就已经看完jQuery实战第四讲了,不过一直没有时间做笔记,呵呵,趁着今天有点空,上来记录记录...
这一讲的内容是制作tab菜单,所谓的tab菜单,也就是类似于OFFICE2007的界面菜单那样子的,当然,用在网页上面的话我们只是需要鼠标滑过就显示相应的内容而不必点击了,效果图如下:
[img]http://niunan.net/bbspic/tab/01.jpg[/img]
在这节课里讲到了二个tab菜单的制作,第一个没有用到AJAX,每个菜单对应的内容都是事先已经在网页里的,只是把他们隐藏了而已,而第二个就用到了AJAX实时的提取内容数据.其实整个JS代码的编写也并不是很复杂,本人觉得难的主要在于CSS的编写上,如何才能让菜单与内容进行无缝结合...
以下是tab.aspx的源码:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tab.aspx.cs" Inherits="tab" %>

<!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 runat="server">
    <title>jQuery实战-tab菜单</title>
    <link href="css/tab.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery.min.js" type="text/javascript"></script>

    <script src="js/tab.js" type="text/javascript"></script>

</head>
<body>
    <div id="tab1">
        <ul>
            <li class="tabin first">菜单一</li>
            <li>菜单二</li>
            <li>菜单三</li>
        </ul>
        <div class="contentin">
            菜单一的内容</div>
        <div>
            菜单二的内容</div>
        <div>
            菜单三的内容</div>
    </div>
    <br />
    <br />
    <br />
    <div id="tab2">
        <ul>
            <li class="tabin first">获取整个网页内容</li>
            <li>获取网页部分内容</li>
            <li>获取handler输入的内容</li>
        </ul>
        <div id="container">
            <div id="loading"><img src="images/loading.gif" alt="loading" /> 数据提取中,请稍候...</div>
            <div id="content"></div>
        </div>
    </div>
</body>
</html>

以下是tab.css的源码:


body {
    font-size:14px;
}
ul, li {
    list-style:none;
    padding: 0;
    margin: 0;
}
#tab1 li {
    width: 50px;
    height: 25px;
    line-height: 25px;
    background-color: #8A4B04;
    float: left;
    margin-right: 2px;
    border: 2px solid #fff;
    text-align: center;
    cursor: pointer;  /* 移上该元素上时鼠标为手形 */
}
#tab1 div {
    width: 300px;
    height: 100px;
    background-color: #8A4B04;
    display: none; /* 默认不显示 */
    padding: 10px;
    clear: left;
}
.first {  /* 第一个tab菜单 */
    margin-left:10px;
}
#tab1 .contentin {  /* 当前菜单对应的DIV的样式 */
    display: block;
}
#tab1 .tabin { /* 当前菜单的样式 */
    border-bottom-color: #8A4B04;
}

#tab2 li {
    width: 150px;
    height: 25px;
    line-height: 25px;
    border: 1px solid #9EC9FE;
    float: left;
    text-align:center;
    margin-right: 10px;
    cursor: pointer;  /* 移上该元素上时鼠标为手形 */
}
#tab2 #container {
    width: 600px;
    height: 200px;
    border: 1px solid #9EC9FE;
  /* margin-top: -1px;  如果用这条样式的话那只是在IE里能出现缺口*/
    padding: 20px;
    position: relative;
    top: -1px;
    clear: left;
}
#tab2 .tabin {
    border-bottom: 1px solid #fff;
    position:relative;   /* 要让z-index产生效果,则必须把元素的position设置为relative或者absolute */
    z-index: 100;
}

以下是tab.js的源码:


var timeoutid;    // 延迟处理时使用
$(function() {
    $("#tab1 li").each(function(index) {  // index为当前菜单的索引,从0开始
        var liNode = $(this);
        liNode.mouseover(function() {
            timeoutid = setTimeout(function() {    // 延迟处理
                $("#tab1 .contentin").removeClass("contentin");   // 原来含有contentin样式的DIV块去除contentin样式
                $("#tab1 .tabin").removeClass("tabin");  // 原来含有tabin样式的菜单去除tabin样式
                $("#tab1 div").eq(index).addClass("contentin");  // 显示相应的DIV块的内容
                liNode.addClass("tabin"); // 给当前菜单加上tabin样式
            }, 300);
        });
    }).mouseout(function() {
        clearTimeout(timeoutid);
    });

    //在整个页面装入完成后，标签效果2的内容区域需要装入静态的html页面内容
    $("#tab2 #container #content").load("tab.htm");  
    $("#tab2 li").each(function(index) {
        $(this).mouseover(function() {
            var liNode = $(this);
            timeoutid = setTimeout(function() {
                $("#tab2 .tabin").removeClass("tabin");  // 原来含有tabin样式的菜单去除tabin样式
                liNode.addClass("tabin"); // 给当前菜单加上tabin样式
                switch (index) {
                    case 0:
                        $("#tab2 #container #content").load("tab.htm");  // 提取网页全部内容
                        break;
                    case 1:
                        $("#tab2 #container #content").load("tab.htm h2");   // 提取网页部分内容
                        break;
                    case 2:
                        // 提取handler的输出内容, 加个参数防止页面缓存
                        $("#tab2 #container #content").load("handler/tab.ashx?t=" + new Date().getTime());  
                        break;
                }
            }, 300);
        }).mouseout(function() {
            clearTimeout(timeoutid);
        });
    });

    //对于loading图片绑定ajax请求开始和交互结束的事件
    $("#tab2 #loading").bind("ajaxStart", function() {
        $("#tab2 #container #content").text(""); 
        $(this).show();
    }).bind("ajaxStop", function() {
        $(this).hide();
    });
});

在这里我们还使用了loading图片,让他绑定jQuery提供给我们的ajaxStart和ajaxStop事件.
为了能让我们的loading看到更好的效果,我在handler里用了线程,让他暂停3秒后再执行输出代码,以下是tab.ashx的源码:


<%@ WebHandler Language="C#" Class="tab" %>

using System;
using System.Web;

public class tab : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        System.Threading.Thread.Sleep(3000);   // 暂停3秒后再执行以下代码
        context.Response.Write("这是Handler输出的内容!");
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}

另外还有一个静态页面用于测试第二个tab菜单的第一项和第二项-载入静态页面,以下是tab.htm的源码:


<!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>
    <title>第4讲的测试网页</title>
</head>
<body>
<h2>第4讲的测试网页</h2>
<p>今晚打老虎!!!</p>
</body>
</html>

其实不只是静态页,即使是动态页如ASPX等,jQuery里的load方法也能载入,jQuery中的load方法其实也就是相当于一个简化了的AJAX提交而已...
以上就是这节课的内容,我会附上源码的,我是在vs2008下测试的!
以上代码兼容ie6,7,8,opera,ff,chrome