Un effetto molto gradevole ed utile nell’economia di un sito web è senz’altro un’interfaccia a tab. JQuery permette di crearne di complesse ma la volontà di questo articolo è descriverne uno base, semplice, ma comunque funzionale e facilmente adattabile a molte esigenze.

Il risultato è questo: demo

Nel pacchetto Note: There is a file embedded within this post, please visit this post to download the file.
oltre allo script jQuery, troverete anche i file e la cartella:

• index.htm
• style.css
• scripts.js
• cartella images

Passo 1 – creazione delle immagini

Decidete quanti tab sono necessari al vostro progetto (nel mio caso 3). Se non siete bravi in grafica e design cercate su internet le immagini che concettualmente si avvicinano al contenuto di ogni tab.
Modificate le dimensioni tenendo conto dello spazio che volete utilizzare.
A questo punto duplicate la vostra immagine e modificatela con effetti a piacere. Una volta terminato, create una nuova immagine ed incollate sopra la figura modificata e sotto la figura originale. (vedi immagine)

Passo 2 – file HTML e CSS

Se aprite il file index.html troverete:

<ul id="tabMenu">  
     <li class="tabrss selected"></li> <!-- bottone di default-->  
     <li class="tabpost"></li>  
    <li class="tabcom"></li>  
</ul>

Nel file style.css, il div “tabMenu” è associato a:

li.tabcom  {background:url(images/tabcom.png) no-repeat 0 -77px;}
li.tabrss  {background:url(images/tabrss.png) no-repeat 0 -77px;}
li.tabpost {background:url(images/tabpost.png) no-repeat 0 -77px;}  
li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -77px;}
li.selected {background-position:0 0;}

Come potete notare di default l’immagine (di dimensioni 77px / 77px) parte da -77 px (quindi viene vusualizzata la sezione a colori), se si passa il cursore del mouse sopra (voce “li.mouseover” nel file style.css) parte da 0 px (quindi viene visualizzata la sezione in b/n), così come quando viene selezionata (voce “li.mouseover” nel file style.css). Quindi avremo, a secondo i casi, una situazione del genere:

Il contenuto delle tre tab (ma se ne possono aggiungere altre a piacere) andrà inserito nella seguente struttura contenuta nel file index.html:

<div class="boxBody">
<div id="posts" class="show">    <!-- pagina di default-->  
 
......................</div>
<div id="famous">
 
...............</div>
<div id="comments">
 
.................</div>
</div>

Ovviamente bisogna lavorare di CSS per rendere il tutto più gradevole.

Passo 3 – file JS

Nel file script.js è contenuta la funzione per la gestione dei tab con l’effetto a finestra nel cambio tra un tab e l’altro.

//nasconde il tab precedente
$('.boxBody div').slideUp("slow");
 
//visualizza il tab selezionato
$('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');

In questo modo utilizziamo solo la libreria jQuery. Se voglamo altri effetti, come il fade alle immagini (invece della tecnica sopra illustrata) o altri effetti sul contenuto dei tab, ovviamente il file script.js sarà più complicato ed inoltre sarà necessario caricare i plugin di jQuery.

Enjoy it!

Segue da….questo articolo

Dopo aver capito come gestire dinamicamente la struttura di una tabella utilizzando il “div” ho voluto un pò complicare il tutto aggiungendo la possibilità di effettuare il drag and drop di una riga.

Il risultato è questo: demo

Nel pacchetto Note: There is a file embedded within this post, please visit this post to download the file.
oltre allo script jQuery, troverete anche i file:

• index.htm
• scripts.js
• jquery.tablednd_0_5.js … approfondimento

Passo 1 – file HTML

Riga di codice importantissima da non modificare:

<table id="campi"></table>

infatti è all’interno di questo “table” che verranno creati i vari campi di input, contenuti nelle righe create dinamicamente. Come potete notare non uso più il “div” (vedi articolo precedente).

Passo 2 – file JS

Vi sono quattro funzioni:

La funzione addFormField() inserice una riga nella tabella contenente il campo di input.
La funzione removeFormField() rimuove la riga selezionata dalla tabella e richiamando la funzione aggiorna(), riodina le etichette dei campi in ordine numerico crescente.
La funzione inizializza_tabella() usa la libreria “jquery.tablednd_0_5.js” e rinizializza la tabella per il drag & drop delle righe. Usa volta effettuato lo spostamento della riga, le etichette dei campi verranno riaggiornate.

Di seguito il codice:

function inizializza_tabella() {
   $('#campi').tableDnD({
        onDrop: function(table, row) {
            aggiorna();
        }
    });
}
 
function addFormField() {
	var id = $('#campi tr[id^="row"]').length + 1;
	$("#campi").append('
 
Campo '+id+'
<input id="txt'+id+'" name="txt[]" size="25" type="text" />
<a onclick="removeFormField($(this).parent());return false;" href="#"><img src="img/edit_remove.png" border="0" alt="" /></a>
 
');
	document.getElementById("valore_c").innerHTML = "Campi inseriti: &lt; "+id+" &gt;";
	inizializza_tabella();
}
 
function aggiorna() {
var index = 0 ;
   $("#campi tr").each(function(i){
          i++; index=i;
	      $(this).attr('id','row'+i);
		  var currentVal = $(this).find('input').val();
		  $(this).html('
Campo '+i+'
<input id="txt'+i+'" name="txt[]" size="25" type="text" value="'+currentVal+'" />
<a onclick="removeFormField($(this).parent());return false;" href="#"><img src="img/edit_remove.png" border="0" alt="" /></a>
 
')
	});
	document.getElementById("valore_c").innerHTML = "Campi inseriti: &lt; "+index+" &gt;";
}; 
 
function removeFormField(el) {
    $(el.parent()).remove();
    aggiorna();
   	inizializza_tabella();
};

Per un progetto che sto sviluppando ho avuto la necessità di crare una tabella non conoscendo a priori i campi che la componevano. Cioè la tabella doveva essere creata in maniera dinamica, con la possibilità di aggiungere o rimuovere i campi a piacere durante la creazione. Dopo un attenta analisi e un approfondito studio sull’argomento ho risolto utilizzando le librerie jQuery.

Il risultato è questo: demo

Nel pacchetto Note: There is a file embedded within this post, please visit this post to download the file.
oltre allo script jQuery, troverete anche i file:

• index.htm
• scripts.js

Passo 1 – file HTML

Riga di codice importantissima da non modificare:

<div id="campi"></div>

infatti è all’interno di questo “div” che verranno costruiti i vari campi.

Passo 2 – file JS

Vi sono due funzioni:

La funzione addFormField() crea un campo di input e lo inserisce nel form. Supponendo, per esempio, di inserire due campi, all’interno del “div” di cui sopra compariranno le linee di codice:

<p id='row1'>
   <label for='txt1'>Campo 1&nbsp;
       <input type='text' size='20' name='txt[]' id='txt1'/>&nbsp;&nbsp;
       <a href='#' onClick='removeFormField("#row1"); return false;'>Rimuovi</a>
    </label>
</p>
<p id='row2'>
   <label for='txt2'>Campo 2&nbsp;
     <input type='text' size='20' name='txt[]' id='txt2'/>&nbsp;&nbsp;
     <a href='#' onClick='removeFormField("#row2"); return false;'>Rimuovi</a>
   </label>
</p>

Ho inserito “Rimuovi” invece dell’immagine dell’esempio.
Come potete notare, il “form” restituirà un array “txt[]” contenente i valori dei campi; tale array sarà possibile processarlo, per esempio, richiamando da “form” un file php.

La funzione removeFormField() oltre a rimuovere il campo desiderato riordina i rimanenti campi.

Continua con…questo articolo

Avendo la necessità di inserire molti link a video pubblici, ho cercato un modo di raggruppare questi video in un unico box, selezionandoli quindi in qualche maniera, in parole povere come se avessi di fronte un televisore con la possibilità di cambiare canale.
Navigando su internet ho trovato la risposta al mio problema, utilizzano le librerie jQuery.

Il risultato è questo:

Per creare questo effetto quindi bisogna scaricare jQuery. e jQuery UI con gli elementi ‘Core’ and ‘Tabs’.
Nel pacchetto Note: There is a file embedded within this post, please visit this post to download the file.
oltre agli script jQuery, trovere anche i file:

• index.htm
• videoteca.css
• scripts.js

Passo 1 – file HTML

Per aggiungere altri video basta aggiungere altri

<div id="vid-x" class="fvid">yyyyyyyyyyy</div>

e quindi altri link

	<li><a href="#vid-x">kkkkkkkkkkkk</a></li>

Passo 2 – file CSS

Modificare a piacere lo stile per cambiare l’aspetto grafico.

Passo 3 – file JS

Può essere incluso all’interno del file html con

<script type="text/javascript">
jQuery(function($) {
  $(document).ready(function() {
	$('#featuredvid').tabs();
  });
});
</script>