Dynamicaly generate a Web Safe Color palette with JavaScript

JavaScript

When working with jQuery UI tabs it is really easy to dynamically add tabs. You just use UI’s “add” method as specified in the documentation: .tabs( ‘add’ , url , label , [index] ). But there is no method for dynamically adding a close button so the tabs can be removed. Here is a quick little script I wrote to do just that.

$(function() {
		//DECLARE FUNCTION: removetab
		var removetab = function(tabselector, index) {
			$(".removetab").click(function(){
				$(tabselector).tabs('remove',index);
			});
		 };

		//create tabs
		$("#tabs").tabs({
		   add: function(event, ui) {
		   		//select newely opened tab
				$(this).tabs('select',ui.index);
				//load function to close tab
				removetab($(this), ui.index);
		   },
		   show: function(event, ui) {
		   		//load function to close selected tabs
				removetab($(this), ui.index);
		   }
		});

		//load new tab
		$(".addtab").click(function(){
			var href=$(this).attr("href");
			var title=$(this).attr("title");
			$("#tabs").tabs( 'add' , href , title+'  ');
			return false;
		});

	});

Usage is simple. Just add class “.addtab” to the links you want opened in a tab, and make sure the link has “title” attribute set as it is used for the tab label.

Add Tab

Here is an example:

Add Tab

Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

Improvements

To avoid adding of duplicate tabs. a function should be added that checks if a specific tab was already added. It should be easy to do. I’ll just need to find time to do it.

Update: 02/26/2010

If you don’t want to use jQuery UI, but would like to achieve similar effect, visit JankoAtWarpSpeed.com.

Do you like this or find it useful? Drop me a note or treat me to a double-espresso from my favorite coffee shop.

Related Posts:

0 comments