很多天前就已經(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元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
