fenomeno.it

Spesso abbiamo necessità di riempire o svuotare dei div o dei p all'interno delle nostre applicazioni ajax, questa possibilità è da sempre presente in javascript con il metodo innerHTML ma con i nuovi framework questa operazione è diventata veramente semplice e cross browser.

in jQuery sono tre le funzioni che ci aiutano ad aggiungere contenuto a un div e sono

• .html() per sostituire il contenuto
• .append() per aggiungere contenuto in fondo a del contenuto già esistente
• .prepend() per aggiungere contenuto in testa a del contenuto già esistente

mentre una sola ci consente di svuotarne il contenuto

• .empty() svuota il div del suo contenuto, dati e event handlers

vediamo in pratica come utilizzarle, supponiamo di avere un div con id prova e due bottoni con id riempi e svuota che aggiungono e tolgono testo dal div

 
<div id="prova"></div>
 
<button id="riempi">aggiungi testo hello world</button>
<button id="svuota">svuota div</button>
 

ora associamo al click sul primo bottone un'azione che inserisca qualcosa nel div e un'azione al click su secondo che svuoti il div

 
$("#riempi").click(function () {
$("#prova").html("Hello World!");
});
 
$("#svuota").click(function () {
$("#prova").empty();
});
 

più semplice di così...

Utilizzare append prepend è molto semplice basta sostituirlo a html, il consiglio è di provarle mettendo già del testo nel div prova in moda da vedere bene la differenza.

Chi come me sviluppa ormai da diversi anni avrà ricevuto almeno una volta la richiesta di preparare un tour virtuale per un'azienda o un negozio.

Fino a qualche tempo fa Quick Time VR l'ha fatta da padrone con effetti e qualità di tutto rispetto ma è sempre stato appannaggio di esperti di montaggio video o comunque di persone con buona dimestichezza con le foto digitali. I miei primi incontri con panorama e virtual tour è stato sui siti delle navi da crociera e poi alcuni grandi alberghi o cnetri conferenzea.

Oggi però la tecnologia riesce a rendere semplice anche cose una volta impensabili, anche se so che con Flash molti hanno sopperito all'uso di Quick Time, alcuni anche con Java, pur dovendo sempre sottostare ad un plugin in tutte le soluzioni.

Ecco perchè grazie ad una dritta di Luca ho trovato jQuery Virtual Tour, un plugin o anche qualcosa in più, del celebre framework jQuery.

jQuery Virtual Tour è un' estensione di jQuery Panorama realizzato sempre da Open Studio. Sotto in breve una panoramica dei due plugin.

• jQuery Panorama : un semplice visualizzatore di panorama per jQuery con numerose opzioni disponibili, come velocità di scorrimento, dimensioni del visualizzatore, il senso di rotazione, la visualizzazione di comandi. Viene rilasciato sotto licenza GNU GPL
• jQuery Virtual Tour : un'estensione di jQuery Panorama con l'aggiunta di zoom in alcune parti utilizzando le map del codice html e possibilità di ingrandimento con Thickbox

Tra le numerose librerie Javascript nate con l'avvento di AJAX, jQuery merita decisamente una menzione particolare.
Storia di jQuery
il 14 Gennaio 2006 jQuery viene annunciato al BarCampNYC da quel momento iniziano a comparire i primi plugins e il 26 Agosto 2006 vede la luce la versione 1.0. La successiva versione 1.1 è del 14 Gennaio 2007, la 1.2 del 10 settembre 2007 e la nascita di jQuery UI, la libreria di interfaccia utente presentata il 17 settembre 2007.

Cos'è jQuery
fondamentalmente jQuery è una libreria di funzioni javascript che danno la possibilità di manipolare velocemente i vari elementi di una pagina html, dalle classi di un paragrafo ai moduli di una form. La struttura della libreria fornisce le funzioni di base, i plugins ne estendono le funzionalità creando strutture già pronte per ottenere le cose più impensate. Il motto "Write less do more" è indicativo di cosa sia effttivamente jQuery, ovvero uno strumento per semplificare e velocizzare alcune operazioni.

I plugins
punto di forza della libreria jQuery sono i plugins, moduli che possono gestire dai semplici effetti sulle finistre fino alle chiamate Ajax. La sezione Plugins del sito jquery è una risorsa meravigliosa, vi si possono trovare circa 200 esempi liberamente scaricabili e utilizzabili a piacimento. Il passo successivo è iniziare a scriverne uno da soli, nei prossimi post vedremo come.

Perchè scegliere jQuery
la scelta di una libreria, così come di un framework o di un semplice editor è sempre molto soggettiva, ma analizzando i vantaggi di jQuery credo che in molti valuteranno l'opportunità di utilizzarla. Le funzioni sono piuttosto intuitive, permettono con poche righe di ottenere risultati che con altre tecnologie risulterebbero complesse ed inoltre le prestazioni e la compatibilità con i più diffusi browser risultano ottimi.

Alcuni esempi
dopo aver inserito la libreria nel tag head della vostra pagina potete gestire ad esempio un evento al load della pagina, in questo caso un alert del messaggio Viva jQuery
Nella sezione HEAD della pagina metteremo

 
<script src="path/to/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("Viva jQuery!");
});
</script>

oppure lo stesso alert al click su un link

 
<script type="text/javascript">
//sempre nella parte head
$("a").click(function(){
   alert("Viva jQuery!");
   return false;
 });
</script>

e nel body il nostro link

 
<a href="http://jquery.com/">jQuery</a>

ovviamente questo è il più semplice e basico degli esempi, nei prossimi post vedremo come qualcosina di più complesso.

Happy jQuery.