jQuery: gestire i post dei blog con i tab

In questo articolo vorrei presentare una soluzione per gestire le categorie dei post di un blog nella home page. Sappiamo tutti che molti temi di WordPress usano ad esempio uno slideshow per i post in evidenza, un widget per quelli più popolari e per quelli più recenti. Sarebbe utile averli tutti in un unico blocco divisi per tab e gestirli tramite jQuery. Vediamo come.

La marcatura da usare è la seguente:

<div id="post-tabs">
	<ul id="post-tabs-nav">
		<li><a href="#featured" class="current">In evidenza</a></li>
		<li><a href="#recent">Recenti</a></li>
		<li><a href="#popular">Pi&ugrave; commentati</a></li>
	</ul>
	<div class="tab" id="featured">
		<ul>
			<li><a href="#">1. Lorem ipsum dolor sit amet</a></li>
			<li><a href="#">Ipsum dolor sit amet</a></li>
			<li><a href="#">Et ideo autem aquis</a></li>
			<li><a href="#">Lorem ipsum dolor sit amet</a></li>
			<li><a href="#">Ipsum dolor sit amet</a></li>
			<li><a href="#">Et ideo autem aquis</a></li>
		</ul>
	</div>
	<div class="tab" id="recent">
		<ul>
			<li><a href="#">2. Lorem ipsum dolor sit amet</a></li>
			<li><a href="#">Ipsum dolor sit amet</a></li>
			<li><a href="#">Et ideo autem aquis</a></li>
			<li><a href="#">Lorem ipsum dolor sit amet</a></li>
			<li><a href="#">Ipsum dolor sit amet</a></li>
			<li><a href="#">Et ideo autem aquis</a></li>
		</ul>
	</div>
	<div class="tab" id="popular">
		<ul>
			<li><a href="#">3. Lorem ipsum dolor sit amet</a></li>
			<li><a href="#">Ipsum dolor sit amet</a></li>
			<li><a href="#">Et ideo autem aquis</a></li>
			<li><a href="#">Lorem ipsum dolor sit amet</a></li>
			<li><a href="#">Ipsum dolor sit amet</a></li>
			<li><a href="#">Et ideo autem aquis</a></li>
		</ul>
	</div>
</div>

Usiamo i seguenti stili CSS:

#post-tabs {
	width: 30em;
	margin: 2em auto;
	font: 95% Georgia, serif;
}

#post-tabs-nav {
	margin: 0;
	padding: 0;
	list-style: none;
	height: 2em;
}

#post-tabs-nav li {
	float: left;
	height: 100%;
	margin: 0 0.4em 0 0;
}

#post-tabs-nav a {
	float: left;
	height: 100%;
	line-height: 2;
	padding: 0 1em;
	font-weight: bold;
	background: #222;
	color: #fff;
	text-decoration: none;
}

#post-tabs-nav a:hover {
	background: #c30;
}

#post-tabs-nav a.current {
	background: #c30;
}

#post-tabs div.tab {
	background: #eee;
	padding: 1em;
}

#post-tabs div.tab ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#post-tabs div.tab ul li {
	display: block;
	margin-bottom: 0.4em;
}

#post-tabs div.tab ul li a {
	display: block;
	padding: 0.3em;
	height: 100%;
	color: #222;
	text-decoration: none;
	border-bottom: 1px dotted;
}

#post-tabs div.tab ul li a:hover {
	background: #ccc;
	border-bottom: 1px solid;
}

#post-tabs #recent,
#post-tabs #popular {
	display: none;
}

Con jQuery dobbiamo associare un'azione a ciascun link del menu facendo in modo che il link corrente venga evidenziato con una classe corrispondente e che appaia il blocco di contenuto a cui il link punta tramite la sua ancora. Possiamo creare un semplice plugin per questo scopo:

(function($) {

	$.fn.postTabs = function(options) {
	
		var that = this;
		var defaults = {
			current: 'current',
			nav: '#post-tabs-nav',
			speed: 'slow'
		};
		
		options = $.extend(defaults, options);
		
		return that.each(function() {
		
			$('a', options.nav).click(function(event) {
			
				var $a = $(this);
				var tabId = $($a.attr('href'));
				
				tabId.fadeIn(options.speed)
				.siblings('div.tab')
				.hide();
				
				$a.addClass(options.current)
				.parents(options.nav)
				.find('a')
				.not($a)
				.removeClass(options.current);
				
				event.preventDefault();
			
			
			});	
		
		
		});
	
	
	};

})(jQuery);

Il plugin lo richiamiamo quando il DOM è pronto:

$(function() {

	$('#post-tabs').postTabs();

});

Potete visionare l'esempio finale in questa pagina.