TOX - T Object
With TObject.Tab you can make a tab based navigation easily.
It is very easy to use, unobtrusive and lightweight (2.1kb)
Example:
With CSS:
- Tab 1
- Tab 2
- Tab 3
Panel 1
Panel 2
Panel 3
Without CSS:
- Tab 1
- Tab 2
- Tab 3
Panel 1
Panel 2
Panel 3
With CSS - Using Horinzontal Listamatic:
Panel 1
Panel 2
Panel 3
Panel 4
How to use it:
First, load the script.
<script src="./src/t.tab.js" type="text/javascript"></script>
<script type="text/javascript">
// low level onload. just an example;
window.onload=T.Tab.init;
</script>;
p.s.: You may call T.Tab.init() function after the unordered list is loaded.Second, make your unordered list.
<div id="ultab2">
<ul class="tablist" position="fixed">
<li id="tab21" class="active">Tab 1</li>
<li id="tab22"><a href="#">Tab 2</a></li>
<li id="tab23">Tab 3</li>
</ul>
</div>
Now, you must know all <ul> tags that has "tablist" class is going to be a tab list.
You can define which tab will be active after transformation putting the "active" class inside
the target <li>.
Take a look at id's of <li> elements, because they are needed to make panels work.
Third, make your panel list.
<div id="tab21p">Panel 1</div> <a id="tab22p">Panel 2</a> <span id="tab23p">Panel 3</span>
Remember to put the id for each panel element. This id must be the same as the <li> element that toggles that panel plus the 'p' letter.
if you needed to change these names, you can edit the .js file or reset these atributes:T.Tab.activeClass = "active2"
T.Tab.tabClass = "tablist2"