jQuery实战(四) - tab菜单 - 11年.NET撸码员，月薪5K

niunan

浏览: 721137 次
性别:
来自: 南宁

最近访客更多访客>>

u012363178

abc123

Gootearsine

草料场

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery实战(四) - tab菜单

博客分类：

jQuery

jQuery Ajax CSS Chrome IE

很多天前就已经看完jQuery实战第四讲了,不过一直没有时间做笔记,呵呵,趁着今天有点空,上来记录记录...
这一讲的内容是制作tab菜单,所谓的tab菜单,也就是类似于OFFICE2007的界面菜单那样子的,当然,用在网页上面的话我们只是需要鼠标滑过就显示相应的内容而不必点击了,效果图如下:

在这节课里讲到了二个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

jQueryTest.rar (22.2 KB)
下载次数: 123

分享到：

ACCP5.0Y2项目说明文档 | Programming ASP.NET 中文版(第3版)

2008-11-19 13:55
浏览 2338
评论(1)
分类:Web前端
查看更多

1 楼 asd300 2009-01-14

你好牛腩兄，jQuery实战第四讲的视频我没有看过，我只是看了你的代码，有一个问题我想问你一下那个tab1菜单：
tab1里面的三个div事先是隐藏起来的。请问：在不隐藏起来的情况下，3个div是按标准流排列，也就是3个div各占一行，纵向排成一列，，我不明的地方就是：鼠标滑过第二个菜单或第三个菜单时，下面对应的第二个（或第三个）div怎么跑上来，捏在第二个（或第三个）菜单的下面了？

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery实战(四) - tab菜单

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery实战(四) - tab菜单

评论

发表评论

相关推荐

jquery制作select列表双向选择

锋利的jQuery实例－图片滚动

jquery访中关村商城排行榜特效

框架frame自适应内容高度

jQuery插件—获取URL参数

中关村网站产品参数页的参数纠错的制作

鼠标移到某一元素则在元素旁边出现弹出框

JQuery控制图片无缝滚动

jquery xpath详解

jQuery中使用插件解决ie6下selectfqg元素设置z-index无效的问题！

jQuery控制元素间隔滚动!

jquery中筛选表格的特定行数后进行操作

jQuery插件_jcarousel(用于图片滚动)

制作多级滑动tab菜单

jQuery实战（三）

只能输入数字的文本框(兼容ie6,7,8,opera,ff,chrome)

jQuery实战(二)

制作符合WEB标准的QQ弹出消息(jQuery)

jQuery实战(一)

符合WEB标准的浮动层（jQuery版）！

最近访客更多访客>>