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

How to implement "Simple Tabview"?

Step 1: Include all necessary files into your page

prototype.js (get prototype)
tabview.js
tabview.css

Link these files in the <head>...</head> of your html file:

<script src="prototype.js" type="text/javascript">
<script src="tabview.js" type="text/javascript">
<link href="%3Cstrong%3Etabview.css%3C/strong%3E" 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 class "tab-collection" to it:

<ul class="tab-collection">
...
</ul>
Add tabs to the tabview by adding simple list elements <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: Screenshots-Simple-JavaScript-TabView-HTML-Code-002.png

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 (try the 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: Screenshots-Simple-JavaScript-TabView-001.png

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

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.

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

Compatibility
The tabview.js script works with

Firefox
Internet Explorer 6
Internet Explorer 7
Internet Explorer 8
Google Chrome
Opera
Safari
Flock
...

All browser versions mentioned below do work just fine:

Browser	Versions
Firefox	1.5 (Windows 2000) 2.0.0.14 (Windows 2000) 3.0 (Windows XP) 2.0.0.16 (Mac OS X 10.5) 3.0 (Mac OS X 10.5) 2.0.0.16 (FreeBSD 7.0) 2.0.0.16 (Ubuntu 7.10) 2.0.0.16 (FreeBSD 7.0) 3.0.1 (Fedora 7.1)
Internet Explorer	6.0 (Windows XP) 7.0 (Windows XP) 8.0 (Windows XP)
Google Chrome	0.2.149.30 (Windows XP)
Opera	9.60 (Windows XP) 9.52 (FreeBSD 7.0) 9.52 (Ubuntu 8.04
Safari	3.1.2 (Windows XP) 3.1.2 (Mac OS X 10.5) 4.0 (Mac OS X 10.5)
Flock	1.2.1 (Windows XP) 2.0 (Windows XP) 1.2.5 (Gentoo) 2.0.0.16 (Arch)
Epiphany	2.22 (FreeBSD 7.0) 2.22 (Ubuntu 8.04)
Galeon	2.0.6 (FreeBSD 7.0) 2.0.5 (Fedora 7)
Konqueror	3.5 (Ubuntu 8.04)
Seamonkey	1.1.9 (Windows XP) 2.0 (Windows XP) 1.1.11 (FreeBSD 7.0) 1.1.11 (Fedora 7) 2.0 (Ubuntu 8.04)

But see for yourself at browsershots.org

Mahalo!
- Andreas

1 Comments so far

Andreas Koch on Saturday, 11 September 2010 21:03

If you prefer jQuery over Prototype JS, check out my new jQuery-based, SEO-friendly JavaScript-TabView control:

http://andykdocs.de/andykdocs/document/A-simple-jQuery-Script-for-creating-SEO-friendly-and-accessible-TabView-controls

In the jQuery version of the TabView is the process of creating the control still the same as described in this document, but the JavaScript code is a little bit cleaner and more robust.

Greetings
– Andreas aka AndyK
link