To the B/s development era, the page front-end layout also the tab page layout form absorbed over. In particular, combined with Ajax technology, you can more fully play the tab page of good performance and data caching advantages, is a good form of Web page layout.
There are many tabs on the web, the implementation is similar, but the code is messy, to really use, must be laborious to thoroughly grasp it, in order to carry out two custom development, for my use. Actually implementing this tab interface is very simple, just sneak through Ajax technology to get information, and then rotate the display in one area (by showing and hiding layers, or by reusing a layer, in turn to fill the inside HTML data).
The development of their own code the most clear, use should be the most convenient, to expand the brain also do not faint. The code is as follows and is still being modified.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8″/>
<title> My Tabs tab (Ajax version) </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 configuration information
var tabs = ["#tab0 ″," #tab1 ″, "#tab2 ″]; Tab Array ID
var datas = "#div_data"; ID number of the display area object
var event_type = "MouseOver"; Trigger Event (click/dblclick/mouseover/focus/...)
var default_tab = "#tab0 ″;
Toggle Picture
var tab_selected_bgimg = "Images/green.png";
var tab_unselected_bgimg = "Images/gray.png";
Toggle text Color
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: Fixed code *********************************
for (var i=0; i<tabs.length; i++)
{
$ (tabs[i]). Bind (Event_type, handler);
}
$ (Default_tab). Trigger (Event_type);
//
function handler ()
{
Initializing a cached array
var localdatas = new Array (); Cache Browser this time data
for (var i=0; i<tabs.length; i++)
{
Localdatas[i]= ";
}
Reset All 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 fetch data (default Method=get)
$.ajax
({
Url:urls[curr_index],//Background handler
Cache:false,
timeout:20000,
Error:function ()
{
Alert ("Error while submitting");
},
Success:function (data)
{
Localdatas[curr_index] = data; Cache Browser this time data
$ (datas). HTML (data);
}
});
}
Else
{//Display cached data
$ (datas). HTML (Datas[curr_index]);
}
}
**end: Fixed code *********************************
—————–
});
</script>
<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>
Read this article can refer to the next article using jquery technology to implement the TAB interface of the second
This article comes from: Cloud Habitat Community (www.jb51.net) Detailed source reference: http://www.jb51.net/article/20091.htm
