Tips & Tricks

Nel modulo precedente abbiamo affrontato il mondo jQuery nelle sue forme essenziali.

Adesso proviamo ad alzare l'asticella per consocere tutti i segreti di jQuery e le funzionalità più comuni del web che proprio grazie a jQuery possono essere replicate con semplicità.

Vedremo inoltre l'integrazione della libreria jQuery UI, composta da due risorse CSS + Javascript, per ottenere effetti pre-confezionati dal team di jQuery.

Puzzle jQuery

Piccole sfide sull'utilizzo di jQuery

Puzzle jQuery

Per affrontare al meglio i puzzle, introduciamo due concetti molto importanti per jQuery, ovvero le funzioni di posizionamento e quelle di dimensione di un elemento.

Per quanto riguarda il posizionamento degli elementi del DOM, in jQuery ci sono due funzioni molto simili, che permettono di capire in qualunque momento la posizione dell'elemento all'interno della pagina, ovvero le coordinate X e Y.
Le due funzioni sono:

  • position(): permette di determinare la posizione dell'elemento all'interno del suo parent (relativa)
  • offset(): permette di determinare la posizione dell'elemento all'interno del DOM (assoluta)

L'utilizzo delle due funzioni è pressocchè identico:

// Posizione assoluta
x = $("#element").offset().left;
y = $("#element").offset().top;

// Posizione relativa
x = $("#element").position().left;
y = $("#element").position().top;

Puzzle jQuery

Per conoscere invece le dimensioni di un elemento, senza dover ricorrere all'utilizzo delle funzioni del CSS in jQuery, è possibile utilizzare le funzioni:

  • height(): determina l'altezza di un div senza considerare il padding (relativa)
  • outerHeight(): determina l'altezza di un div considerando il padding (assoluta).
    In più se si utilizza il parametro true, è possibile includere nel calcolo dell'altezza anche il margin top e bottom
  • width(): determina la larghezza di un div senza considerare il padding (relativa)
  • outerWidth(): determina la larghezza di un div considerando il padding (assoluta).
    In più se si utilizza il parametro true, è possibile includere nel calcolo della larghezza anche il margin left e right

L'utilizzo delle due funzioni è pressocchè identico:

// Dimensione assoluta
width = $("#element").outerWidth(); // Non includo margin left/right
height = $("#element").outerHeight(true); // Includo margin top/bottom

// Dimensione relativa
width = $("#element").width();
height = $("#element").height();

Puzzle jQuery

E' bene ricordare che il funzionamento di height() e width() è comunque diverso rispetto all'utilizzo della funzione CSS di jQuery, in quanto con le funzioni apposite, non viene incluso il simbolo della dimensione in px.

Esempio:

width = $("#element").width(); // Es. width = 400;
width = $("#element").css("width"); // Es. width = 400px

Proprio per questo principio di funzionamento, i metodi jQuery vengono utilizzato molto quando si ha a che fare con dei calcoli lato client.

Puzzle jQuery

Puzzle 1: header fixed scroll

Creare una struttura classica di layout web con header, wrapper e footer, facendo si che allo scroll dell'intera pagina, l'header resti bloccato in alto per agevolare la navigazione.

Inizialmente è presente sia un navigation header che un main header.

In fase di scroll della pagina, il navigation header viene schiacciato dal main header, che resterà dunque fisso in alto, agevolando la navigazione dell'utente.

Puzzle jQuery

Puzzle 2: sidebar fixed scroll

Sulla struttura del puzzle 1, completiamo il wrapper con ulteriori div all'interno, ovvero una sidebar e un contenuto centrale.
Impostare il wrapper affinchè allo scroll della pagina, la sidebar resti fissa sulla sinistra in alto, senza però contrastare l'header fixed.

Inizialmente sidebar e wrap content sono visualizzati nella loro posizione naturale.

In fase di scroll della pagina, la sidebar si aggancia alla parte sinistra, mentre il wrap content scrolla regolarmente.

Puzzle jQuery

Puzzle 3: tooltips

Creare una regola tale per cui ad ogni elemento della pagina che ha la classe tooltip ci sia una finestra a comparsa legata all'evento hover, focus o click, che mostra l'attributo title dell'elemento stesso.

  • Impostare l'evento trigger direttamente tramite data attribute sugli elementi HTML
  • Tutti gli elementi tooltipabili, dovranno essere colorati in azzurro (background nel caso di un div)
  • Non potranno essere visualizzati contemporaneamente più tooltip

Puzzle jQuery

Complimenti!

Se hai superato i 3 puzzle, vuol dire che hai acquisito tutte le competenze sull'utilizzo di jQuery!

jQuery UI

Oltre i confini di jQuery

jQuery UI

Se vuoi superare le frontiere di jQuery, devi necessariamente imbatterti in jQuery UI, una libreria avanzata, che permette di semplificare e migliorare alcune delle funzioni maggiormente utilizzate o create grazie a jQuery stesso.

La libreria di jQuery UI è composta da due componenti:

  • jQuery UI CSS: libreria CSS con uno stile predefinito
  • jQuery UI JS: libreria JS per le funzionalità più comuni

Entrambe le librerie sono necessarie se si vuole utilizzare al meglio la potenzialità offerta da jQuery UI.

E' possibile scaricare la libreria direttamente dal sito ufficiale di jQuery UI

jQuery UI

Gli strumenti messi a disposizione da jQuery UI sono moltissimi, e si possono raggruppare in tre macrocategorie:

  • Interazione: funzionalità create per migliorare l'esperienza dell'utente
  • Widgets: strumenti predefiniti nello stile e nel funzionamento
  • Effetti: animazioni per mostrare o nascondere elementi e/o classi di stile

Essendo la documentazione di jQuery UI fra le migliori presenti nel web, si riportano direttamente i collegamenti alle funzioni maggiormente utilizzate e di maggior spessore.

Interazione

Widgets

Esercitazioni

Stress Test su jQuery UI

Esercitazioni jQuery UI

Interfaccia drag & drop

Integrare al CRM inTrain, l'interfaccia per il CRUD utenti, facendo riferimento al design scaricabile da questo link.
L'interfaccia oltre ad un modal per la creazione dei nuovi utenti, si suddivide in due blocchi orizzontali: il primo contiene le card degli utenti registrati ad inTrain, il secondo contiene i gruppi di utenti (amministratori, editori e account manager).

Impostare il funzionamento tale per cui:

  • E' possibile spostare in drag&drop le card degli utenti all'interno dei gruppi, aggiornando in tempo reale il conteggio e salvando le informazioni nel database. Se l'utente è già presente nel gruppo, dovrà comparire un messaggio di errore impedendo dunque la ridondanza del dato
  • Facendo doppio click sul gruppo, deve essere visualizzato un modal con l'elenco degli utenti associati, con la possibilità di rimuoverli singolarmente
  • Facendo doppio click sulla card dell'utente, deve essere visualizzato un modal per la modifica e la rimozione dell'utente stesso.
  • Tutta l'interfaccia deve funzionare secondo gli standard Ajax, ovvero senza aggiornare la pagina per la lettura delle informazioni aggiornata in tempo reale.
  • Inserire elementi visivi per migliorare l'usabilità (es. cambio colore del gruppo al momento del drop)

Esercitazioni jQuery UI

Favinks - avanzato

Replicare il funzionamento di Favinks nella gestione delle cartelle e dei links.


  • Richiedi l'invito per accedere alla versione beta - Vai a Favinks
  • Crea 5 cartelle e inserisci all'interno di ognuna i tuoi link preferiti per studiare al meglio il funzionamento del portale
  • Sfrutta le proprietà di drag&drop per spostare ed ordinare le cartelle e i link
  • E se Favinks ti piace, utilizzalo pure a tuo piacimento! Sei fra i primi 100 beta tester nel mondo!

Stress Test jQueryUI

Complimenti!

Se hai superato anche i due test di jQuery UI, conosci tutti i segreti del mondo jQuery!

<Thank u!>

Sempre pronto a darti una mano