快捷導(dǎo)航

Tab頁界面，用jQuery及Ajax技術(shù)實(shí)現(xiàn)

更新時(shí)間：2009年09月21日 17:13:38 作者：

從桌面開發(fā)的時(shí)代開始，Tab頁就是一個(gè)優(yōu)異的界面布局形式，兼有菜單的樣式和充分復(fù)用有限的界面的優(yōu)點(diǎn)。

到了B/S開發(fā)時(shí)代，網(wǎng)頁前端布局也把Tab頁的布局形式吸收了過來。特別是和Ajax技術(shù)結(jié)合起來，可以更充分發(fā)揮Tab頁的良好表現(xiàn)力和數(shù)據(jù)緩存的優(yōu)勢(shì)，是一種良好的網(wǎng)頁布局形式。
網(wǎng)上的Tab頁代碼很多，實(shí)現(xiàn)也大同小異，但代碼都顯得凌亂，若要真的用的話，必須費(fèi)勁的吃透它，才能進(jìn)行二次定制開發(fā)，為我所用。實(shí)際上實(shí)現(xiàn)這個(gè)Tab頁界面非常簡(jiǎn)單，僅僅是通過Ajax技術(shù)偷偷的獲取信息，然后在一塊區(qū)域輪流顯示而已(通過顯示和隱藏層，或復(fù)用一個(gè)層，輪流向里邊填充Html數(shù)據(jù))。
自己的開發(fā)的代碼自己最清楚，用起來也應(yīng)該最順手，要擴(kuò)展的話腦子也不犯暈。代碼如下，還在不斷修改中。

復(fù)制代碼代碼如下:

 
<!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> 
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> 
<title>我的Tabs選項(xiàng)卡(Ajax版本)</title> 
<style type=”text/css”> 
body {font-size:12px; } 
#tab0,#tab1,#tab2 {background:url(images/gray.png); cursor:hand;} 
</style> 
<script type=”text/javascript” src=”jquery/jquery.js”></script> 
<script type=”text/javascript” src=”class.js”></script> 
<script type=”text/javascript” src=”my_ajax_tabs.js”></script> 
<script type=”text/javascript”> 
$(document).ready(function() 
{ 
//————————- 
//tabs 配置信息 
var tabs = [”#tab0″, “#tab1″, “#tab2″]; //tab 數(shù)組 id 
var datas = “#div_data”; //顯示區(qū)對(duì)象的id號(hào) 
var event_type = “mouseover”; //觸發(fā)事件(click/dblclick/mouseover/focus/…) 
var default_tab = “#tab0″; 
//切換圖片 
var tab_selected_bgimg = “images/green.png”; 
var tab_unselected_bgimg = “images/gray.png”; 
//切換文本顏色 
var tab_selected_txtcolor = “#ff6600″; 
var tab_unselected_txtcolor = “#666666″; 
// 
urls = [ 
“my_ajax_server.php?app=tab0″, 
“my_ajax_server.php?app=tab1″, 
“my_ajax_server.php?app=tab2″, 
] 
//**Begin:固定代碼********************************* 
for (var i=0; i<tabs.length; i++) 
{ 
$(tabs[i]).bind(event_type, handler); 
} 
$(default_tab).trigger(event_type); 
// 
function handler() 
{ 
//初始化緩存數(shù)組 
var localdatas = new Array(); //緩存瀏覽器本次數(shù)據(jù) 
for (var i=0; i<tabs.length; i++) 
{ 
localdatas[i]=”; 
} 
//重置所有tabs 
for (var i=0; i<tabs.length; i++) 
{ 
$(tabs[i]).css(”background-image”, “url(”+ tab_unselected_bgimg +”)”); 
$(tabs[i]).css(”color”, tab_unselected_txtcolor); 
} 
var curr_index; 
for(var i=0;i<tabs.length;i++) 
{ 
if($(tabs[i]).attr(”id”)==$(this).attr(”id”)) 
{ 
curr_index = parseInt(i); 
} 
} 
// 
$(this).css(”background-image”, “url(”+ tab_selected_bgimg +”)”); 
$(this).css(”color”, tab_selected_txtcolor); 
if(localdatas[curr_index]==”) 
{ 
//ajax獲取數(shù)據(jù)(默認(rèn)method=get) 
$.ajax 
({ 
url: urls[curr_index], //后臺(tái)處理程序 
cache: false, 
timeout: 20000, 
error:function() 
{ 
alert(”error while submitting”); 
}, 
success:function(data) 
{ 
localdatas[curr_index] = data; //緩存瀏覽器本次數(shù)據(jù) 
$(datas).html(data); 
} 
}); 
} 
else 
{ //顯示緩存數(shù)據(jù) 
$(datas).html(datas[curr_index]); 
} 
} 
//**End:固定代碼********************************* 
//—————– 
}); 
</script> 
</head> 
<body> 
<table border=”0″ width=”500″ height=”25″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″> 
<tr> 
<td width=”97″ id=”tab0″>tab0</td> 
<td width=”30″></td> 
<td width=”97″ id=”tab1″>tab1</td> 
<td width=”30″></td> 
<td width=”97″ id=”tab2″>tab2</td> 
<td width=”149″></td> 
</tr> 
</table> 
<table border=”1″ width=”500″ height=”60″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″> 
<tr> 
<td> 
<div id=”div_data”></div> 
</td> 
</tr> 
</table> 
</body> 
</html> 

my_ajax_server.php文件：

復(fù)制代碼代碼如下:

 
<?php 
/******************************************* 
* File: my_ajax_server.php 
********************************************/ 
error_reporting(7); 
set_magic_quotes_runtime(0); 
$app = $_GET['app']; 
switch ($app) 
{ 
case “tab0″: // 
?> 
from TAB0 
<?php 
break; 
case “tab1″: // 
?> 
from TAB1 
<?php 
break; 
case “tab2″: // 
?> 
from TAB2 
<?php 
break; 
default: 
echo ‘my_ajax_server.php error.'; 
break; 
} 
?> 