You can nest tab interfaces easily but remember to set different tabclass for 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.js and include it in your webpage within <head> section. Alternatively you can put Yetii code inside your common.js file.
<!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 (tab in above case but this is configurable). Also all tabs should be wrapped with a container with id specified (tab-container-1 in above case). Unordered list inside a wrapper (which represents tabs buttons) should have an id constructed in following convention: wrapper-id + '-nav' (tab-container-1-nav in above case).
Note that Yetii will apply active class 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 Yetii will also apply activeli class 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 active to something else (i.e. selected), list item will be marked with selectedli class.
Initialize Yetii object:
<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 stops when user starts interacting with tabs. However if you specify wait parameter:
var tabber1 = new Yetii({
id: 'tab-container-1',
active: 2,
interval: 5,
wait: 10
});
and user clicks any tab, rotation will continue after the number of seconds defined by wait parameter.
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 tabclass for 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 Yetii instance to be selected by default when page A loads:
<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 parameter and also active parameter is specified, following importance hierarchy is used: