jQuery: dividere il contenuto di un documento in tab

  • jQuery
  • Gabriele Romanato

La divisione di un documento in tab navigabili è un'operazione che richiede poco impegno con jQuery nella fase esecutiva. Infatti tutto quello che ci occorre è associare un evento click a ciascun tab e usare il suo attributo href per selezionare la parte di contenuto da mostrare. Quello che invece richiede un'attenta analisi è il modo con cui questi tab vengono costruiti e associati al contenuto. Vediamone insieme i dettagli.

La marcatura

La marcatura finale appare così strutturata:


<div id="container">

	<ul class="tabs">
		<li>
			<a href="#tab_content_primary_01" class="current">Tab Link 01</a>
		</li>
		<li>
			<a href="#tab_content_primary_02">Tab Link 02</a>
		</li>
		<li>
			<a href="#tab_content_primary_03">Tab Link 03</a>
		</li>
		<li>
			<a href="#tab_content_primary_04">Tab Link 04</a>
		</li>
		<li>
			<a href="#tab_content_primary_05">Tab Link 05</a>
		</li>
	</ul>
	
	<div class="tab_content_wrap">
		<div id="tab_content_primary_01" class="tab_content">...</div>
		<div id="tab_content_primary_02" class="tab_content">...</div>
		<div id="tab_content_primary_03" class="tab_content">...</div>
		<div id="tab_content_primary_04" class="tab_content">...</div>
		<div id="tab_content_primary_05" class="tab_content">...</div>
	</div>
</div>

Come si può notare, il valore dell'attributo href di ciascun tab corrisponde all'ID dei vari elementi del contenuto principale aventi la classe tab_content. Ma come si genera questa struttura?

Usando un linguaggio lato server come PHP, noterete che il menu dei tab è una struttura fissa in cui gli unici elementi mutabili sono i valori degli attributi href dei link. Allo stesso modo, gli elementi del contenuto principale hanno degli ID progressivi (01, 02, eccetera). Quindi dovete:

  1. Eseguire una query nel database per ottenere il numero di elementi facenti parte del contenuto.
  2. Generare gli elementi del menu di navigazione con un ciclo foreach usando un contatore interno per generare la numerazione progressiva degli attributi href.
  3. Dalla stessa query, ottenere i contenuti per i singoli elementi ripetendo la stessa operazione vista al punto 2.

Quindi:


$id = 0;
$html = '';

foreach($results as $result) {

	$id++;
	
	$html .= '<div id="tab_content_primary_0' . $id . 
			 '" class="tab_content">' . $result['content'] . '</div>' . "\n";

}

Stili CSS

Gli stili CSS prevedono che inizialmente tutti gli elementi del contenuto siano nascosti:


.tabs {
	overflow: hidden;
	border-bottom: 1px solid #ccc;
	font: 100% Arial, sans-serif;
	margin: 0 20px;
	padding: 0;
}

.tabs li,
.tabs a {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.tabs li {
	background: #fff;
	border: 1px solid #ccc;
	border-bottom-width: 0;
	display: inline;
	float: left;
	list-style: none;
	margin: 0 5px 0 0;
	padding: 1px 1px 0 0;
	text-align: center;
	width: 120px;
}

.tabs a {
	border: 1px solid #eee;
	border-bottom-width: 0;
	color: #999;
	display: block;
	padding: 5px 0;
	text-decoration: none;
}

.tabs a.current {
	background: #ccc url(gradient.gif) repeat-x;
	color: #000;
}

.tabs a:hover {
	background: #666;
	border-color: #666;
	color: #fff;
}

* html .tabs a {
	height: 1%;
}

.tab_content_wrap {
	margin: 0 0 20px 0;
	padding: 20px 20px 5px 20px;
	width: 598px;
	font-family: Georgia, serif;
	line-height: 1.4;
}

.tab_content {
	display: none;
}

Il tab attivo (corrente) avrà la classe CSS current, che gestiremo con jQuery.

Il codice jQuery

Con jQuery dobbiamo usare il valore dell'attributo href di ciascun tab per selezionare gli elementi con uguale ID. Allo stesso tempo dobbiamo fare in modo che solo un elemento del contenuto sia visibile quando si clicca su un tab. Infine, quando un tab viene selezionato deve ricevere la classe current:


function tabs() {

	if (!$('ul.tabs').length) {

	
		return;
	}

	
	$('div.tab_content_wrap').each(function() {
		$(this).find('div.tab_content:first').show();
	});


	$('a', 'ul.tabs').click(function(event) {


		if (!$(this).hasClass('current')) {

		
			$(this).addClass('current').parent('li').siblings('li').find('a.current').removeClass('current');

			
			$($(this).attr('href')).show().siblings('div.tab_content').hide();
		}

		event.preventDefault();
	});
}

$(document).ready(function() {
	
	tabs();
});

Usando il selettore siblings() facciamo in modo che venga mostrato solo un elemento alla volta. Allo stesso modo, sempre tramite questo selettore aggiungiamo la classe current solo al tab corrente.

Potete visionare l'esempio finale in questa pagina.

Torna su