jQuery-ui Scrollable tabs plugin v1.0

• Project home: http://jquery.aamirafridi.com/jst
• Demo: http://jquery.aamirafridi.com/jst/#examples
• jQuery project home: http://plugins.jquery.com/project/scrollabletabs
• Source code: http://jquery.aamirafridi.com/jst/js/jquery.scrollabletab.js

Problem:

Using jQuery-ui tabs we should know the number of tabs so that we can adjust the width of the tabs wrapper so all the tabs can adjust itself. But what if we want to add the tabs dynamically with javascript? To solve this problem I google for some sort of plugins but I found no proper jQuery plugin so that we can have two arrows (next and previous) to navigate through tabs. I found two links:

• http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html - not jQuery
• http://www.seyfertdesign.com/jquery/ui.tabs.paging.html - jQuery but with no animations and works with window.resize only? What if I add a new tab with javascript?

EXAMPLE 1 on: http://jquery.aamirafridi.com/jst

Solution:

The solution is jQuery scrollableTabs with many features you might need.

Main features:

• make tabs closable
• control animation speed
• control easing
• can make the wrapper resizable (depends on jQueryUi.resizable plugin)
• navigate to last tab onload
• Support jQuery themeroller
• No extra CSS code/file needed
• Automatically navigate and show the full tab if clicked on partially hidden tab
• Built-in event to add new tab

Tested on:

• Firefox 3.6+
• IE7, 8
• Opera 10.10+
• Chrome 5.0+
• Safari 4.0+
• //IE6 has the overflow issue. If some can fix it please send me the solution at aamirafridi(at)gmail(dot).com//

with:

• jQuery 1.3.2 and 1.4.2
• jQuery UI 1.7.2 and 1.8.

How to use?

You just need to include jQuery.scrollabletabs plugin and of course jQuery.core and jQueryui.core files

Javascript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollabletab.js"></script>

CSS:

Any jQuery ui theme you want

<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />

Start the plugin:

You should apply jQuery ui tabs plugin before appling jQuery.scrollableTabs

var $tabs = $('#tabs')
		.tabs()//jQuery ui tabs
		.scrollabletab()//jQuery scrollable tabs

Plugin options:

You start plugin without any of these features i.e Plugin is capable of being start without any options provided with default options.

• animationSpeed //(default: 100)// Length of the animation.
• closable //(default: false)// User can close the tab / but cannot close if there is only one tab remaining
• resizable //(default: false)// User can resize the tabs wrapper
• resizeHandles //(default: 'e,s,se')// The directions that user can resize the tabs wrapper in.(http://jqueryui.com/demos/resizable/#option-handles)
• loadLastTab //(default: false)// If true than tabs will animate to the last tab when loaded.
• easing //(default: 'swing')// Name of the easing equation.
• Event: 'addTab' an event to add new tab which tabs the label and content element as arguments (see examples for details)

Examples:

Result at: http://jquery.aamirafridi.com/jst/#examples

Start plugin without any options:

var $tabs= $('#tabs').tabs().scrollabletab();
//Add new tab
$('#addTab').click(function(){
	var label = 'New tab',
	    content = 'This is the content for the '+label+'Lorem ipsum dolor sit amet, ...'; //Content can be a jQuery object
	//Event to add new tab
	$tabs.trigger('addTab',[label,content]);
	return false;
});

Start plugin with options

var $tabs= $('#tabs')
	.tabs()
	.scrollabletab({
		'closable':true, //Default false
		'animationSpeed':50, //Default 100
		'loadLastTab':true, //Default false
		'resizable':true, //Default false
		'resizeHandles':'e,s,se', //Default 'e,s,se'
		'easing':'easeInOutExpo' //Default 'swing'
	});
//Add new tab
$('#addTab').click(function(){
	var label = 'New tab',
	    content = 'This is the content for the '+label+'Lorem ipsum dolor sit amet, ...'; //Content can be a jQuery object
	//Event to add new tab
	$tabs.trigger('addTab',[label,content]);
	return false;
});