You can define custom function to run after certain tab is clicked:
function customfunction(tabnumber) {if (tabnumber==3) alert('You clicked tab number 3'); }var tabber1 = new Yetii({id: 'tab-container-1',callback: customfunction});If needed you can invoke tab showing method like this:
<a href="#tab3" onclick="tabber1.show(3); return false;">show Tab 3</a>Click hereto show Tab 3
You can nest tab interfaces easily but remember to set different tabclassfor nested interface:
var tabber2 = new Yetii({id: 'demo-nested',tabclass: 'tab-nested'});Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Yetii also contains methods allowing to paginate between tabs using next/previous buttons:
var tabber1 = new Yetii({id: 'demo'});<a href="javascript:tabber1.previous()">previous</a> |<a href="javascript:tabber1.next()">next</a>Download yetii.jsand include it in your webpage within <head>section. Alternatively you can put Yetiicode inside your common.jsfile.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><script type="text/javascript" src="yetii.js"></script></head>Prepare the markup:
<body><div id="tab-container-1"> <ul id="tab-container-1-nav"> <li><a href="#tab1">tab 1</a></li> <li><a href="#tab2">tab 2</a></li> </ul> <div class="tab"id="tab1"> <h2>tab 1</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> <div class="tab"id="tab2"> <h2>tab 2</h2> <p>It was popularised in the 1960s with the release of Letraset sheets.</p> </div> </div></body>All tabs should have correct class applied (tabin above case but this is configurable). Also all tabs should be wrapped with a container with idspecified (tab-container-1in above case). Unordered list inside a wrapper (which represents tabs buttons) should have an idconstructed in following convention: wrapper-id + '-nav'(tab-container-1-navin above case).
Note that Yetiiwill apply activeclass to selected tab link dynamically:
<ul id="tab-container-1-nav"><li class="activeli"><a class="active"href="#tab1">tab 1</a></li><li><a href="#tab2">tab 2</a></li></ul>By convention Yetiiwill also apply activeliclass to list item holding selected tab link. All classes set in markup for list items and links are preserved when adding active classes. If you change default active class name from activeto something else (i.e. selected), list item will be marked with selectedliclass.
Initialize Yetiiobject:
<body><div id="tab-container-1"> <ul id="tab-container-1-nav"> <li><a href="#tab1">tab 1</a></li> <li><a href="#tab2">tab 2</a></li> </ul> <div class="tab"id="tab1"> <h2>tab 1</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> <div class="tab"id="tab2"> <h2>tab 2</h2> <p>It was popularised in the 1960s with the release of Letraset sheets.</p> </div> </div><script type="text/javascript">var tabber1 = new Yetii({id: 'tab-container-1'});</script></body>If you would like to specify initial tab (i.e. second):
var tabber1 = new Yetii({id: 'tab-container-1', active: 2});If you would like to override default class names:
var tabber1 = new Yetii({id: 'tab-container-1', active: 2,interval: 5,tabclass: 'mycustomclass',activeclass: 'mycustomactivetabclass'});If you would like to turn on automatic tabs rotation (specify time interval in seconds):
var tabber1 = new Yetii({id: 'tab-container-1', active: 2,interval: 5});Rotation stopswhen user starts interacting with tabs. However if you specify waitparameter:
var tabber1 = new Yetii({id: 'tab-container-1', active: 2,interval: 5,wait: 10});and user clicks any tab, rotation will continueafter the number of seconds defined by waitparameter.
var tabber1 = new Yetii({id: 'demo'});<a href="javascript:tabber1.previous()">previous</a> |<a href="javascript:tabber1.next()">next</a>You can nest tab interfaces easily but remember to set different tabclassfor nested interface:
var tabber1 = new Yetii({id: 'demo'});var tabber2 = new Yetii({id: 'demo-nested',tabclass: 'tab-nested'});If needed you can invoke tab showing method like this:
<a href="#tab3" onclick="tabber1.show(3); return false;">show Tab 3</a>You can define custom function to run after certain tab is clicked:
function customfunction(tabnumber) {if (tabnumber==3) alert('You clicked tab number 3'); }var tabber1 = new Yetii({id: 'tab-container-1',callback: customfunction});You can define custom function to run when user leaves certain tab:
function customfunction(tabnumber) {if (tabnumber==1) alert('Leaving tab ' + i + ' ...'); }var tabber1 = new Yetii({id: 'tab-container-1',leavecallback: customfunction});var tabber1 = new Yetii({id: 'tab-container-1'});The following link (presumably on page B) causes the 2nd tab within the above Yetiiinstance to be selected by default when page Aloads:
<a href="pageA.html?tab-container-1=2">2nd tab within tab-container-1 on page A</a>You can also use tab's DOM id instead of numerical value:
<a href="pageA.html?tab-container-1=tab2">2nd tab within tab-container-1 on page A</a>Also you can pass tab's DOM id inside location.hash:
<a href="pageA.html#tab2">2nd tab within tab-container-1 on page A</a>var tabber1 = new Yetii({id: 'tab-container-1',persist: true});Persistence is based on session cookies (expiring as soon as one closes the browser). In situations where persistence is on, there is an URL parameterand also activeparameter is specified, following importance hierarchy is used: