Next Prev

Ajax Tabs

This workshop we will be building a tabbed content browser that’s Ajax powered. When ever a user clicks a tab the Ajax will communicate with the server and send back the appropriate data for that tab. We will start this workshop off with the XHTML and CSS for the tabbed content browser. We will need 3 main IDs (one for the container, one for the content area and one for the loading status) and 1 class (for the tabs).

The first ID #container will hold the tabs as well as the content area, we only give this a width which everything inside can inherit. The following class .tabs is going to style our tabs, most of the styling we have is mostly for looks an important property is the float:left. The float:left makes the tabs so they are on the same horizontally aligned, this can also be done with using display:inline but with a little more tweaking. We also gave it a property of cursor:pointer so when the user mousses over the tab that it has the look and feel of a button. Finally we have the ID #content.

Visit PhpDaddy.com

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<!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>
<base href="http://www.ajaxdaddy.com/ajax/ajax-tabs/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax Workshop 2: Building Tabbed Content</title>
<script type="text/javascript" src="javascript/prototype.js"></script>

<style type="text/css">
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}
#container {
	width:450px;
  background-color: #52616F;
  color: white;
}
.tabs {
	width:50px;
	margin-right:10px;
	padding:4px;
	text-align:center;
	float:left;
	cursor:pointer;
	border:1px solid #ccc;
	border-bottom:0;
}
#content {
	height:350px;
	clear:both;
	border:1px solid #ccc;
}
#load {
	position:absolute;
	left:0;
	top:0;
	width:100px;
	height:20px;
	background-color:red;
	color:white;
	display:none;
}
</style>
</head>
<body >

<center>
<div id="load">Loading...</div>
	<div id="container">
	<div class="tabs" id="tab1">Tab 1</div>
	<div class="tabs" id="tab2">Tab 2</div>
	<div class="tabs" id="tab3">Tab 3</div>
	<div class="tabs" id="tab4">Tab 4</div>
	<div id="content"></div>
</div>
</center>

<script type="text/javascript">
function init () {
var tabs = document.getElementsByClassName('tabs');
	for (var i = 0; i < tabs.length; i++) {
		$(tabs[i].id).onclick = function () {
			getTabData(this.id);
		}
	}
}
function getTabData(id) {
	var url = 'demos/ajax-tabs/process.php';
	var rand = Math.random(9999);
	var pars = 'id=' + id + '&rand=' + rand;
	var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} );
}
function showLoad () {
	$('load').style.display = 'block';
}
function showResponse (originalRequest) {
	var newData = originalRequest.responseText;
	$('load').style.display = 'none';
	$('content').innerHTML = newData;
}
init();
</script>
</body>
</html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

SPS

2008-04-01 12:29:36

NIce

Hamed

2008-03-26 04:12:59

Nice

Dream

2008-03-06 05:37:28

Good!

Joker

2008-02-25 01:09:16

how to set the script to load every tab on page loading? that will make tab switching instant

Andrea

2007-11-28 13:29:35

I'll try it on my blog. Great!!

Eric

2007-10-08 22:54:06

dont' support iframe

Sachin Jain

2007-09-03 22:35:53

Great script , the only problem i find is the tabs width is not flexible, i have to dynamically generate the tabs and i dont know the width of each tabs ... Any suggestion

Sam Stanley

2007-08-19 20:35:22

Seems pretty slow to load the images.

Mohsin

2007-07-22 23:24:00

Nice enough

Very Goog

2007-07-07 16:38:34

wergtwertye

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Ajax Tabs

Comment on this example