Share
jQuery UI 1.8 è attualmente in fase di rilascio del candidato e, salvo la scoperta di un grosso bug o difetto, diventerà presto l'attuale versione stabile della libreria UI ufficiale di jQuery. Quindi cosa è cambiato dall'ultima versione stabile corrente della 1.7.2? Una delle principali differenze è ovviamente che la libreria ora gira sull'ultima release di jQuery stessa - versione 1.4.1, ma ci sono stati molti altri cambiamenti tra cui l'aggiunta di alcuni nuovi componenti, che esamineremo oltre corso di questo articolo.
L'autore di questo articolo, Dan Wellman, ha recentemente rilasciato jQuery UI 1.7, da Packt Publishing. È una lettura fantastica, e sono lieto di annunciare che abbiamo una manciata di copie da distribuire casualmente. Lascia semplicemente un commento sull'articolo e verrai automaticamente inserito nel disegno. Controlla di nuovo lunedì per scoprire se sei un vincitore!
Questa versione della libreria offre diverse correzioni di bug per alcuni componenti chiave, inclusi i widget Datepicker e Dialog e gli helper di interazione Droppable, Resizable e Selectable. Nessuno dei bug era di tipo show-stop, ma comunque, eliminare gli errori è una parte fondamentale della progressione in corso della libreria. Un punto importante da notare è che il BeforeClose l'evento del widget Dialog è stato deprecato e sostituito con BeforeClose in modo che segua la stessa convenzione di denominazione degli eventi di altri componenti.
Oltre ai bug nel codice, sono stati affrontati anche diversi problemi di stile e accessibilità; in particolare il testo del titolo dei widget di dialogo non può più scomparire dietro l'icona di chiusura e la navigabilità della tastiera del nuovo widget di pulsanti è stata migliorata. Per un elenco completo di tutte le correzioni di bug incluse nella versione 1.8, vedere il registro delle modifiche all'indirizzo http://jqueryui.com/docs/Changelog/1.8rc1
L'interfaccia utente di jQuery ora dispone di un sistema di posizionamento unico che può essere utilizzato ogni volta che un widget deve essere posizionato rispetto a un altro elemento, ad esempio con un menu a discesa o un suggerimento mobile. L'utility Position ci consente di specificare facilmente, usando una serie di stringhe semplici, quale parte dell'elemento posizionato dovrebbe essere fissata a quale parte dell'elemento target specificato. Quindi per esempio, il "in alto a sinistra" punto di un elemento può essere fissato al "in basso a destra" di un altro elemento specificato.
L'utility dispone anche di un robusto sistema di rilevamento delle collisioni che impedisce agli spettatori della pagina di essere esposti a brutte barre degli strumenti se l'elemento posizionato si avvicina troppo al bordo del viewport o non può occupare altrimenti il suo posto posizionato.
L'API per questa utility è compatta, con solo 7 opzioni configurabili in questa fase. Questo ci dà comunque tutto il controllo di cui abbiamo bisogno e ci consente di specificare fino a 81 possibili combinazioni di posizionamento; le opzioni che possiamo configurare includono quanto segue:
Uno dei miei widget preferiti è tornato come componente dell'interfaccia utente ufficiale! Il completamento automatico era un widget beta in una versione 1.6 della libreria e ora è tornato dopo un refactoring completo. È collegato agli input di testo sulla pagina e fornisce un elenco di possibili scelte quando un visitatore inizia a digitare nel campo di testo.
Il widget può prendere i suoi dati (gli elementi corrispondenti nel menu dei suggerimenti) da una varietà di fonti tra cui un array JavaScript standard, JSON tramite una richiesta AJAX o una funzione di callback flessibile che può implementare qualsiasi origine dati e restituire una risposta personalizzata da visualizzare in il menu dei suggerimenti.
Il completamento automatico è un widget altamente configurabile e include un'API completa di opzioni, metodi ed eventi da utilizzare. È completamente modificabile tramite SteamRoller e tastiera completamente navigabile. Tutto sommato, questo componente offre molte funzionalità alle tue pagine. In alcuni casi futuri il caching potrebbe anche essere un comportamento configurabile.
Diamo un'occhiata alla sua API; contiene le seguenti tre opzioni di configurazione:
I seguenti due metodi sono esposti da Completamento automatico:
Possiamo anche collegare le funzioni di callback ai seguenti eventi personalizzati:
Come bonus speciale, il file di origine per il widget di completamento automatico contiene anche il widget del menu beta, che è ancora in fase di sviluppo e deve essere rilasciato in una versione successiva della libreria. Finora sembra un'aggiunta robusta e attraente alla biblioteca e ci consente di trasformare una lista non ordinata in un attraente menù a tendina o a tendina. Sono supportate molte funzionalità tra cui sottomenu, icone, divisori e persino un menu di approfondimento con breadcrumb.
Il pulsante widget ci consente di implementare pulsanti attraenti e funzionali che possono essere configurati per comportarsi come un particolare tipo di pulsante; ad esempio, possiamo creare pulsanti standard, pulsanti stile radio in cui è possibile selezionare un solo pulsante in un set o pulsanti stile check in cui è possibile selezionare qualsiasi numero in un determinato set. Diversi tipi di pulsanti che incorporano un semplice menu a discesa possono anche essere creati.
È un widget molto flessibile e può essere costruito utilizzando una varietà di elementi sottostanti tra cui , e . I pulsanti sono completamente accessibili e conformi ad ARIA, aggiungendo o rimuovendo i ruoli e gli stati appropriati quando necessario. L'API è relativamente semplice a questo punto, ma copre tutti gli elementi essenziali con tre opzioni configurabili e un singolo metodo da richiamare; le opzioni di configurazione sono le seguenti:
L'evento a cui possiamo collegarci per eseguire una funzione di callback e reagire all'interazione è il clic evento; il nativo clic viene utilizzato l'evento del browser, a meno che non si utilizzi la radio o i pulsanti stile checkbox, nel qual caso l'evento viene attivato dal widget e non l'elemento sottostante.
La nuova utilità finale che si trova in jQuery UI 1.8 è l'utilità Mouse, che viene utilizzata da altri componenti della libreria per distribuire meglio le relative implementazioni dello stesso comportamento da diversi widget. Questo è ottimo per gli sviluppatori perché significa che se l'interazione con il mouse è un comportamento richiesto di un widget UI personalizzato, la logica di questa utilità può essere utilizzata senza doverla riscrivere manualmente. Come il componente Menu, tuttavia, questa utilità deve essere considerata beta e soggetta a una revisione considerevole nelle versioni future.
L'API è molto compatta; ci sono solo tre opzioni configurabili; ci sono una serie di metodi privati che vengono utilizzati internamente dal plugin, ma non avremmo bisogno di invocare manualmente. Le opzioni configurabili sono le seguenti:
jQuery UI 1.8 si preannuncia come una buona versione della libreria; con una combinazione di entrambe le correzioni di bug e nuovi componenti sembra essere un'importante pietra miliare nella roadmap della libreria. Per prima cosa abbiamo analizzato il nuovo sistema di posizionamento della biblioteca, che ci consente di accedere facilmente a un numero enorme di elementi diversi di posizionamento di un elemento rispetto a un altro elemento. Abbiamo quindi esaminato i due nuovi componenti Completamento automatico e Pulsante e abbiamo visto le diverse opzioni di configurazione, i metodi e gli eventi esposti da ciascuna delle loro API.
Accentsconagua