jQuery for Beginners (Part 6) - jQuery UI and Further Reading

Nella nostra ultima lezione su questo jQuery per principianti serie di tutorial, daremo una breve occhiata a Interfaccia utente di jQuery - il plugin jQuery più usato per aggiungere interfacce utente grafiche a web app. Dalle forme fantasiose agli effetti visivi, ai widget trascinabili, agli spinners e alle finestre di dialogo: l'interfaccia utente di jQuery ti dà la possibilità di creare interfacce utente Web complete.

Se non lo hai già fatto, assicurati di leggere i nostri articoli precedenti della serie:

• Introduzione: cos'è jQuery e perché dovrebbe interessarti? Making The Web Interactive: un'introduzione a jQuery Making The Web Interactive: un'introduzione a jQuery jQuery è una libreria di scripting lato client che utilizza quasi tutti i siti Web moderni: rende i siti Web interattivi. Non è l'unica libreria Javascript, ma è la più sviluppata, più supportata e più utilizzata ... Per saperne di più
• 1: Selettori e nozioni di base jQuery Tutorial - Per iniziare: Nozioni di base e selettori jQuery Tutorial - Per iniziare: Nozioni di base e selettori La settimana scorsa, ho parlato di quanto sia importante jQuery per qualsiasi sviluppatore web moderno e perché è fantastico. Questa settimana, penso che sia ora che ci sporchiamo le mani con un po 'di codice e abbiamo imparato come ... Per saperne di più
• 2: Metodi Introduzione a jQuery (Parte 2): Metodi e funzioni Introduzione a jQuery (Parte 2): Metodi e funzioni Questo fa parte dell'introduzione dei principianti in corso alla serie di programmazione web jQuery. La prima parte riguardava le nozioni di base di jQuery su come includerla nel tuo progetto e selettori. Nella parte 2, continueremo con ... Per saperne di più
• 3: In attesa del caricamento della pagina e delle funzioni anonime Introduzione a jQuery (parte 3): in attesa della pagina da caricare e funzioni anonime Introduzione a jQuery (parte 3): attesa della pagina per caricare e funzioni anonime jQuery è probabilmente un'abilità essenziale per lo sviluppatore web moderno, e in questa breve miniserie spero di darti le conoscenze per iniziare a farne uso nei tuoi progetti web. In ... Per saperne di più
• 4: Eventi jQuery Tutorial (Parte 4) - Gli ascoltatori di eventi jQuery Tutorial (Parte 4) - Gli ascoltatori di eventi Oggi faremo un salto di qualità e mostreremo davvero dove jQuery brilla - gli eventi. Se hai seguito le esercitazioni precedenti, ora dovresti avere una buona conoscenza del codice di base ... Per saperne di più
• Debugging con gli strumenti per sviluppatori di Chrome Scopri i problemi del sito Web con gli strumenti per sviluppatori di Chrome o Firebug Scopri i problemi del sito web con gli strumenti per sviluppatori di Chrome o Firebug Se hai seguito i miei tutorial su jQuery finora, potresti avere già riscontrato alcuni problemi di codice e non sapere come per risolverli. Di fronte a un bit di codice non funzionale, è molto ... Per saperne di più
• 5: AJAX jQuery Tutorial (Parte 5): AJAX Tutti! jQuery Tutorial (parte 5): AJAX tutti! Mentre siamo vicini alla fine della nostra serie di mini-tutorial di jQuery, è giunto il momento di dare un'occhiata più approfondita a una delle funzionalità più utilizzate di jQuery. AJAX consente a un sito Web di comunicare con ... Ulteriori informazioni

Che cos'è l'interfaccia utente di jQuery e Perché dovrei usarlo?

L'interfaccia utente di jQuery offre tutti i componenti necessari per una moderna applicazione Web con una GUI. Per mancanza di una descrizione migliore, è una raccolta di widget.

Per una rapida idea di cosa puoi fare con esso, basta sfogliare MakeUseOf. Nel nostro, il contenuto è in realtà solo separato div con una lista non ordinata per agire come un indice. Esegui la funzione di schede jQuery su di essi e si trasformano magicamente in schede. Eccezionale! Puoi anche caricare i contenuti delle schede tramite AJAX se lo desideri.

La pagina dei premi utilizza anche a “popup modale” finestra di dialogo per confermare l'azione dell'utente e restituire i messaggi. Per focalizzare l'attenzione dell'utente, è possibile fare in modo che la finestra di dialogo offuschi il resto del contenuto della pagina fino al termine dell'interazione.

Sul nostro sito Answers, usiamo il semplice tooltip funzionalità per fornire suggerimenti sui pulsanti.

jQuery UI eccelle davvero quando si tratta di forme, dando accesso a una moltitudine di cursori e raccoglitori. Sono un grande fan di date picker widget me stesso, che puoi caricare sopra una normale casella di testo dove l'utente deve digitare una data.

Sembra complicato no? Riesci a immaginare di scrivere qualcosa del genere in puro JavaScript? Ecco come lo fai con l'interfaccia utente di jQuery:

$ ( "# DateField") datepicker ().;

Non spenderò più tempo a spiegare quanto sia fantastico perché le demo ufficiali dell'interfaccia utente di jQuery offrono una buona panoramica di tutte le funzionalità disponibili e di semplici esempi di codice. Vai a leggerlo.

Aggiunta dell'interfaccia utente jQuery

Il modo più semplice per iniziare con l'interfaccia utente di jQuery è aggiungere le seguenti righe alla tua intestazione, ma assicurati che siano aggiunte DOPO il riferimento jQuery principale, poiché l'interfaccia utente di jQuery richiede che jQuery sia precaricato. Hai bisogno sia di un riferimento allo script del plugin, sia a foglio di stile che contiene la descrizione visiva di quegli elementi dell'interfaccia utente.

>