The base code for starting everything is:
<ul class="tab-header"></ul>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="src/jquery.touchtabs.js"></script>
<script>
touchTabs = $('.tab-header').touchTabs();
touchTabs.createTab('tab1','Tab 1',true);
</script>
Whenever touchTabs is used to describe a variable, it is the variable name used when touchTabs() was created. This enables us to had many touch tabs running on the same page.
<div id="main_content_wrap" class="outer">
<section id="main_content" class="inner">
<style>
/* "#tab-container>div" selects the tab windows we make */
#tab-container>div {
overflow:auto;
height:100%;
width:100%;
background:#fff;
}
#tab-container>div {
display:none;
}
#tab-container>div.active {
display:block;
}
</style>
<ul class="tab-header"></ul>
<div id="tab-container"></div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="src/jquery.touchtabs.js"></script>
<script>
touchTabs = $('.tab-header').touchTabs();
touchTabs.on('tabclose', function(event,id){
$('#tab-contents-'+id).remove()
})
touchTabs.on('tabactivate', function(event,id){
$('#tab-container').find('div').removeClass('active')
$("#tab-contents-"+id).addClass('active')
})
$(function() {
// createPane is not implemented by the plugin, this makes it more versatile
// the createPane function is an example of how I set up my panes
var createPane = function(title,html){
// create a random hexadecimal for the tab id
var randId = Math.floor(Math.random()*16777215).toString(16)
// this tab-container is given an id we can easily refer back to
$('#tab-container').append('<div id="tab-contents-'+randId+'">'+html+'</div>')
// createTab tabid = randId, tab title = title, tab can be closed = false
touchTabs.createTab(randId,title,false)
// return randId for activating
return randId
}
var activateId = createPane("Getting Started",$('div#GettingStartedContent').html())
createPane("1. Tab Manipulation",$('div#TabManipulationContent').html())
createPane("2. How to use Events",$('div#EventsContent').html())
createPane("3. Styling Guide",$('div#StyleGuideContent').html())
touchTabs.activateTabById(activateId);
})
</script>
</section>
</div>
All tabs can be closed, activated, or retitled if you have their 'tabid' or "Tab Identifier". The tab identifier is not bound to the id of the element and therefore will less likely conflict with other libraries.
tabid the tabid is a tab idetifier, it does not affect css rules because it is assigned to a tabid attribute
title the name shown on the tab is defined by your title
closeable tabs can be created with or without the close button. And those made with the close button can be styled different than those made without closeability
// if tabs were used for your portfolio navigation
touchTabs.createTab("home","About Me",false);
// Always want people to be able to refer back to the about page so we set closeable=false
touchTabs.createTab("page1","Videos",true);
touchTabs.createTab("page2","Contact",true);
// People should be able to go to other pages and chose which ones to keep open so we set closeable=true
touchTabs.renameTabById("musiclist","View: Genre");
touchTabs.renameTabById("search","Search Genres");
// Tabs created without closeability are only closeable via javascript
touchTabs.closeTabById("search");
// Switch the active tab via javascript
touchTabs.activateTabById("musiclist2");
Events can be listened to using the 'touchTabs.on' function.
touchTabs.on(<eventtype>,function(event,tabid){
// event: default event passed with the trigger
// tabid: the tabid of the tab involved in this event
});
This event type is triggered when a tab is created. This trigger passes 3 variables to the function although the last one -- which is the tab's title -- is not necessary in many cases.
touchTabs.on("tabcreate",function(event,tabid){
// event: default event passed with the trigger
// tabid: the tabid of the tab that was created
});
touchTabs.on("tabcreate",function(event,tabid,title){
// event: default event passed with the trigger
// tabid: the tabid of the tab that was created
// title: the header text of the tab
});
This event type is triggered when the user "activates" a tab by clicking on it, or closing the currently active tab.
touchTabs.on("tabactivate",function(event,tabid){
// event: default event passed with the trigger
// tabid: the tabid of the tab that became active
});
This event type is triggered when the a tab is closed, which can be triggered by javascript or the user clicking the close button.
touchTabs.on("tabclose",function(event,tabid){
// event: default event passed with the trigger
// tabid: the tabid of the tab that was closed
});