MyTabz - Example

Prototype / Plugin / Tabs

Tested On

IE 6 PC
Firefox PC
Opera 9.x PC

How to Use

in body section of your web page:

write your HTML code (see example bellow)

in head section of your web page:

define CSS for tabs (you can use CSS from this example)
include Prototype library
include MyTabz plugin

HTML

  <div id="tabs">
	<div id="t1" class="my_tab">
		<h5 class="tab_title">Tab 1</h5>
		<p>
			tab1: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce eget pede. Ut faucibus urna. Donec sagittis. Suspendisse bibendum tortor sed metus. Vivamus aliquet. Sed mi dolor, sollicitudin sed, commodo sed, vestibulum cursus, ligula. Cras laoreet bibendum ante. Sed tristique quam id tellus. Donec sodales. Integer sit amet diam vitae tellus iaculis tincidunt. Curabitur mauris nulla, blandit id, eleifend at, facilisis adipiscing, urna. Vestibulum vel metus. Mauris lacinia, lectus nec tincidunt dictum, tortor erat pretium nulla, a cursus arcu neque vel nunc. Sed consectetuer laoreet est. Duis nec augue. Maecenas eu ipsum nec lectus feugiat iaculis. Suspendisse a nisl vitae neque consectetuer bibendum. Quisque non nulla.
			Vivamus rhoncus, nisl quis elementum malesuada, nisi ligula aliquet ligula, sed fringilla ipsum lectus in leo. Quisque semper faucibus nunc. Nunc elit lacus, nonummy eu, egestas ultricies, ullamcorper sed, ipsum. Nulla elit lectus, venenatis id, fermentum ut, fringilla vel, erat. Morbi lorem urna, consectetuer ut, blandit id, dapibus sit amet, nunc. Nam nec nisi. Maecenas congue. Sed pulvinar imperdiet neque. Aenean aliquam nunc. Nunc feugiat nonummy felis. Integer diam justo, egestas commodo, hendrerit eget, blandit id, massa. Ut nec nunc. Cras dui purus, auctor sit amet, auctor sed, scelerisque eu, leo. Nullam erat lectus, mollis ut, molestie eget, dapibus ut, nisl. Aenean aliquet enim. Nunc arcu lacus, viverra rutrum, elementum a, posuere sed, risus. In hac habitasse platea dictumst. Sed facilisis vehicula orci. 
		</p>	
	</div>
	<div id="t2" class="my_tab">
		<h5 class="tab_title">Tab 2</h5>
		<p>
			tab2: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce eget pede. Ut faucibus urna. Donec sagittis. Suspendisse bibendum tortor sed metus. Vivamus aliquet. Sed mi dolor, sollicitudin sed, commodo sed, vestibulum cursus, ligula. Cras laoreet bibendum ante. Sed tristique quam id tellus. Donec sodales. Integer sit amet diam vitae tellus iaculis tincidunt. Curabitur mauris nulla, blandit id, eleifend at, facilisis adipiscing, urna. Vestibulum vel metus. Mauris lacinia, lectus nec tincidunt dictum, tortor erat pretium nulla, a cursus arcu neque vel nunc. Sed consectetuer laoreet est. Duis nec augue. Maecenas eu ipsum nec lectus feugiat iaculis. Suspendisse a nisl vitae neque consectetuer bibendum. Quisque non nulla.
			Vivamus rhoncus, nisl quis elementum malesuada, nisi ligula aliquet ligula, sed fringilla ipsum lectus in leo. Quisque semper faucibus nunc. Nunc elit lacus, nonummy eu, egestas ultricies, ullamcorper sed, ipsum. Nulla elit lectus, venenatis id, fermentum ut, fringilla vel, erat. Morbi lorem urna, consectetuer ut, blandit id, dapibus sit amet, nunc. Nam nec nisi. Maecenas congue. Sed pulvinar imperdiet neque. Aenean aliquam nunc. Nunc feugiat nonummy felis. Integer diam justo, egestas commodo, hendrerit eget, blandit id, massa. Ut nec nunc. Cras dui purus, auctor sit amet, auctor sed, scelerisque eu, leo. Nullam erat lectus, mollis ut, molestie eget, dapibus ut, nisl. Aenean aliquet enim. Nunc arcu lacus, viverra rutrum, elementum a, posuere sed, risus. In hac habitasse platea dictumst. Sed facilisis vehicula orci. 
		</p>	
	</div>
  .
  .
  .
  .
  </div>

Javascript

First, Initialise Class. First argument ('tabs') is ID of div that contains all tabs, second('div.my_tab') is class of single tab divs.
Valid format for second argument is also '.my_tab', or 'div#tabs div.my_tab'

  var MyTabs= new mt('tabs','div.my_tab');

Now we can remove h5 elements, since we don't need them anymore...

  MyTabs.removeTabTitles('h5.tab_title');

Next, we add tabs. First parameter is ID of div that holds that tab, second is title.

  
  MyTabs.addTab('t1','tab 1');
  MyTabs.addTab('t2','tab 2');
  MyTabs.addTab('t3','tab 3');
  MyTabs.addTab('t4','tab 4 - Long Title');

Finaly, we activate tab #3;

  
 MyTabs.makeActive('t3');