Tab頁界面用jQuery及Ajax技術實現(php后臺)

更新時間：2011年10月12日 21:48:20 作者：

到了B/S開發(fā)時代，網頁前端布局也把Tab頁的布局形式吸收了過來。特別是和Ajax技術結合起來，可以更充分發(fā)揮Tab頁的良好表現力和數據緩存的優(yōu)勢，是一種良好的網頁布局形式

網上的Tab頁代碼很多，實現也大同小異，但代碼都顯得凌亂，若要真的用的話，必須費勁的吃透它，才能進行二次定制開發(fā)，為我所用。實際上實現這個Tab頁界面非常簡單，僅僅是通過Ajax技術偷偷的獲取信息，然后在一塊區(qū)域輪流顯示而已(通過顯示和隱藏層，或復用一個層，輪流向里邊填充Html數據)。
自己的開發(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選項卡(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 數組 id 
var datas = “#div_data”; //顯示區(qū)對象的id號 
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() 
{ 
//初始化緩存數組 
var localdatas = new Array(); //緩存瀏覽器本次數據 
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獲取數據(默認method=get) 
$.ajax 
({ 
url: urls[curr_index], //后臺處理程序 
cache: false, 
timeout: 20000, 
error:function() 
{ 
alert(”error while submitting”); 
}, 
success:function(data) 
{ 
localdatas[curr_index] = data; //緩存瀏覽器本次數據 
$(datas).html(data); 
} 
}); 
} 
else 
{ //顯示緩存數據 
$(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文件：
代碼如下:

復制代碼代碼如下:

 
<?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; 
} 
?> 