Buy me a cup of coffee if you like this :)

jQuery-ui Scrollable tabs plugin v1.0 Download source file ↓ | jQuery project home | Google project home |    Contact: aamirafridi(at)gmail(dot)com

Updates on Version 2.0

If anyone want to contribute, click here and read the todo list in js source file.
I have been working on another version which I feel is better than above (github link) one. It works with latest version of jQuery and jQuery UI. All features are not available but stable version can be downloaded from HERE.

Problem/issues?

Here is the fiddle which you can modify > save and send me the link in your email to explain what sort of issues you have.

Are you using scrollable tabs?

If you are using scrollable tabs in any of your project and its live, than I will be more than happy to display the links here so people can see the plugin in action. Please email me the link of your live project.

UPDATES: (14 May 2010) thanks to John from Greece for the tips

var $tabs= $('#tabs').tabs().scrollabletab();
//Add new tab
$tabs.trigger('addTab',[label,content]);
});
//OR
$tabs.tabs('add','#'+tabId,label);
});

Why I like jQuery scrollabe tab's "addTab" event to add new tab?

While using jQuery-ui tabs 'add' method to add new tab, you have to create a new div with content, give it a unique id, append it to the body and than use jQuery-ui tab's "add" method to add the tab.
But using jQuery scrollabe tab's "addTab" event you don't have worry about appending a div to the body or a unique id. It will take care itself. All it requires is a label and content(string/jQuery object - which will be appended to the body of the new tab)

Bottom line:

If just want the scrollable functionality and you don't want the plugin to handle any adding or removing tabs functionality, than just use:

var $tabs = $('#tabs').tabs().scrollabletab();

and use jQuery-ui tabs defaults method to add or remove tabs.
Download example pack for details

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 of many tabs / without jQuery scrollableTabs

$('#example_1').tabs()//jQuery ui tabs

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

• jQuery 1.3.2 and 1.4.2
• jQuery UI 1.7.2 and 1.8.1

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:

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

Start the plugin:

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.
• onTabClose (default: 'function(){}') Function that will be called after the tabs has been closed.
• Event: 'addTab' an event to add new tab which tabs the label and content element as arguments (see examples for details)

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;
});
/*
OR
UPDATE: Now tab can also be added using jQuery-ui tabs method
*/
$('#addTab').click(function(){
	var label = keywords[Math.floor(Math.random()*keywords.length)]
	content = 'This is the content for the '+label+'Lorem ipsum dolor sit amet, ...';
	rnd = Math.floor(Math.random()*10000);
	$('body').append('<div id="'+rnd+'">'+content+'</div>');
	$tabs.tabs('add','#'+rnd,label);
	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;
});
/*
OR
UPDATE: Now tab can also be added using jQuery-ui tabs method
*/
$('#addTab').click(function(){
	var label = keywords[Math.floor(Math.random()*keywords.length)]
	content = 'This is the content for the '+label+'Lorem ipsum dolor sit amet, ...';
	rnd = Math.floor(Math.random()*10000);
	$('body').append('<div id="'+rnd+'">'+content+'</div>');
	$tabs.tabs('add','#'+rnd,label);
	return false;
});