Dopo aver parlato di alcuni plugins interessanti per jQuery è arrivato il turno di creare facilmente dei tabs dove inserire diverso contenuto per meglio ottimizzare e organizzare il layout delle pagine.
Per questo motivo vi introduco a idTabs che è un plugin molto leggero, la versione 2.2 è di circa 2.29 KB e il suo utilizzo risulta facilmente applicabile.
Come sempre è necessario includere la libreria:
Naturalmente il mio consiglio è quello di scaricare la versione packed e di caricarla sul proprio spazio web, tra l'altro sempre sul sito dell'autore troverete un link 'view source' che mostra un pannello con il codice dell'ultima versione.
Una volta importata è sufficiente definire degli elementi <li> racchiusi fra tag <ul> e associare un id univoco (in realtà è possibile anche applicarlo a più elementi in un colpo solo)
Il codice di esempio base sarà quindi qualcosa tipo:
Risulta possibile anche delle operazioni più complesse, ossia possiamo creare una struttura di elementi <li> con univoci id e successivamente caricarci del contenuto complesso non solo formato da testo, ma di contenuto multimediale o a fronte di una richiesta ajax, come nell'esempio:
C'è anche la possibilità di eseguire delle operazioni su eventi di hover piuttosto che il classico click, o slegando il contenuto dal classico tabbed pane ma andando a modificare alcune parti della pagina. In pratica come plugin risulta molto svincolato dal suo utilizzo e cerca (secondo me in maniera ottima) di rendere le cose più semplici per chi lo utilizza, ovviamente non è niente di estremamente nuovo ma penso che data la sua leggerezza e la sua duttilità possa essere considerato un ottimo plugin di cui considerarne tutti i lati positivi (e negativi) e se è il caso di annoverarlo fra i propri plugins.
Collegamenti esterni: jQuery | idTabs (jQuery) | idTabs (Author) | demo
<script type="text/javascript" src="jquery.idTabs.min.js"></script>
Naturalmente il mio consiglio è quello di scaricare la versione packed e di caricarla sul proprio spazio web, tra l'altro sempre sul sito dell'autore troverete un link 'view source' che mostra un pannello con il codice dell'ultima versione.
Una volta importata è sufficiente definire degli elementi <li> racchiusi fra tag <ul> e associare un id univoco (in realtà è possibile anche applicarlo a più elementi in un colpo solo)
Il codice di esempio base sarà quindi qualcosa tipo:
<div id="adv1" class="usual">
<ul>
<li><a href="#t1">Tab 1</a></li>
<li><a href="#t2" class="selected">Tab 2</a></li>
<li><a href="#t3">Tab 3</a></li>
</ul>
<div id="t1" style="display: none; ">This is tab 1.</div>
<div id="t2" style="display: block; ">More content in tab 2.</div>
<div id="t3" style="display: none; ">Tab 3 is always last!</div>
</div>
<script type="text/javascript">
var settings = { start:1, change:false };
$("#adv1 ul").idTabs(settings,true);
</script>
Risulta possibile anche delle operazioni più complesse, ossia possiamo creare una struttura di elementi <li> con univoci id e successivamente caricarci del contenuto complesso non solo formato da testo, ma di contenuto multimediale o a fronte di una richiesta ajax, come nell'esempio:
<span id="adv3">
<a href="#cake">Cake</a> vs <a href="#pie">Pie</a>
<p id="cake">Cake is great</p>
<p id="pie">So is pie</p>
<div id="message"></div>
</span>
<script type="text/javascript">
$("#adv3").idTabs(function(id){
switch(id){
case "#cake": $("#message").html("It's so delicous and moist!"); break;
case "#pie":
$.ajax({
url: 'http://www.esempiosito.it/prova.php',
type: 'POST',
data: { q: 'esempio' },
dataType: 'json',
timeout: 45000,
cache: false,
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#message").html("error");
},
success: function (data, textStatus) {
$("#message").html("Pie from ajax, cooool");
}
});
break;
} return true;
});
</script>
C'è anche la possibilità di eseguire delle operazioni su eventi di hover piuttosto che il classico click, o slegando il contenuto dal classico tabbed pane ma andando a modificare alcune parti della pagina. In pratica come plugin risulta molto svincolato dal suo utilizzo e cerca (secondo me in maniera ottima) di rendere le cose più semplici per chi lo utilizza, ovviamente non è niente di estremamente nuovo ma penso che data la sua leggerezza e la sua duttilità possa essere considerato un ottimo plugin di cui considerarne tutti i lati positivi (e negativi) e se è il caso di annoverarlo fra i propri plugins.
Collegamenti esterni: jQuery | idTabs (jQuery) | idTabs (Author) | demo