jQuery è una libreria di funzioni che permette di integrare in una pagina web le possibilità interattive di JavaScript con poche, eleganti, linee di codice.
Attraverso il taglio pratico di questo testo il lettore imparerà a sfruttare al massimo la potenza di jQuery, a partire dalle funzionalità di base, fino alle tecniche avanzate necessarie a creare, trasformare e animare qualsiasi elemento dell'interfaccia utente.
Chi ha competenze di HTML e CSS e finora ha solo sentito parlare di jQuery troverà in queste pagine tutte le indicazioni per partire col piede giusto. Chi è interessato a JavaScript ma si è scontrato con la sua complessità troverà in jQuery lo strumento di lavoro ideale.
Infine, i progettisti web che hanno già familiarità con gli elementi di base di jQuery, troveranno qui consigli e suggerimenti per approfondirne la conoscenza e ottimizzare il flusso di lavoro.
Argomenti in breve:
Gli autori
Earle Castledine, cresciuto allo stato brado accanto a diversi computer a 8 bit, ha fissato la sua dimora su Internet durante gli anni Novanta e li` vive e lavora ancora adesso. Fla^neur di JavaScript, si trova a suo agio nei meandri confusi del codice .NET, nel denso fogliame delle applicazioni e dei giochi per cellulari e tra le soffici nuvole dello sviluppo dell’interazione lato client. Earle riconosce Internet non come punto di riferimento per il cambiamento sociale, ma come veicolo per diffondere futili gadget ECMAScript e interessanti tecnologie che fanno perdere tempo.
Una laurea in Belle Arti e` uno strano punto di partenza per una carriera basata sulla passione per la programmazione, ma e` da li` che Craig Sharkie ha iniziato. Un approccio artistico al codice e alla risoluzione dei problemi lo ha visto mettere le proprie abilita` al servizio di grandi nomi del Web come AOL, Microsoft, Yahoo!, Ziff-Davis e ora Atlassian. Questa passione e un’inclinazione per le virgole in serie e simili lo hanno portato dal mondo del giornalismo, attraverso lo sviluppo e le conferenze fino all’editoria.
Gli autori................................................................................................xi
Introduzione........................................................................................xv
Capitolo 1 Innamorarsi di jQuery ....................................................1
Cosa rende così speciale jQuery...................................................... 2
Compatibilità tra browser.......................................................... 2
Selettori CSS3........................................................................... 2
Utility vantaggiose..................................................................... 3
Interfaccia utente di jQuery....................................................... 3
Plug-in...................................................................................... 4
Tenere il markup pulito............................................................. 5
Adozione diffusa........................................................................ 5
Qual è il lato negativo? .................................................................. 5
Download e inclusione di jQuery .................................................. 6
Download di jQuery ................................................................ 6
CDN di Google........................................................................ 7
Nightly e versioni secondarie..................................................... 8
Compresso o con compresso? ................................................... 8
Anatomia di uno script jQuery....................................................... 9
L’alias di jQuery........................................................................ 9
Sezionare un’istruzione jQuery.................................................10
Frammenti di HTML: il DOM......................................................10
Se scegliete di accettarlo… ............................................................12
Capitolo 2 Selezione, decorazione e miglioramento...................13
Assicurarsi che la pagina sia pronta.................................................14
Selezione: l’elemento core di jQuery .............................................15
Selezione semplice....................................................................15
Restringere la selezione............................................................17
Verificare la selezione................................................................17
Filtri.........................................................................................18
Selezionare più elementi...........................................................18
Diventare buoni selezionatori...................................................19
Decorazione: CSS con jQuery ......................................................19
Lettura delle proprietà CSS.......................................................19
Impostare le proprietà CSS.......................................................20
Classi........................................................................................22
Miglioramento: aggiungere effetti con jQuery................................24
Nascondere e rivelare gli elementi............................................24
Miglioramento progressivo........................................................28
Aggiungere nuovi elementi.......................................................28
Rimuovere elementi esistenti....................................................30
Modificare il contenuto............................................................31
Animazione di base: nascondere e rivelare con stile...................32
Funzioni di callback..................................................................33
Alcuni trucchi................................................................................34
Evidenziare al passaggio del mouse...........................................34
Rivelatore di spoiler.................................................................35
Prima di continuare.......................................................................37
Capitolo 3 Animare, scorrere e ridimensionare............................39
Animazione...................................................................................39
Animare le proprietà CSS.........................................................39
Animazione dei colori..............................................................41
Easing.......................................................................................41
Easing avanzato.........................................................................43
Riquadri di contenuto “elastici”................................................44
La coda di animazione..............................................................46
Azioni di concatenamento........................................................47
Interrompere la catena..............................................................48
Navigazione animata ................................................................48
Navigazione animata, parte seconda..........................................51
La libreria dell’interfaccia utente di jQuery...............................53
Provate l’animazione.................................................................54
Scorrimento..................................................................................55
L’evento scroll...........................................................................55
Navigazione floating.................................................................56
Scorrere il documento..............................................................57
Barre di scorrimento personalizzate..........................................58
Ridimensionamento......................................................................60
L’evento resize..........................................................................60
Elementi ridimensionabili.........................................................62
Ecco come si esegue uno scorrimento e un’azione.........................68
Capitolo 4 Immagini e slideshow...................................................69
Lightbox........................................................................................69
Lightbox personalizzata.............................................................70
Risoluzione dei problemi con console.log.................................73
ColorBox: un plug-in della lightbox..........................................74
Ritagliare le immagini con Jcrop ...................................................76
Slideshow......................................................................................79
Slideshow a dissolvenza incrociata.............................................79
Scorrere gli slideshow...............................................................90
Widget dello slideshow nello stile di iPhoto..............................96
Usare l’immaginazione.................................................................101
Capitolo 5 Menu, schede, descrizioni a video e pannelli...........103
Menu..........................................................................................104
Menu espandibili e comprimibili............................................104
Indicatori di apertura e chiusura.............................................108
Espansione dei menu al passaggio del mouse...........................109
Menu a discesa.......................................................................110
Menu a fisarmonica.....................................................................114
Un semplice menu a fisarmonica............................................114
Menu a fisarmonica a più livelli..............................................117
Menu a fisarmonica dell’interfaccia utente di jQuery..............118
Schede.........................................................................................120
Schede di base........................................................................120
Schede dell’interfaccia utente di jQuery..................................121
Pannelli e riquadri.......................................................................124
Form di login a scorrimento verso il basso..............................125
Sovrapposizione scorrevole.....................................................126
Tooltip: descrizioni a video..........................................................129
Descrizioni a video semplici...................................................129
Descrizioni a video avanzate...................................................132
Ordinare fuori menu....................................................................138
Capitolo 6 Costruzione, Ajax e interattività................................139
Costruzione e best practice..........................................................139
jQuery più chiaro...................................................................140
Template lato client................................................................144
Lo sniffing dei browser (… non va bene!)...............................146
Corso accelerato su Ajax..............................................................147
Cos’è Ajax..............................................................................148
Caricamento del codice HTML remoto.................................148
Migliorare i collegamenti ipertestuali con Hijax......................149
Selezionare il codice HTML con i selettori.............................150
Caricamento avanzato.............................................................151
Prepararsi per il futuro: live e die ............................................151
Recuperare i dati con $.getJSON...........................................152
Uno strumento di ricerca di Twitter lato client........................153
Ajax, lo stakanovista di jQuery................................................154
Impostazioni comuni di Ajax..................................................155
Caricare script esterni con $.getScript ....................................156
Richieste GET e POST..........................................................156
Eventi Ajax di jQuery.............................................................157
Interattività: utilizzare Ajax ..........................................................158
Raccolta di immagini di Ajax..................................................158
Tag delle immagini.................................................................169
Ninja di Ajax? Ci siamo quasi!.....................................................174
Capitolo 7 Form, controlli e finestre di dialogo..........................175
Form...........................................................................................176
Validazione semplice dei form.................................................176
Validazione dei form con il plug-in Validation.........................179
Indicatore della lunghezza massima.........................................181
Suggerimenti dei form (etichette)...........................................182
Selezionare tutte le caselle di controllo....................................183
Modifica inline.......................................................................185
Completamento automatico...................................................188
Controllo per una classifica a stelle..........................................190
Controlli......................................................................................195
Selettore di date......................................................................195
Cursori...................................................................................197
Trascina e rilascia....................................................................200
Utilizzo di sortable.................................................................206
Barra di avanzamento.............................................................207
Finestre di dialogo e avvisi...........................................................209
Finestra di dialogo modale semplice........................................209
Finestra di dialogo dell’interfaccia utente di jQuery.................212
Notifiche in stile Growl..........................................................215
Avviso 1-up............................................................................218
Siete in gran “form”!...................................................................220
Capitolo 8 Elenchi, gerarchie e tabelle........................................221
Elenchi........................................................................................222
Elementi selezionabili dell’interfaccia utente di jQuery...........222
Ordinare gli elenchi................................................................226
Manipolare gli elenchi delle caselle di selezione.......................228
Gerarchie.....................................................................................232
Gerarchia espandibile..............................................................232
Delega degli eventi.................................................................235
Tabelle.........................................................................................236
Intestazioni di tabelle fisse.......................................................237
Ripetere l’intestazione............................................................240
Indice generale ix
Griglie di dati.........................................................................242
Selezionare le righe con le caselle di controllo.........................249
Abbiamo creato l’elenco A...........................................................251
Capitolo 9 Plug-in, temi e argomenti avanzati...........................253
Plug-in........................................................................................253
Creare un plug-in...................................................................254
Argomenti avanzati......................................................................260
Estendere jQuery ..................................................................260
Eventi.....................................................................................265
Miscellanea per un ninja di jQuery..............................................274
Evitare i conflitti.....................................................................274
Inserire e rimuovere le animazioni dalla coda..........................275
Considerare gli oggetti di JavaScript come oggetti di jQuery...277
Sequenza di temi.........................................................................278
Utilizzare i temi della raccolta.................................................278
Sequenza personalizzata..........................................................279
Consentire l’applicazione di temi ai componenti.....................280
StarTrackr!: epilogo......................................................................282
Appendice A Materiale di riferimento.............................................283
Opzioni $.ajax.............................................................................283
Flag........................................................................................283
Impostazioni...........................................................................284
Callback e funzioni.................................................................286
Opzioni $.support........................................................................286
Eventi..........................................................................................288
Proprietà degli eventi..............................................................289
Metodi degli eventi.................................................................289
Oggetti degli eventi fai da te...................................................289
Appendice B Primizie di JavaScript.................................................291
Coercizione dei tipi.....................................................................291
Operatori di uguaglianza..............................................................292
true e false...................................................................................293
Appendice C Helper dei plug-in.......................................................295
Selettore e contesto......................................................................295
Lo stack di jQuery.......................................................................296
Versione ridotta...........................................................................297
Indice analitico..................................................................................299
