性人久久久久,亚洲精选一区,日韩影院一区

很多天前就已經(jīng)看完jQuery實(shí)戰(zhàn)第四講了,不過一直沒有時(shí)間做筆記,呵呵,趁著今天有點(diǎn)空,上來記錄記錄...
這一講的內(nèi)容是制作tab菜單,所謂的tab菜單,也就是類似于OFFICE2007的界面菜單那樣子的,當(dāng)然,用在網(wǎng)頁(yè)上面的話我們只是需要鼠標(biāo)滑過就顯示相應(yīng)的內(nèi)容而不必點(diǎn)擊了,效果圖如下:

在這節(jié)課里講到了二個(gè)tab菜單的制作,第一個(gè)沒有用到AJAX,每個(gè)菜單對(duì)應(yīng)的內(nèi)容都是事先已經(jīng)在網(wǎng)頁(yè)里的,只是把他們隱藏了而已,而第二個(gè)就用到了AJAX實(shí)時(shí)的提取內(nèi)容數(shù)據(jù).其實(shí)整個(gè)JS代碼的編寫也并不是很復(fù)雜,本人覺得難的主要在于CSS的編寫上,如何才能讓菜單與內(nèi)容進(jìn)行無縫結(jié)合...
以下是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實(shí)戰(zhàn)-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">
            菜單一的內(nèi)容</div>
        <div>
            菜單二的內(nèi)容</div>
        <div>
            菜單三的內(nèi)容</div>
    </div>
    <br />
    <br />
    <br />
    <div id="tab2">
        <ul>
            <li class="tabin first">獲取整個(gè)網(wǎng)頁(yè)內(nèi)容</li>
            <li>獲取網(wǎng)頁(yè)部分內(nèi)容</li>
            <li>獲取handler輸入的內(nèi)容</li>
        </ul>
        <div id="container">
            <div id="loading"><img src="images/loading.gif" alt="loading" /> 數(shù)據(jù)提取中,請(qǐng)稍候...</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;  /* 移上該元素上時(shí)鼠標(biāo)為手形 */
}
#tab1 div {
    width: 300px;
    height: 100px;
    background-color: #8A4B04;
    display: none; /* 默認(rèn)不顯示 */
    padding: 10px;
    clear: left;
}
.first {  /* 第一個(gè)tab菜單 */
    margin-left:10px;
}
#tab1 .contentin {  /* 當(dāng)前菜單對(duì)應(yīng)的DIV的樣式 */
    display: block;
}
#tab1 .tabin { /* 當(dāng)前菜單的樣式 */
    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;  /* 移上該元素上時(shí)鼠標(biāo)為手形 */
}
#tab2 #container {
    width: 600px;
    height: 200px;
    border: 1px solid #9EC9FE;
  /* margin-top: -1px;  如果用這條樣式的話那只是在IE里能出現(xiàn)缺口*/
    padding: 20px;
    position: relative;
    top: -1px;
    clear: left;
}
#tab2 .tabin {
    border-bottom: 1px solid #fff;
    position:relative;   /* 要讓z-index產(chǎn)生效果,則必須把元素的position設(shè)置為relative或者absolute */
    z-index: 100;
}

以下是tab.js的源碼:

    
var timeoutid;    // 延遲處理時(shí)使用
$(function() {
    $("#tab1 li").each(function(index) {  // index為當(dāng)前菜單的索引,從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");  // 顯示相應(yīng)的DIV塊的內(nèi)容
                liNode.addClass("tabin"); // 給當(dāng)前菜單加上tabin樣式
            }, 300);
        });
    }).mouseout(function() {
        clearTimeout(timeoutid);
    });

    //在整個(gè)頁(yè)面裝入完成后，標(biāo)簽效果2的內(nèi)容區(qū)域需要裝入靜態(tài)的html頁(yè)面內(nèi)容
    $("#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"); // 給當(dāng)前菜單加上tabin樣式
                switch (index) {
                    case 0:
                        $("#tab2 #container #content").load("tab.htm");  // 提取網(wǎng)頁(yè)全部?jī)?nèi)容
                        break;
                    case 1:
                        $("#tab2 #container #content").load("tab.htm h2");   // 提取網(wǎng)頁(yè)部分內(nèi)容
                        break;
                    case 2:
                        // 提取handler的輸出內(nèi)容, 加個(gè)參數(shù)防止頁(yè)面緩存
                        $("#tab2 #container #content").load("handler/tab.ashx?t=" + new Date().getTime());  
                        break;
                }
            }, 300);
        }).mouseout(function() {
            clearTimeout(timeoutid);
        });
    });

    //對(duì)于loading圖片綁定ajax請(qǐng)求開始和交互結(jié)束的事件
    $("#tab2 #loading").bind("ajaxStart", function() {
        $("#tab2 #container #content").text(""); 
        $(this).show();
    }).bind("ajaxStop", function() {
        $(this).hide();
    });
});

在這里我們還使用了loading圖片,讓他綁定jQuery提供給我們的ajaxStart和ajaxStop事件.
為了能讓我們的loading看到更好的效果,我在handler里用了線程,讓他暫停3秒后再執(zhí)行輸出代碼,以下是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秒后再執(zhí)行以下代碼
        context.Response.Write("這是Handler輸出的內(nèi)容!");
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

另外還有一個(gè)靜態(tài)頁(yè)面用于測(cè)試第二個(gè)tab菜單的第一項(xiàng)和第二項(xiàng)-載入靜態(tài)頁(yè)面,以下是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講的測(cè)試網(wǎng)頁(yè)</title>
</head>
<body>
<h2>第4講的測(cè)試網(wǎng)頁(yè)</h2>
<p>今晚打老虎!!!</p>
</body>
</html>

其實(shí)不只是靜態(tài)頁(yè),即使是動(dòng)態(tài)頁(yè)如ASPX等,jQuery里的load方法也能載入,jQuery中的load方法其實(shí)也就是相當(dāng)于一個(gè)簡(jiǎn)化了的AJAX提交而已...
以上就是這節(jié)課的內(nèi)容,我會(huì)附上源碼的,我是在vs2008下測(cè)試的!
以上代碼兼容ie6,7,8,opera,ff,chrome

jQuery實(shí)戰(zhàn)(四) - tab菜單

更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系： 360901061

您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對(duì)您有幫助就好】元

2元

5元

10元

20元

自定義

日韩久久久精品,亚洲精品久久久久久久久久久,亚洲欧美一区二区三区国产精品 ,一区二区福利