jQuery: creare un plugin per gestire i tab

La libreria jQuery UI già fornisce il metodo tabs(), che partendo da una struttura HTML la trasforma in una nuova struttura in cui la navigazione e gli elementi interagiscono in modo tale che ciascun link mostra il contenuto del tab corrispondente una volta cliccato. Tuttavia, se vogliamo avere un maggior controllo su questo sistema di navigazione e sui contenuti ad esso associati la strada da percorrere è quella di creare un nostro plugin. Vediamo come fare.

Partiamo dalla stessa struttura HTML proposta negli esempi della documentazione di jQuery UI:

<div id="tabs">
	<ul id="tabs-nav">
		<li><a href="#tabs-1">Primo</a></li>
		<li><a href="#tabs-2">Secondo</a></li>
		<li><a href="#tabs-3">Terzo</a></li>
	</ul>
	<div class="tab" id="tabs-1">...</div>
	<div class="tab" id="tabs-2">...</div>
	<div class="tab" id="tabs-3">...</div>
</div>

Ciascun tab è contraddistinto da un ID univoco che corrisponde all'ancora usata nei link della navigazione. Questo è il legame che useremo con jQuery. Inoltre ciascun tab è legato agli altri dalla medesima classe.

Assegniamo quindi degli stili di base alla nostra struttura:

body {
	margin: 0 auto;
	width: 50%;
	max-width: 600px;
	padding: 2em 0;
	font: 90% Arial, sans-serif;
}

#tabs {
	width: 100%;
}

#tabs-nav {
	height: 2em;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid #bbb;
}

#tabs-nav li {
	float: left;
	width: 5em;
	height: 100%;
}

#tabs-nav li a {
	float: left;
	width: 100%;
	height: 99%;
	line-height: 2;
	background: #f0f0f0;
	color: #333;
	text-decoration: none;
	text-align: center;
	border: 1px solid #bbb;
	border-bottom: none;
	border-radius: 5px 5px 0 0;
}

#tabs-nav li a.active {
	font-weight: bold;
}

La classe active verrà applicata di volta in volta sul link corrente del menu di navigazione tramite jQuery. Il nostro plugin sarà orientato agli oggetti, ossia la logica del plugin non verrà affidata a istruzioni jQuery inserite direttamente le namespace del plugin, ma gestita da un oggetto.

Cominciamo col definire le opzioni del nostro plugin, che sono:

1. un riferimento al menu di navigazione
2. un riferimento ai singoli tab
3. il nome della classe CSS da applicare al link di navigazione corrente

(function($) {

	$.fn.tab = function(options) {
	
		var that = this;
		var defaults = {
		
			menu: $('#tabs-nav', that),
			tabs: $('div.tab', that),
			activeClass: 'active'
		
		};
		
	options = $.extend(defaults, options);
	
	// continua
   };
   
})(jQuery);

that è un semplice modo per avere una copia cache dell'oggetto/elemento jQuery su cui verrà applicato il plugin. A questo punto dobbiamo creare il nostro oggetto, che eseguirà tre azioni:

1. nascondere i tab ad eccezione del primo e applicare la classe CSS scelta al primo link del menu di navigazione
2. su ciascun link, selezionare il valore dell'attributo href per avere un riferimento all'ID del tab corrispondente, mostrare quindi il tab attivo e applicare la classe CSS al link corrente facendo anche in modo che solo un tab per volta sia visibile e che solo un link per volta abbia la classe CSS scelta
3. inizializzare le azioni dell'oggetto

Ecco il codice:

// continua
var Tab = {
		
			prepare: function() {
				options.tabs.not(':first').hide();
				$('a:first', options.menu).addClass(options.activeClass);
			
			},
			
			handle: function() {
			
				$('a', options.menu).each(function() {
				
					var $a = $(this);
					var tabID = $a.attr('href');
					var currentTab = $(tabID);
					
					$a.click(function(event) {
					
						if(currentTab.is(':hidden')) {
						
							currentTab.show().parent().find(options.tabs).not(currentTab).hide();
							$a.addClass(options.activeClass).parents(options.menu).find('a').not($a).
							removeClass(options.activeClass);						
						}
					
						event.preventDefault();
					
					});
				
				});
			
			},
			
			init: function() {
			
				this.prepare();
				this.handle();
			
			}
		
};

Quindi lanciamo il metodo di inizializzazione dell'oggetto all'interno della tradizionale routine finale di ogni plugin jQuery:

return that.each(function() {
		
	Tab.init();
		
		
});

Infine, usiamo il plugin come sappiamo:

$(function() {

	$('#tabs').tab();

});

Potete visionare l'esempio finale in questa pagina.