`
niunan
  • 浏览: 721356 次
  • 性别: Icon_minigender_1
  • 来自: 南宁
社区版块
存档分类
最新评论

jQuery实战(四) - tab菜单

阅读更多
很多天前就已经看完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
分享到:
评论
1 楼 asd300 2009-01-14  
你好牛腩兄,jQuery实战第四讲的视频我没有看过,我只是看了你的代码,有一个问题我想问你一下那个tab1菜单:
tab1里面的三个div事先是隐藏起来的。请问:在不隐藏起来的情况下,3个div是按标准流排列,也就是3个div各占一行,纵向排成一列,,我不明的地方就是:鼠标滑过第二个菜单或第三个菜单时,下面对应的第二个(或第三个)div怎么跑上来,捏在第二个(或第三个)菜单的下面了?

相关推荐

    JQuery可编辑表格、横向纵向菜单、标签页、级联下拉框、窗口

    在IT领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax...而提供的"JQuery实战视频教程SRC&PPT"可能包含了具体的代码示例和讲解,对于深入理解和应用这些概念非常有帮助。

    jQuery的基础教程文档 web开发 前端

    4. 提供了丰富插件库,可以轻松扩展功能,如表单验证、Tab导航、拖放效果、表格排序、DataGrid、树形菜单、图像特效和Ajax上传等。 5. 能够实现JavaScript脚本与HTML代码的分离,便于后期的编辑和维护工作。 知识点...

    jquery1.2.8特效实例大全

    《jQuery 1.2.8特效实例大全》涵盖了JavaScript库jQuery的广泛应用,特别是菜单、Tab切换和各种视觉效果的实现。在这个集合中,我们将会深入探讨这些关键知识点,为你的网页开发提供丰富的实践资源。 首先,jQuery...

    Jquery 实例:标签页效果

    在网页设计中,交互性和用户体验是至关重要的因素之一,而标签页(Tab)效果就是提升这些体验的有效方式...通过实践和学习JQuery实战第四讲:标签页效果,你将能更深入地理解这一技术,并能自如地运用到实际项目中去。

    Jquery Liger UI框架学习

    在"jQuery liger ui学习资料"这个压缩包中,你可能找到了Liger UI的官方文档、示例代码、教程视频或实战项目等,这些资源将帮助你快速掌握Liger UI的使用方法和技巧。建议先从官方文档入手,了解每个组件的基本用法...

    滑动门多种效果,横向,纵向菜单

    在"jQuery选项卡实战示例.htm"中,我们可以学习如何使用jQuery库来实现更复杂的滑动门效果。jQuery简化了DOM操作和动画效果的创建,使得代码更简洁、易读。在选项卡功能中,每个选项卡代表一个内容区域,用户点击...

    精通JavaScript+jQuery Part1

     8.5 菜单实例二:流行的Tab菜单   第9章 CSS滤镜的应用   9.1 滤镜概述   9.2 通道(Alpha)   9.3 模糊(Blur)   9.4 运动模糊(Motion Blur)   9.5 透明色(Chroma)   9.6 下落的阴影...

    zencart的tab插件,好多个

    8. **滑动菜单,Tab,选项卡,横向,竖向都有.txt**:滑动菜单可能指的是在水平和垂直方向都可以滑动的选项卡,适用于不同屏幕尺寸和布局需求。 9. **日本门户网站的经典选项卡导航.txt**:这可能是从日本门户网站...

    Bootstrap从入门到项目实战.zip

    在JavaScript插件部分,Bootstrap 4.0提供了如 Collapse、Tab、Tooltip 和 Popover 等增强交互性的功能。这些插件基于jQuery,可以通过数据属性或JavaScript方法来启用。例如,Collapse插件可用于隐藏和显示内容,常...

    课程教学大纲(前端页面优化).pdf

    课程推荐教材《jQuery实战从入门到精通》,并提供了其他同类书籍作为参考,鼓励学员广泛阅读,深化理解。 通过本课程的学习,学员不仅能够掌握jQuery的核心技术,还能运用这些技术进行前端页面的优化,提高网页性能...

    课程教学大纲(前端页面优化).docx

    参考书籍推荐了《jQuery实战从入门到精通》,同时建议查阅其他同类书籍,如《jQuery权威指南》、《jQueryCookbook》等,以便从不同角度深入理解jQuery的使用。 总之,这门课程全面覆盖了jQuery和Ajax的核心技术,...

    很棒的Bootstrap选项卡切换效果

    在HTML头部,我们看到引用了`bootstrap.min.css`和`bootstrap-responsive.min.css`来提供样式,以及`jquery.min.js`、`bootstrap.min.js`和`bootstrap-tab.js`来处理JavaScript交互。`bootstrap-tab.js`是Bootstrap...

    bootstrap中文参考+经典实例

    此外,Bootstrap的JavaScript插件如滚动监听、模态、下拉菜单、 Collapse 和 Tab 功能,极大地丰富了网页的交互性。这些插件通常基于jQuery,通过简单的数据属性(data attributes)和JavaScript方法就能激活。中文...

    B站经典课程,bootstrap 从入门到精通(全套资料 代码).zip

    4. **JavaScript插件**:Bootstrap还包含了一系列基于jQuery的插件,如滚动spy、tab切换、折叠内容、轮播图等,为网页添加动态交互功能。 5. **自定义Bootstrap**:学习如何根据项目需求定制Bootstrap,包括修改...

    Html权威指南

    - **使用JavaScript库**:如jQuery、React等,提供丰富的功能和更高效的开发流程。 通过以上内容的学习,读者将对HTML5、CSS和JavaScript的基础知识有全面而深入的理解,为后续深入学习和实战打下坚实的基础。

    bootstrap帮助文档chm文件.zip

    3. **JavaScript插件**:Bootstrap还提供了许多基于jQuery的插件,如模态框(Modal)、下拉菜单(Dropdowns)、滚动spy(Scrollspy)、Tab切换(Tabs)和自定义滚动条(Custom Scrollbar)等。这些插件为网站增添了...

    45个非常奇妙的CSS3 特性应用示例

    "Dropdown Menu"和"Tab Menus"示例则展示了如何构建无JavaScript的下拉菜单和选项卡式导航,进一步简化了代码并优化了加载速度。 总的来说,这些CSS3的应用示例充分展示了其在网页设计中的潜力,它们不仅让网页更加...

Global site tag (gtag.js) - Google Analytics