Simple JavaScript Tab View based on Prototype JS

A fairly simple prototype based tab view function which renders simple html lists into navigable tabbed views of content.
created by on 2008-08-22

Create a Simple Tab View just like this one with four simple steps:

Screenshot of TabView created from html markup code (Keywords: Tabview, JavaScript, Screenshot, Development)

How does Simple Tabview work?

It turns a simple html ul-list into a navigable tabview by surrounding it with a container-element and inserting tab-headers for each <li>-entry:

Tabview DOM-Layout schema (JPEG) illustrates how the tabview script turns a simple &lt;ul&gt;-list into a navigable tabview (Keywords: Tabview, Screenshot, Development)

Step 1: Include all necessary files into your page**

Link the files in the <head> of your page:

<script src="prototype.js" type="text/javascript" />
<script src="tabview.js" type="text/javascript" />
<link href="tabview.css" rel="stylesheet" type="text/css" />

Note: Keep in mind that the prototype frameworks is quite big, so this only makes sense to use this solution if you load prototype.js anyways!

Step 2: Create a html ul- or ol-list which shall be transformed into a tabview

Create a <ul>-list and apply the css class tab-collection to it:

<ul class="tab-collection">
...
</ul>

Add tabs to the tabview by adding simple list elements

```html
<li title="tab headline">...</li>

with a title attribute which defines the headline for each tab:

<li title="Tab1 Headline"> Yada Yada Tab 1</li>
<li title="Tab 2 Headline"> Lorem ipsum Tab 2</li>
<li title="..."> ... </li>
<li title="Tab X Headline"> Some Content</li>

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Tabview - Demo</title>
	
	<script src="prototype.js" type="text/javascript"></script>	
	<script src="tabview.js" type="text/javascript"></script>
	
	<link href="tabview.css" rel="stylesheet" type="text/css" />

</head>
<body id="body">

<!--
/*
 * ANDYK DOCS TAB VIEW
 * Version: 1.0 
 * 2008-08-20
 * based on protoype 1.6.0.1 framework
 * Author: Andreas Koch
 * 
 * files: tabview.css, prototype.js, tabview.js
 */
-->

<ul class="tab-collection">
	<li class="tab" title="Tab1">
    <h1>Tab 1</h1>
    <img src="http://farm4.static.flickr.com/3073/2630215649_f5e1810507_m.jpg" border="0">
  </li>
  
	<li class="tab" title="Tab2">
    <h1>Tab 2</h1>
    <img src="http://farm4.static.flickr.com/3034/2710864894_3d8b4c2256_m.jpg" border="0">    
  </li>
  
	<li class="tab" title="Tab3">
    <h1>Tab 3</h1>
    <img src="http://farm3.static.flickr.com/2285/2262581074_87015da879_m.jpg" border="0">
  </li>
</ul>

<script type="text/javascript">
	UI.Tabview.init('body', { width: '500px' });
</script>

</body>
</html>

Step 3: Initialize the tabview

Add this JavaScript block at the bottom of your website.

The JavaScript method UI.Tabview.init(root,options) will render each tab collection which is a child element of root into a tabview.

Example function call UI.Tabview.init():

UI.Tabview.init(
	'containerid',
	{
		width: '500px',
		activeColorBackground: 'black',
		activeColorText: 'white',
		inactiveColorBackground: 'white',
		inactiveColorText: 'black'
	}
);

Note: The options are not mandatory - If they are not set, the function will use default values.

Step 4: View the result

A <ul>-list like this will look something like the screenshot below (demo: tabview-demo.html):

<ul class="tab-collection">
	<li class="tab" title="Tab1">
		<h3>Tab 1</h3>
		<img src="image1.jpg" border="0" />
	</li>

	<li class="tab" title="Tab2">
		<h3>Tab 2</h3>
		<img src="image2.jpg" border="0" />
	</li>

	<li class="tab" title="Tab3">
		<h3>Tab 3</h3>
		<img src="image3.jpg" border="0" />
	</li>
</ul>

Screenshot of a Tabview in action:

Screenshot of TabView created from html markup code (Keywords: Tabview, JavaScript, Screenshot, Development)
A-simple-

Customize the Look & Feel

Feel free to modify the look of your tabview by changing some of the colors, the padding or text style or even the JavaScript-Function. There is no magic behind and the layout should stay intact as long as you don’t mess with the the float, position, width or margin-attributes.

Known Limitations
If you have too many tabs it will look crappy.

Compatibility
The tabview.js script works with

But see for yourself at browsershots.org.

Mahalo!
- Andreas

Shortlink:
Tags: