jQuery, un mondo in una libreria

Cosa è jQuery?

jQuery è una libreria di funzioni (framework) javascript, cross-browser destinata ad applicazioni web, che si propone come obiettivo quello di semplificare la programmazione lato client delle pagine HTML. Il framework fornisce metodi e funzioni per gestire al meglio aspetti grafici e strutturali come posizione di elementi, effetto di click su immagini, manipolazione del Document Object Model e quant'altro ancora, mantenendo la compatibilità tra browser diversi e standardizzando gli oggetti messi a disposizione dall'interprete javascript del browser. Come Includere jQuery al proprio progetto?

 

Come integro jQuery al mio progetto web?

La libreria jQuery è un singolo file JavaScript, da richiamare tramite HTML con il tag <script> (si noti che il tag <script> dovrebbe essere all'interno della sezione <head>). Per ottenere la libreria: http://jquery.com/download/
Da notare che: 
  1. Production version - questa versione è per il vostro sito web di produzione il codice è minimizzato e compresso;
  2. Development version - versione di sviluppo e di test, il codice è facilmente leggibile;
  3. CDN di Google o di jQuery – Content Delivery Network

Con percorsi locali:

<head> 
 <script src="jquery-1.12.0.min.js"></script> 
 <script src="mioscript.js"></script> 
</head>  

Con percorsi remoti:

<head> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 <script src="mioscript.js"></script> 
</head>   

Se non abbiamo bisogno di modifiche alla libreria usare le versioni .min (sta per minified ovvero compresso) in quanto sono più veloci da caricare, inoltre preferire i CDN di Google per ridurre i tempi di caricamento (Leggere qui per maggiori dettagli).    

 

Qual è la sintassi di base? 

$(selector).action()  
  1. Il $ per definire jQuery 
  2. Un (selector) per "query (trovare)" elementi HTML 
  3. Un’azione: jQuery action() da far eseguire sull’elemento selezionato 

 Per esempio:

  • $(selector).action();
  • jQuery(‘p’).css(‘color’, ‘blue’);
  • $(‘p’).css(‘color’, ‘blue’);
  • $(this).hide();
  • $("p").hide();
  • $(".test").hide();
  • $("#test").hide();
Ovvero: selettore, azione, parametri.  

Cosa è jQuery UI?

jQuery UI è una libreria open source di plug-in basata sulla libreria JavaScript JQuery. Ogni componente è costruito secondo l'architettura di JQuery ed è completamente personalizzabile. Fornisce interazioni ed animazioni, effetti avanzati e widget. Al momento jQuery UI è suddivisa in: Interactions, Widgets, Effects, Utilities.
Dipendente dalla libreria core può essere richiamata sia con percorsi locali che con percorsi remoti. Se usiamo il CDN di jQuery.
    1. http://code.jquery.com/jquery-1.12.0.min.js
    2. http://code.jquery.com/ui/1.11.3/jquery-js
    3. http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-css
      In generale tutti i link assoluti per UI e non solo sono su http://code.jquery.com/

      Se invece usiamo il CDN di Google: 

      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
      <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  

       

      Cosa sono i Widget di jQuery UI?

      Molto amplia è la scelta di Widget in jQuery UI. Il nome potrebbe essere in alcuni casi fuorviante, visto che è spesso usato in moltissimi contesti diversi, tuttavia in questo caso si tratta solo di controlli atti a semplificare e ordinare la fruizione e l’inserimento dei dati in una pagina web.
      jQuery UI comprende nativamente 11 tipi di widget, completamente compatibili con i temi UI generati da Theme Roller (la web application per la gestione dei temi) e ricchi di opzioni di personalizzazione.
      • Accordion: Visualizza pannelli di contenuto comprimibili per presentare le informazioni in una quantità limitata di spazio.
      • Autocomplete: suggerisce parole mentre l'utente sta scrivendo.
      • Button: inserisce pulsanti personalizzabili
      • Datepicker: Visualizza un calendario
      • Dialog: visualizza finestre di dialogo personalizzabili
      • Menu: crea menu nidificabili.
      • Progressbar: consente di visualizzare un indicatore di stato
      • Slider: Visualizza diapositive accessibili tramite tastiera
      • Spinner: Visualizza i pulsanti per immettere numeri tramite la tastiera o il mouse.
      • Tabs: Trasforma un insieme di elementi contenitori in una struttura a tab.
      • Tooltip: mostra informazioni addizionali.

       

      Come inserisco un accordion?

      <div id="accordion"> 
        <h3><a href="#">Primo headerheader</a></h3> 
        <div>First contenuto</div> 
        <h3><a href="#">Secondo header</a></h3> 
        <div>Secondo contenuto</div> 
      </div> 

      A questo punto basterà richiamare il metodo .accordion() sull’elemento con id accordion per attivare il widget
      $("#accordion").accordion(); 
      L’Accordion, come gli altri widget offre un ottimo numero di opzioni per personalizzare il comportamento del widget. Fra cui:
      • active : (selettore, jQuery, elemento DOM, numero, booleano – 'first-child’) indica uno specifico elemento o la sua posizione nell’accordion in modo da renderlo subito visibile una volta applicato il widget.
      • autoHeight : (booleano – true) indica se applicare l’altezza del contenitore di testo più alto a tutti gli altri elementi. Questa opzione è attiva di default perché rende il controllo più consistente e impedisce che il cambiamento di altezza dell’accordion possa influire sul posizionamento di altri box nell’interfaccia.
      • collapsible : (booleano – false) strettamente collegato all’opzione precedente, se impostato su true permette di chiudere tutte le aree di testo, facendo collassare completamente il controllo.
      Ulteriori dettagli: http://api.jqueryui.com/accordion/#option-animate

      Come inserisco un tabulatore?

      <div id="tabs"> 
       <ul> 
        <li><a href="#fragment-1"><span>Uno</span></a></li> 
        <li><a href="#fragment-2"><span>Due</span></a></li> 
        <li><a href="#fragment-3"><span>Tre</span></a></li> 
       </ul> 
       <div id="fragment-1"> 
        <p>Testo 1</p> 
       </div> 
       <div id="fragment-2"> 
        <p>Testo 2</p> 
       </div> 
       <div id="fragment-3"> 
        <p>Testo 3</p> 
       </div> 
      </div> 

      A questo punto ci basterà richiamare il metodo .tabs() sull’elemento con id tabs per attivare il widget $("#tabs"). tabs (); 

      Cosa è il Themeroller/temi di jQuery UI

      la struttura grafica dei widget e delle interazioni di jQuery UI è in gran parte veicolata dall’inclusione di un file CSS compreso nel pacchetto di installazione.
      Themeroller è un applicativo online raggiungibile all’indirizzo http://jqueryui.com/themeroller/ che permette di modificare il tema base smoothness secondo le proprie esigenze con un alto grado di personalizzazione. Oltre a questo, mette a disposizione molti temi preconfezionati da scaricare direttamente oppure da usare come base per il propio tema.
      N.B. cliccando sul link di download dei temi verrete reindirizzati all’utility di download di jQuery UI, perciò scaricare tutto il pacchetto ed estrarre la cartella del tema dalla directory css. La struttura e la nomenclatura che compongono un tema per jQuery UI sono rigidamente standardizzati, per garantire la compatibilità fra il markup generato dalla libreria e la formattazione disponibile via CSS.

      Cosa sono i Plugin jQuery? 

      In jQuery un plugin non è altro che un’estensione (non autonoma) del framework, che ha come compito quello di ampliarne le funzioni del core. Più nello specifico un plugin è una, o un insieme, di funzioni che hanno lo scopo di utilizzare il framework per compiti pre-stabiliti e quindi aiutare gli sviluppatori quando si tratta di validare i nostri formulari, creare delle slideshow, inserire nei nostri siti delle gallerie fotografiche. Alcuni esempi di plugin che possono essere testati:
      1. Colorbox - a jQuery lightbox A lightweight customizable lightbox plugin
      2. jQuery Zoom A plugin to enlarge images on mouseover or mousedown.
      Anche per i plugin abbiamo la versione ridotta (min di produzione) e la versione non compressa (di sviluppo).

      Come integro il plugin Colorbox?

       <link rel="stylesheet" href="colorbox.css" /> 
       <script src="../jquery.colorbox-min.js"></script> 
      Il plugin può essere utilizzato sia su una singola immagine sia per raccolte in stile slideshow.

      Per raggruppare gli elementi includiamo nel mark-up, p.e., l’attributo rel="gipso"
      per poi utilizzare il selettore di attributi di jQuery per trovari tali immagini. $(document).ready(function(){ 
       //Examples of how to assign the Colorbox event to elements 
       $(".gipso").colorbox({ rel:'gipso’, transition: 'fade’, speed: 500, }); 
       $(".flora").colorbox(); 
      });
               
      Nel prossimo post presentrò jQuery Mobile.

      Post popolari in questo blog

      Software libero a scuola, insisto!

      Passare da Photoshop a Gimp in maniera indolore