xaseTabs

• As simple as it gets.
• Extremely extensible thanks to custom events.
• Preload specific tabs via URL-Hashes. This even works with multiple Tab instances on a single page since you can define what instance should be selected.
• Customizable trigger event: Define what event causes the trigger of activating a new tab. Changing tabs on hover? No problem.
• Completely control how your tabs are activated: You can even use the xaseTabs plugin to create acordeon-style modules by overwriting the “activate” event.
• Completely control how your tabs look: xaseTabs comes with no CSS and HTML requirements whatsoever.
• Nice Code. xaseTabs validate with jslint. and the development code is well commented.
• xaseTabs is very Lightweight. It’s less than 4KB packed

You can download xaseTabs from google code. Then go ahead and include your copy of jQuery and xaseTabs at the bottom of your page. Replace the path of the xaseTabs Plugin with whatever folder you have put the plugin in. Then, add you custom code to initialize the xaseTabs:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> </script>
<script src="http://www.yourserver.com/js/jquery.xaseTabs.latest.js" type="text/javascript"> </script>
<script type="text/javascript">
   $('.tabs').xaseTabs({
	extend: xaseTabsExtension
   });
</script>

You can also checkout a working copy from the xaseTabs SVN Repository.

xaseTabs comes with a set of options to allow maximum flexibility – besides the ability to rewrite nearly the entire plugin via custom events. You can alter the defaults by providing your options as an object to xaseTabs:

$('.tabs').xaseTabs({
	tabSelector: 'li a',
	activeClass: 'act',
	autoInitialize: false
});

namespace {string}

Default: ‘xaseTabs’ – Namespace, will be added to the all events and url-hashes…

tabSelector {string}

Default: ‘li’ – The selector of tabs relative to the element the xaseTabs plugin is called on. Default is an “li” inside the selected tab ul.

panelSelector {string}

Default: ‘~ div’ – The Selector of panels relative to the element the xaseTabs plugin is called on. Default are siblings of the selected tab ul.

activeAttribute {string}

Default: ‘selected’ – Attribute to check if predefined tab should be selected via url-hash. Could also be “#”.

activeClass {string}

Default: ‘active’ – Class name that’s assigned to active tabs and panels.

triggerEvent {string}

Default: ‘click’ – Event that triggers the activate event. Namespace will be added.

activateBindFunction {function} (not implemented yet)

Default: null – If you want to bind the activate event on yourself you can use this function

hashAttribute {string}

Default: ‘.’ – CSS-Selector Attribute that will be checked to match a URL hash (#xaseTabsHASHATTR-1) for activating a specific tab. Alternative: “#”.

autoInitialize {boolean}

Default: true – If you want to trigger the initialization phase manually, set this flag to false.

extend {function}

Default: null – Here, you can pass a function that extends the default customEvents object with your own functions. Please reade the next chapters for detailed instruction on how to create such a function.

xaseTabs is based on custom events – that’s why it’s so extensible. The custom events life inside a private customEvents object:

var customEvents = {
    initialize: [function(options) {
        this.bind("initialize." + options.namespace,
        function(e) {
            // ...
        });
    }],

    setupPanels: [function(options) {
        this.bind("setupPanels." + options.namespace,
        function(e) {
        	// ...
        });
    }],

    setupTabs: [function(options) {
        this.bind("setupTabs." + options.namespace,
        function(e) {
			// ...
        });
    }],

    activate: [function(options) {
        this.bind("activate." + options.namespace,
        function(e, selected) {
        	// ...
        });
    }]
};

For a detailed description of this functions, read the next chapter “Custom Events – here to serve you“. Those events will be bound onto the calling element upon initialisation. Before the binding happens, you can extend that array and add your own functions or disable the default functions altogether with e.preventDefault(); How would you do this? Simply create a function that gets the “customEvents” object passed and add this to the configuration object inside the “extend” key. Within the customEvents object you can push or unshift new functions into the function arrays. Lets say you have the Tabs-Plugin inside a lightbox – and that lightbox should adapt the size of the panel upon changing a tab. You would simply insert a function that calls the resize function after the default activate function has been triggered. So you push a function to the end of the customEvents.activate array that will be called after the tab has been activated:

// Create a functions that receives the customEvents
var xaseTabsExtension = function(customEvents){
	// Select the desired function and add functionality:
	customEvents.activate.push(function(options) {
    	// Bind your new extension to the Element that calls
		// the tabs (not the individual tabs!)
	    this.bind("activate." + options.namespace,
	    function(e, selected) {
	        // Do whatever you like upon the "activate"
	        // event has been triggered
	        $.fancybox.resize();
	    });
	});
	// don't forget to return the modified event Object
	return customEvents;
}

After you have done so, you can call the xaseTabs function and pass this function withhin your options-object inside the extend key:

$('.tabs').xaseTabs({
	extend: xaseTabsExtension
});

If you’d like to add ajax functionality, you would unshift (instead of push) the customEvents.activate array, and add this ajax-function before the default function to loads the content dynamically…

For the concept behind evented progarming, read this article by Yehuda Katz.

If you have any feedback, go ahead and leave a comment, or write me an e-mail to “jquery at noelboss . ch”. If you would like to see a feature added, or if you have found a bug, let me know…

If you have written a cool extension for the xaseTabs plugin – let’s say it now produces coffee on every tab-click –then, send me a copy in order that I can link it here! Some ideas for extension:

• Adding keyboard support
• Saving state of the tabs via cookie
• Adding history support (with BBQ)
• …

» How do I manually activate a Tab?

Just select the Tab and call the click event (or whatever event you configured with options.triggerEvent)

$(.tabs li:eq(3)).click();

» How is this accordion thing done on this page?

With the xaseTabs-plugin – of-course…

$(document).ready(function(){
	var xaseTabsExtension = function(customEvents) {
		customEvents.activate.unshift(function(options) {
			this.bind("activate."+options.namespace,
				function(e, selected) {
					e.preventDefault();
					var $t = $(this);
					var $selected = $(selected);
					var $panel = $selected.data('$panel');
					$t.data('$panels').not($panel).slideUp();
					$panel.slideDown();
					$t.data('$tabs').removeClass("active");
					$selected.addClass("active");
			});
		});
		return customEvents;
	};
	$('.tabs').xaseTabs({
		extend: xaseTabsExtension
	});
});

» Why don’t you add (insert your feature here) feature to the plugin?

xaseTabs is so extensible that you would be better of implementing that specific feature by yourself – I want to keep xaseTabs lean and clean. If you have a cool extension to this plugin, go ahead and comment or send me an e-mail or leave a comment…

» What does «xase» mean?

eXtensible And Simple Evented. It’s based on “evented programing“

» How can I contact you?

Write a comment or send me an e-mail to jquery at noelboss . ch

» xaseTabs is so cool, can I donate some money?

Course you can – go ahead!