很多天前就已經(jīng)看完jQuery實戰(zhàn)第四講了,不過一直沒有時間做筆記,呵呵,趁著今天有點空,上來記錄記錄...
這一講的內(nèi)容是制作tab菜單,所謂的tab菜單,也就是類似于OFFICE2007的界面菜單那樣子的,當然,用在網(wǎng)頁上面的話我們只是需要鼠標滑過就顯示相應的內(nèi)容而不必點擊了,效果圖如下:
在這節(jié)課里講到了二個tab菜單的制作,第一個沒有用到AJAX,每個菜單對應的內(nèi)容都是事先已經(jīng)在網(wǎng)頁里的,只是把他們隱藏了而已,而第二個就用到了AJAX實時的提取內(nèi)容數(shù)據(jù).其實整個JS代碼的編寫也并不是很復雜,本人覺得難的主要在于CSS的編寫上,如何才能讓菜單與內(nèi)容進行無縫結(jié)合...
以下是tab.aspx的源碼:
以下是tab.css的源碼:
以下是tab.js的源碼:
在這里我們還使用了loading圖片,讓他綁定jQuery提供給我們的ajaxStart和ajaxStop事件.
為了能讓我們的loading看到更好的效果,我在handler里用了線程,讓他暫停3秒后再執(zhí)行輸出代碼,以下是tab.ashx的源碼:
另外還有一個靜態(tài)頁面用于測試第二個tab菜單的第一項和第二項-載入靜態(tài)頁面,以下是tab.htm的源碼:
其實不只是靜態(tài)頁,即使是動態(tài)頁如ASPX等,jQuery里的load方法也能載入,jQuery中的load方法其實也就是相當于一個簡化了的AJAX提交而已...
以上就是這節(jié)課的內(nèi)容,我會附上源碼的,我是在vs2008下測試的!
以上代碼兼容ie6,7,8,opera,ff,chrome
這一講的內(nèi)容是制作tab菜單,所謂的tab菜單,也就是類似于OFFICE2007的界面菜單那樣子的,當然,用在網(wǎng)頁上面的話我們只是需要鼠標滑過就顯示相應的內(nèi)容而不必點擊了,效果圖如下:
在這節(jié)課里講到了二個tab菜單的制作,第一個沒有用到AJAX,每個菜單對應的內(nèi)容都是事先已經(jīng)在網(wǎng)頁里的,只是把他們隱藏了而已,而第二個就用到了AJAX實時的提取內(nèi)容數(shù)據(jù).其實整個JS代碼的編寫也并不是很復雜,本人覺得難的主要在于CSS的編寫上,如何才能讓菜單與內(nèi)容進行無縫結(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實戰(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">獲取整個網(wǎng)頁內(nèi)容</li> <li>獲取網(wǎng)頁部分內(nèi)容</li> <li>獲取handler輸入的內(nèi)容</li> </ul> <div id="container"> <div id="loading"><img src="images/loading.gif" alt="loading" /> 數(shù)據(jù)提取中,請稍候...</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里能出現(xiàn)缺口*/ padding: 20px; position: relative; top: -1px; clear: left; } #tab2 .tabin { border-bottom: 1px solid #fff; position:relative; /* 要讓z-index產(chǎn)生效果,則必須把元素的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塊的內(nèi)容 liNode.addClass("tabin"); // 給當前菜單加上tabin樣式 }, 300); }); }).mouseout(function() { clearTimeout(timeoutid); }); //在整個頁面裝入完成后,標簽效果2的內(nèi)容區(qū)域需要裝入靜態(tài)的html頁面內(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"); // 給當前菜單加上tabin樣式 switch (index) { case 0: $("#tab2 #container #content").load("tab.htm"); // 提取網(wǎng)頁全部內(nèi)容 break; case 1: $("#tab2 #container #content").load("tab.htm h2"); // 提取網(wǎng)頁部分內(nèi)容 break; case 2: // 提取handler的輸出內(nèi)容, 加個參數(shù)防止頁面緩存 $("#tab2 #container #content").load("handler/tab.ashx?t=" + new Date().getTime()); break; } }, 300); }).mouseout(function() { clearTimeout(timeoutid); }); }); //對于loading圖片綁定ajax請求開始和交互結(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; } } }
另外還有一個靜態(tài)頁面用于測試第二個tab菜單的第一項和第二項-載入靜態(tài)頁面,以下是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講的測試網(wǎng)頁</title> </head> <body> <h2>第4講的測試網(wǎng)頁</h2> <p>今晚打老虎!!!</p> </body> </html>
其實不只是靜態(tài)頁,即使是動態(tài)頁如ASPX等,jQuery里的load方法也能載入,jQuery中的load方法其實也就是相當于一個簡化了的AJAX提交而已...
以上就是這節(jié)課的內(nèi)容,我會附上源碼的,我是在vs2008下測試的!
以上代碼兼容ie6,7,8,opera,ff,chrome
更多文章、技術(shù)交流、商務合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯(lián)系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
