jQuery è un framework javascript che permette di semplificare la scrittura di codice javascript, facilitando l'iterazione con gli elementi della pagina (controlli, stili, eventi, animazioni, ...), e permettendo di aumentare la user experience delle applicazioni, riducendone al tempo stesso la complessità di scrittura. Vista la sua diffusione e potenza, è stato anche incluso nei project templete di Visual Studio. In questa sessione vedremo cos'è jQuery, e scopriremo le potenzialità e funzionalità che offre, verificando se il motto "write less do more" sia vero o meno.

1. Write less do more...with jQuery Andrea Dottor – Microsoft MVP ASP/ASP.NET

2. 05/03/2010 www.xedotnet.org 2 Cos’è jQuery Cosa può farejQuery jQuery UI – jQuery Tools Come usare jQuery da ASP.NET Conclusione

3. 05/03/2010 www.xedotnet.org 3 Progetto nato nel 2006 da John Resig Framework JavaScript Manipolazione dei CSS Manipolazione del HTML della pagina Effetti grafici Chiamate AJAX Cos’è jQuery

4. 05/03/2010 www.xedotnet.org 4 È Cross-browser Ha pienosupportodeiselettori CSS 1-3 Solamente 24KB di peso (minimizzata e compressa) Può essere usato con altre librerie jQuery.noConflict() Può essere esteso realizzando nuove funzionalità (plugin) Ha una grande community che ha già realizzato innumerevoli plugin, di ogni genere Sintassi sintetica ed efficiente Write less, do more Perchè usare jQuery

5. 05/03/2010 www.xedotnet.org 5 Download da http://jquery.com/ Per utilizzarla, inserire lo script nella pagina Possibilità di download da Microsoft CDN Come usare jQuery // Script presente in una cartella del sito <script type="text/javascript" src="jquery-1.4.2.min.js" /> // Script presente nella Microsoft CDN <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"/> // Script presente nel network google <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" />

6. 05/03/2010 www.xedotnet.org 6 jQuery si basa sull’uso dell’oggetto $ che è l’abbreviazione/alias di jQuery Permette di scrivere script più brevi e leggibili Facciamo un confronto: Alla base di Jquery $("#content"); jQuery("#content"): // <a id="mioLink" href="http://www.xedotnet.org">link</a> document.getElementById("mioLink").href; // JavaScript nativo $get("mioLink").href; // ASP.NET AJAX $("mioLink").readAttribute("href"); // Prototype $("#mioLink").attr("href"); // jQuery

7. 05/03/2010 www.xedotnet.org 7 Il selettore di jQuery si basa (anche) sulle stesse regole dei selettori utilizzati per i fogli di stile.Si può: Selezionare un elemento con un preciso ID Selezionare elementi aventi la stessa CssClass E’ possibile applicare più regole di selezione contemporaneamente Si può applicare un selettore partendo da un elemento conosciuto Selettori $("#id"); $(".cssClass");

8. 05/03/2010 www.xedotnet.org 8 Possibilità di eseguire dei selettori gerarchici Possibilità di applicare regole particolari Selezione di un elemento contiguo, adiacente, successivo... Possibilità di ricercare gli elementi verificando il valore degli attributi Elementi che hanno un attributo valorizzato Elementi che hanno un attributo che “inizia per”, “contiene”, “finisce per”, ... Selettori gerarchici

9. 05/03/2010 www.xedotnet.org 9 Gli elementi recuperati possono venire ulteriormente filtrati applicando maggiori dettagli nel selettore: Rispetto alla posizione Rispetto alla loro visibilità Rispetto ai contenuti Rispetto al tipo di elemento Filtrare la selezione $("#content:input");

10. 05/03/2010 www.xedotnet.org 10 Se si recupera una collezione di oggetti, può essere utile navigare i suoi figli Cercando al loro interno Recuperando i figli di primo livello Spostandosi tra gli elementi Traversing $("#menu").find("li"); $("#menu").children("li"); $("#start").next("li"); $("#start").prev("li"); $("#start").nextAll("li"); $("#start").siblings("li");

11. 05/03/2010 www.xedotnet.org 11 Con jQuery si possono gestire le CssClass degli elementi recuperati, utilizzando i metodi: . Si possono manipolare direttamente gli stili, utilizzando i metodi: DOM e CSS .hasClass() .addClass() .removeClass() .toggleClass() .css() .attr()

12. 05/03/2010 www.xedotnet.org 12 Oltre alla manipolazione dei CSS, si può agire direttamente nel DOM della pagina Recuperando il contenuto di un elemento Oppure andandolo ad impostare DOM e CSS $("p").text(); $("p").html(); $("p").text("Nuovo testo"); $("p").html("Nuovo testo con <strong>HTML</strong>");

13. 05/03/2010 www.xedotnet.org 13 Oltre alla manipolazione dei CSS, si può agire direttamente nel DOM della pagina Inserendo/spostando elementi Inserire elementi contigui (after e before) Avvolgendo elementi (wrap, wrapAll e wrapInner) DOM e CSS $("#menu").append("<li>lista</li>"); $("<li>lista</li>").appendTo("#menu"); $("#menu2 li").appendTo("#menu"); $("#menu").after("<ul id='menu2'></ul>");$("<ul id='menu2'></ul>").insertAfter("#menu"); $("p").wrap("<div></div>"); $("p").wrapInner("<span></span>");

14. www.xedotnet.org 14 DEMO

15. 05/03/2010 www.xedotnet.org 15 Per gestire gli eventi in jQuery si fa uso del metodo .bind() Per sganciare l’associazione all’evento si deve utilizzare .unbind() Utilizzato per togliere l’handler di uno specifico evento Toglie tutti gli handler associati all’elemento Eventi $("#btnSend").bind("click",function (event) { alert('ciao!'); }); $("#btnSend").unbind("click");$("#btnSend").unbind();

16. 05/03/2010 www.xedotnet.org 16 Oltre al metodo bind() per la gestione degli eventi, esistono alcuni metodi particolari: .one() – esegue la funzione solo una volta .hover() – accetta due funzioni, una per il mouse hover e una per i lmouse leave .toggle() – accetta una o più funzioni, che vengono lanciate in sequenza ad ogni click Eventi $("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } ); $('#foo').one('click', function() { alert('This will be displayed only once.'); });

17. 05/03/2010 www.xedotnet.org 17 In jQuery tutte le animazioni vengono gestite in una coda ("fx") che è possibile interrogare tramite i metodi .queue() - aggiunge elementi alla coda .dequeue() – fa riprendere la coda dall’animazione successiva Per svuotare una coda: Usare .stop() per fermare un’animazione Animazioni $("div").queue("fx",[]); $("div").stop(); // ferma la coda $("div").stop(true); // ferma e cancella la coda

18. 05/03/2010 www.xedotnet.org 18 Effetti di base .show() – visualizza l’elemento .hide() – nasconde l’elemento .toggle() – alterna hide e show Tutti i metodi accettano un valore relativo alla durata dell’animazione che può essere slow, normal, fast oppure un valore in millisecondi Animazioni slow, normal, fast $("#elementoNascosto").show("slow",function () { alert("Animazione conclusa!"); });

19. 05/03/2010 www.xedotnet.org 19 Effetti specifici jQuery mette a disposizione metodi che ripropongono animazioni spesso usate .slideDown() .slideUp() .slideToggle() .fadeIn() .fadeOut() .fadeTo() Animazioni

20. 05/03/2010 www.xedotnet.org 20 Si possono eseguire animazioni personalizzate facendo uso del metodo .animate() Animazioni $("#box").animate({ "borderWidth" : "4px", //bordo a 4 pixel "width" : "+=20px" //aumenta la larghezza }, "slow", //animazione lenta "linear", //andamento lineare function () { //funzione di callback alert("Animazione conclusa!"); });

21. www.xedotnet.org 21 DEMO

22. 05/03/2010 www.xedotnet.org 22 jQuery mette a disposizione dei metodi per poter eseguire e gestire chiamate asincrone .ajax() .post(), .get() AJAX $.ajax({ url : "pagina.aspx", success : function (data,state) { $("#result").html(data); $("#state").text(state); }, error : function (request,state,errors) { alert("E' evvenuto un errore. Stato chiamata: "+stato); }});

23. 05/03/2010 www.xedotnet.org 23 Parametri opzionali del metodo .ajax() async – indica se la chiamata viene fatta in asincrono cache – forza il server a ricaricare i dati contentType – tipo di contenuto inviato al server data – dati da inviare al server dataType – tipo di dati restituito dal server username – username se richiesto dal server password – password se richiesta dal server timeout – timeout della chiamata verso il server type – tipo della richiesta, GET o POST AJAX

24. 05/03/2010 www.xedotnet.org 24 Per creare delle proprie funzioni, si deve far uso della funzione $.fn.extend() Dovrà avere la seguente struttura Creare funzioni $.fn.extend({ nomeplugin : function () { return this.each( function () { //this è l'elemento }); } }); $.fn.extend({ changeBackground : function () { return this.each(function () { $(this).css("backgroundColor","yellow");}); } }); $("p").changeBackground();

25. www.xedotnet.org 25 DEMO

26. 05/03/2010 www.xedotnet.org 26 jQuery UI - http://jqueryui.com/ Libreria di controlli, animazioni, effetti Accordion Autocomplete Button Datepicker Dialog Progressbar Slider Tabs Possibilitò di scelta tra vari temi già realizzati Css + immagini Completamente personalizzabili in modo da adattarli alla grafica della propria applicazione jQuery UI

27. 05/03/2010 www.xedotnet.org 27 jQuery Tools - http://flowplayer.org/tools/ Libreria di terze parti contenenti diversi controlli Tabs Tooltip Scrollable Overlay Expose Integrano alcuni controlli mancanti in jQuery UI jQuery Tools

28. 05/03/2010 www.xedotnet.org 28 Come usare jQuery con ASP.NET? Facile quasi quanto usare ASP.NET AJAX Library Manca solamente l’integrazione con i server control Recuperare l’id di un server control: <%= txtDescription.ClientID %> Registrazione di script da eseguire lato client ScriptManager.RegisterStartupScript() Passaggio di dati complessi utilizzando json Es: Libreria .NET Newtonsoft.Json http://www.codeplex.com/Json Come usare jQuery con ASP.NET

29. www.xedotnet.org 29 DEMO

30. Link 05/03/2010 www.xedotnet.org 30 blog.dottor.net andrea@dottor.net www.dottor.net twitter.com/dottor