Tweet
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

Jump to the Demo Download examples pack Feedback / Feature request / Report bug Blog post Post a comment


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:

Example of many tabs / without jQuery scrollableTabs

Try adding new tabs
$('#example_1').tabs()//jQuery ui tabs
Add new tab
Tab 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
This is tab 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
This is tab number 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
Tab no 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
And this is the tab number 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
Tab number 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
And last tab number 7
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.

Solution:

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

Main features:

Tested on:

with:

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.

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;
});
Add new tab
Tab 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
This is tab 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
This is tab number 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
Tab no 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
And this is the tab number 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
Tab number 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
And last tab number 7
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.

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;
});
Add new tab
Tab 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
This is tab 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
This is tab number 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
Tab no 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
And this is the tab number 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
Tab number 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.
And last tab number 7
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus a sagittis congue, molestie tempus felis. Donec convallis semper enim, varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis a aliquam neque ornare. Proin sed semper lacus.

Try resizing the tabs container