View on GitHub

rTab - Simple Tab Navigation.

Download this project as a .zip file Download this project as a tar.gz file

What is rTab

A Simple Web Application Tab Navigation Based on Prototype.js

There are several tab solutions for other Javascript frameworks and now, here is one for my favourite Prototype.js

Tested on Firefox 17, Chrome 14, Internet Explorer 8, 9

HTML code

You should use the following HTML structure to get it work.


<div id="rTab">
	<ul id="rTabHead">
		<li><a href="#">Tab #1</a></li>
		<li><a href="#">Tab #2</a></li>
	</ul>
	<div id="rTabContent">
		<div>Content for tab #1</div>
		<div>Content for tab #2</div>
	</div>
</div>
					 

You could add as much tabs as you want by adding new `li` elements for the "rTabHead" `ul` list, and same number of new `div`-s to "rTabContent" `div`.

In tab contents all valid HTML code could be used.

You could change the order of "rTabHead" and "rTabContent" in your HTML code if you want.

CSS

No CSS required for the package, it will work without any CSS rules.

Perhaps if you want to have something which looks nicely, you should use something like we used for this example page.


#rTabHead{
	list-style-type: none;
}

#rTabHead li{
	float: left;
	margin: 0 0.2em -2px 0.2em;
	padding: 0.2em 1em;
	background-color: #dfd8d1;
	border: thin solid gray;
	border-bottom: none;
}

#rTabHead li:hover{
	background-color: #eed;
}

#rTabHead li.rTabActiveHead{
	background-color: #ffefdf;
}

#rTabHead li a{
	text-decoration: none;
}

#rTabContent{
	clear: both;
	border: thin solid gray;
	padding: 1em;
	background-color: #ffefdf;
}
	 				

How to use

You should add prototype.js and rTab.js to your HTML header.


<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="rTab.js"></script>
					 

You should have the HTML code suggested in the HTML tab.

The package will use the first tab as the active tab on start. If you want to use an other tab then go to the last line of `rTab.js` and change `rTab.init();` to `rTab.init(2);` for starting with tab 3. Do not forget, indexes starts at 0 not 1, so if you want to start with your 3rd tab you should add 2 as the index number.


document.observe('dom:loaded', function(){
	rTab.init(2);	//show tab #3 on start
});
					 

Examples

  1. This page itself could be used as Example #1
  2. Different tab header position and bordering Example #2
  3. Switched order of rTabHead and rTabContent in HTML Example #3
  4. Start with 3rd tab Example #4

License

This package is freely distributable under the terms of an MIT-style license.