Write less do more...with jQuery

1,400 views

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,400
On SlideShare
0
From Embeds
0
Number of Embeds
156
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Write less do more...with jQuery

  1. 1. Write less do more...with jQuery<br />Andrea Dottor – Microsoft MVP ASP/ASP.NET<br />
  2. 2. 05/03/2010<br />www.xedotnet.org<br />2<br />Cos’è jQuery<br />Cosa può farejQuery<br />jQuery UI – jQuery Tools<br />Come usare jQuery da ASP.NET<br />Conclusione<br />
  3. 3. 05/03/2010<br />www.xedotnet.org<br />3<br />Progetto nato nel 2006 da John Resig<br />Framework JavaScript<br />Manipolazione dei CSS<br />Manipolazione del HTML della pagina<br />Effetti grafici<br />Chiamate AJAX<br />Cos’è jQuery<br />
  4. 4. 05/03/2010<br />www.xedotnet.org<br />4<br />È Cross-browser<br />Ha pienosupportodeiselettori CSS 1-3<br />Solamente 24KB di peso (minimizzata e compressa)<br />Può essere usato con altre librerie<br />jQuery.noConflict()<br />Può essere esteso realizzando nuove funzionalità (plugin)<br />Ha una grande community che ha già realizzato innumerevoli plugin, di ogni genere<br />Sintassi sintetica ed efficiente<br />Write less, do more<br />Perchè usare jQuery<br />
  5. 5. 05/03/2010<br />www.xedotnet.org<br />5<br />Download da http://jquery.com/<br />Per utilizzarla, inserire lo script nella pagina<br />Possibilità di download da Microsoft CDN<br />Come usare jQuery<br />// Script presente in una cartella del sito<br /><script type="text/javascript" src="jquery-1.4.2.min.js" /><br />// Script presente nella Microsoft CDN<br /><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"/><br />// Script presente nel network google<br /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" /><br />
  6. 6. 05/03/2010<br />www.xedotnet.org<br />6<br />jQuery si basa sull’uso dell’oggetto $ che è l’abbreviazione/alias di jQuery<br />Permette di scrivere script più brevi e leggibili<br />Facciamo un confronto:<br />Alla base di Jquery<br />$("#content"); <br />jQuery("#content"):<br />// <a id="mioLink" href="http://www.xedotnet.org">link</a><br />document.getElementById("mioLink").href; // JavaScript nativo<br />$get("mioLink").href; // ASP.NET AJAX<br />$("mioLink").readAttribute("href"); // Prototype<br />$("#mioLink").attr("href"); // jQuery<br />
  7. 7. 05/03/2010<br />www.xedotnet.org<br />7<br />Il selettore di jQuery si basa (anche) sulle stesse regole dei selettori utilizzati per i fogli di stile.Si può:<br />Selezionare un elemento con un preciso ID<br />Selezionare elementi aventi la stessa CssClass<br />E’ possibile applicare più regole di selezione contemporaneamente<br />Si può applicare un selettore partendo da un elemento conosciuto<br />Selettori<br />$("#id");<br />$(".cssClass");<br />
  8. 8. 05/03/2010<br />www.xedotnet.org<br />8<br />Possibilità di eseguire dei selettori gerarchici<br />Possibilità di applicare regole particolari<br />Selezione di un elemento contiguo, adiacente, successivo...<br />Possibilità di ricercare gli elementi verificando il valore degli attributi<br />Elementi che hanno un attributo valorizzato<br />Elementi che hanno un attributo che “inizia per”, “contiene”, “finisce per”, ...<br />Selettori gerarchici<br />
  9. 9. 05/03/2010<br />www.xedotnet.org<br />9<br />Gli elementi recuperati possono venire ulteriormente filtrati applicando maggiori dettagli nel selettore:<br />Rispetto alla posizione <br />Rispetto alla loro visibilità<br />Rispetto ai contenuti<br />Rispetto al tipo di elemento<br />Filtrare la selezione<br />$("#content:input");<br />
  10. 10. 05/03/2010<br />www.xedotnet.org<br />10<br />Se si recupera una collezione di oggetti, può essere utile navigare i suoi figli<br />Cercando al loro interno<br />Recuperando i figli di primo livello<br />Spostandosi tra gli elementi<br />Traversing<br />$("#menu").find("li");<br />$("#menu").children("li");<br />$("#start").next("li"); <br />$("#start").prev("li");<br />$("#start").nextAll("li");<br />$("#start").siblings("li"); <br />
  11. 11. 05/03/2010<br />www.xedotnet.org<br />11<br />Con jQuery si possono gestire le CssClass degli elementi recuperati, utilizzando i metodi:<br />. <br />Si possono manipolare direttamente gli stili, utilizzando i metodi:<br />DOM e CSS<br />.hasClass()<br />.addClass()<br />.removeClass()<br />.toggleClass()<br />.css()<br />.attr() <br />
  12. 12. 05/03/2010<br />www.xedotnet.org<br />12<br />Oltre alla manipolazione dei CSS, si può agire direttamente nel DOM della pagina<br />Recuperando il contenuto di un elemento<br />Oppure andandolo ad impostare<br />DOM e CSS<br />$("p").text(); <br />$("p").html(); <br />$("p").text("Nuovo testo");<br />$("p").html("Nuovo testo con <strong>HTML</strong>"); <br />
  13. 13. 05/03/2010<br />www.xedotnet.org<br />13<br />Oltre alla manipolazione dei CSS, si può agire direttamente nel DOM della pagina<br />Inserendo/spostando elementi<br />Inserire elementi contigui (after e before)<br />Avvolgendo elementi (wrap, wrapAll e wrapInner)<br />DOM e CSS<br />$("#menu").append("<li>lista</li>");<br />$("<li>lista</li>").appendTo("#menu"); <br />$("#menu2 li").appendTo("#menu");<br />$("#menu").after("<ul id='menu2'></ul>");$("<ul id='menu2'></ul>").insertAfter("#menu");<br />$("p").wrap("<div></div>");<br />$("p").wrapInner("<span></span>");<br />
  14. 14. www.xedotnet.org<br />14<br />DEMO<br />
  15. 15. 05/03/2010<br />www.xedotnet.org<br />15<br />Per gestire gli eventi in jQuery si fa uso del metodo .bind()<br />Per sganciare l’associazione all’evento si deve utilizzare .unbind()<br />Utilizzato per togliere l’handler di uno specifico evento<br />Toglie tutti gli handler associati all’elemento<br />Eventi<br />$("#btnSend").bind("click",function (event) { <br /> alert('ciao!');<br /> });<br />$("#btnSend").unbind("click");$("#btnSend").unbind();<br />
  16. 16. 05/03/2010<br />www.xedotnet.org<br />16<br />Oltre al metodo bind() per la gestione degli eventi, esistono alcuni metodi particolari:<br />.one() – esegue la funzione solo una volta<br />.hover() – accetta due funzioni, una per il mouse hover e una per i lmouse leave<br />.toggle() – accetta una o più funzioni, che vengono lanciate in sequenza ad ogni click<br />Eventi<br />$("td").hover(<br /> function () { $(this).addClass("hover"); }, <br /> function () { $(this).removeClass("hover");<br /> } );<br />$('#foo').one('click', function() { alert('This will be displayed only once.'); });<br />
  17. 17. 05/03/2010<br />www.xedotnet.org<br />17<br />In jQuery tutte le animazioni vengono gestite in una coda ("fx") che è possibile interrogare tramite i metodi <br />.queue() - aggiunge elementi alla coda<br />.dequeue() – fa riprendere la coda dall’animazione successiva<br />Per svuotare una coda:<br />Usare .stop() per fermare un’animazione<br />Animazioni<br />$("div").queue("fx",[]);<br />$("div").stop(); // ferma la coda<br />$("div").stop(true); // ferma e cancella la coda<br />
  18. 18. 05/03/2010<br />www.xedotnet.org<br />18<br />Effetti di base<br />.show() – visualizza l’elemento<br />.hide() – nasconde l’elemento<br />.toggle() – alterna hide e show<br />Tutti i metodi accettano un valore relativo alla durata dell’animazione che può essere slow, normal, fast oppure un valore in millisecondi<br />Animazioni<br />slow, normal, fast<br />$("#elementoNascosto").show("slow",function () { <br /> alert("Animazione conclusa!");<br />});<br />
  19. 19. 05/03/2010<br />www.xedotnet.org<br />19<br />Effetti specifici<br />jQuery mette a disposizione metodi che ripropongono animazioni spesso usate<br />.slideDown()<br />.slideUp()<br />.slideToggle()<br />.fadeIn()<br />.fadeOut()<br />.fadeTo()<br />Animazioni<br />
  20. 20. 05/03/2010<br />www.xedotnet.org<br />20<br />Si possono eseguire animazioni personalizzate facendo uso del metodo .animate()<br />Animazioni<br />$("#box").animate({<br /> "borderWidth" : "4px", //bordo a 4 pixel <br /> "width" : "+=20px" //aumenta la larghezza<br /> },<br /> "slow", //animazione lenta <br /> "linear", //andamento lineare <br /> function () { //funzione di callback<br /> alert("Animazione conclusa!"); <br /> });<br />
  21. 21. www.xedotnet.org<br />21<br />DEMO<br />
  22. 22. 05/03/2010<br />www.xedotnet.org<br />22<br />jQuery mette a disposizione dei metodi per poter eseguire e gestire chiamate asincrone<br />.ajax() <br />.post(), .get()<br />AJAX<br />$.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);    }});<br />
  23. 23. 05/03/2010<br />www.xedotnet.org<br />23<br />Parametri opzionali del metodo .ajax()<br />async – indica se la chiamata viene fatta in asincrono<br />cache – forza il server a ricaricare i dati<br />contentType – tipo di contenuto inviato al server<br />data – dati da inviare al server<br />dataType – tipo di dati restituito dal server<br />username – username se richiesto dal server<br />password – password se richiesta dal server<br />timeout – timeout della chiamata verso il server<br />type – tipo della richiesta, GET o POST <br />AJAX<br />
  24. 24. 05/03/2010<br />www.xedotnet.org<br />24<br />Per creare delle proprie funzioni, si deve far uso della funzione $.fn.extend()<br />Dovrà avere la seguente struttura<br />Creare funzioni<br />$.fn.extend({ nomeplugin : function () { return this.each(<br /> function () { //this è l'elemento }); } });<br />$.fn.extend({ changeBackground : function () { return this.each(function () {<br />$(this).css("backgroundColor","yellow");}); } });<br />$("p").changeBackground();<br />
  25. 25. www.xedotnet.org<br />25<br />DEMO<br />
  26. 26. 05/03/2010<br />www.xedotnet.org<br />26<br />jQuery UI - http://jqueryui.com/<br />Libreria di controlli, animazioni, effetti<br />Accordion<br />Autocomplete<br />Button<br />Datepicker<br />Dialog<br />Progressbar<br />Slider<br />Tabs<br />Possibilitò di scelta tra vari temi già realizzati<br />Css + immagini<br />Completamente personalizzabili in modo da adattarli alla grafica della propria applicazione<br />jQuery UI<br />
  27. 27. 05/03/2010<br />www.xedotnet.org<br />27<br />jQuery Tools - http://flowplayer.org/tools/<br />Libreria di terze parti contenenti diversi controlli<br />Tabs<br />Tooltip<br />Scrollable<br />Overlay<br />Expose<br />Integrano alcuni controlli mancanti in jQuery UI<br />jQuery Tools<br />
  28. 28. 05/03/2010<br />www.xedotnet.org<br />28<br />Come usare jQuery con ASP.NET?<br />Facile quasi quanto usare ASP.NET AJAX Library<br />Manca solamente l’integrazione con i server control<br />Recuperare l’id di un server control: <br /><%= txtDescription.ClientID %><br />Registrazione di script da eseguire lato client<br />ScriptManager.RegisterStartupScript()<br />Passaggio di dati complessi utilizzando json<br />Es: Libreria .NET Newtonsoft.Json http://www.codeplex.com/Json<br />Come usare jQuery con ASP.NET<br />
  29. 29. www.xedotnet.org<br />29<br />DEMO<br />
  30. 30. Link<br />05/03/2010<br />www.xedotnet.org<br />30<br />blog.dottor.net<br />andrea@dottor.net <br />www.dottor.net<br />twitter.com/dottor<br />

×