很多天前就已經看完jQuery實戰第四講了,不過一直沒有時間做筆記,呵呵,趁著今天有點空,上來記錄記錄...
這一講的內容是制作tab菜單,所謂的tab菜單,也就是類似于OFFICE2007的界面菜單那樣子的,當然,用在網頁上面的話我們只是需要鼠標滑過就顯示相應的內容而不必點擊了,效果圖如下:
在這節課里講到了二個tab菜單的制作,第一個沒有用到AJAX,每個菜單對應的內容都是事先已經在網頁里的,只是把他們隱藏了而已,而第二個就用到了AJAX實時的提取內容數據.其實整個JS代碼的編寫也并不是很復雜,本人覺得難的主要在于CSS的編寫上,如何才能讓菜單與內容進行無縫結合...
以下是tab.aspx的源碼:
以下是tab.css的源碼:
以下是tab.js的源碼:
在這里我們還使用了loading圖片,讓他綁定jQuery提供給我們的ajaxStart和ajaxStop事件.
為了能讓我們的loading看到更好的效果,我在handler里用了線程,讓他暫停3秒后再執行輸出代碼,以下是tab.ashx的源碼:
另外還有一個靜態頁面用于測試第二個tab菜單的第一項和第二項-載入靜態頁面,以下是tab.htm的源碼:
其實不只是靜態頁,即使是動態頁如ASPX等,jQuery里的load方法也能載入,jQuery中的load方法其實也就是相當于一個簡化了的AJAX提交而已...
以上就是這節課的內容,我會附上源碼的,我是在vs2008下測試的!
以上代碼兼容ie6,7,8,opera,ff,chrome
這一講的內容是制作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
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
