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.

Web 2.0 Box Generator

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

Faith

2009-10-22 06:13:26

do we need the prototype.js file to make the tab panels work?

Jeet Lal Patel

2009-06-27 02:54:40

i want to download these demo coding.whether is it possible? thanks jeet.mail72@gmail.com

Ipsg007

2009-03-10 09:03:32

very very nice.. good work done.. thanks ..

Dharmesh

2008-10-31 23:07:06

good very nice

Zidan

2008-06-24 22:08:28

thanks, good work

No Comment

2008-06-20 13:11:49

You can set each tab with a different color by CSS

AP Mart

2008-06-05 09:39:46

Very nice. I wish it will work on my site. Thanks!

Oyunlar

2008-05-16 15:47:54

How can i set every tab with different colors.

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