Il framework degli effetti di jQuery UI è modulare, proprio come il framework widget, che consente di scegliere quali parti del pacchetto si desidera utilizzare e ridurre i requisiti del codice. Puoi crea un download personalizzato per te stesso, che tiene conto delle dipendenze tra i moduli.
Prima di guardare come creare un nuovo effetto, devi essere a conoscenza delle altre funzionalità già offerte dal framework degli effetti di jQuery UI, in modo che tu possa usarlo quando sviluppi i tuoi effetti personali.
Alla base dei singoli moduli di effetti dell'interfaccia utente di jQuery c'è un nucleo di funzionalità comunemente utilizzate. Queste abilità sono implementate qui in modo che non sia necessario re-inventarle e applicarle immediatamente ai propri effetti. Insieme all'animazione del colore, troverai l'animazione dagli attributi di una classe all'altra e varie funzioni di basso livello che potrebbero essere utili nello sviluppo di nuovi effetti.
Il modulo Effetti core aggiunge il supporto dell'animazione personalizzata per gli attributi di stile che contengono i valori dei colori: colori di primo piano e di sfondo e bordi e colori di contorno. jQuery stesso consente solo l'animazione di attributi che sono semplici valori numerici, con un designatore di unità opzionale come px, em o%. Non sa come interpretare valori più complessi, come i colori, o come incrementare correttamente quei valori per ottenere la transizione desiderata, come dal blu al rosso tramite un colore intermedio viola.
I valori di colore sono costituiti da tre componenti: i contributi rosso, verde e blu, ciascuno con un valore compreso tra 0 e 255. Possono essere specificati in HTML e CSS in diversi modi, come elencato qui:
Le componenti rossa, verde e blu devono essere separate e animate individualmente dai loro valori iniziali a quelli finali, prima di essere combinate nel nuovo colore composito per i passaggi intermedi. L'interfaccia utente di jQuery aggiunge passaggi di animazione per ciascun attributo interessato per decodificare correttamente i colori correnti e desiderati e per modificare il valore durante l'esecuzione dell'animazione. Oltre ai formati colore descritti nell'elenco precedente, la chiamata animata può anche accettare una matrice di tre valori numerici (ognuno compreso tra 0 e 255) per specificare il colore. Una volta definite queste funzioni, puoi animare i colori nello stesso modo in cui lo faresti per altri attributi numerici:
$('#myDiv').animate({backgroundColor: '#DDFFE8'});L'interfaccia utente di jQuery contiene un elenco ampliato di colori con nome che comprende, dal rosso di base e il verde al più scuro darkorchid e darksalmon. C'è anche un colore trasparente.
JQuery standard consente di aggiungere, rimuovere o attivare le classi sugli elementi selezionati. L'interfaccia utente di jQuery offre prestazioni migliori consentendoti di animare la transizione tra gli stati precedente e successivo. Lo fa estraendo tutti i valori degli attributi che possono essere animati (valori numerici e colori) dalle configurazioni iniziale e finale, e quindi richiamando una chiamata standard animata con tutti questi come proprietà da modificare. Questa nuova animazione viene attivata specificando una durata durante la chiamata alle funzioni addClass, removeClass o toggleClass:
$('#myDiv').addClass('highlight', 1000);jQuery UI aggiunge anche una nuova funzione, switchClass, che rimuove una classe e aggiunge una classe, con la transizione facoltativa tra i due stati (quando si fornisce una durata):
$('#myDiv').switchClass('oldClass', 'newClass', 1000);Per supportare meglio i vari effetti dell'interfaccia utente di jQuery, il modulo Effetti core offre diverse funzioni che sono utili a questi effetti e forse anche ai tuoi. Per illustrare come vengono utilizzate diverse di queste funzioni, il seguente elenco mostra le parti rilevanti dell'effetto diapositiva.
$.effects.effect.slide = function( o, done ) {// Create elementvar el = $( this ),props = [ "position", "top", "bottom", "left", "right", "width", "height" ],mode = $.effects.setMode( el, o.mode || "show" ), ...; // Determine mode of operation// Adjust$.effects.save( el, props ); // Save current settingsel.show();distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]( true );$.effects.createWrapper( el ).css({overflow: "hidden"}); // Create wrapper for animation...// Animationanimation[ ref ] = ...;// Animateel.animate( animation, {queue: false,duration: o.duration,easing: o.easing,complete: function() {if ( mode === "hide" ) {el.hide();}$.effects.restore( el, props ); // Restore original settings$.effects.removeWrapper( el ); // Remove animation wrapperdone();}});};È possibile utilizzare la funzione setMode per convertire una modalità di attivazione / disattivazione nel valore appropriato di show o hide in base alla visibilità corrente dell'elemento. Se la modalità fornita è mostrata o nascosta, mantiene quel valore e, in questo caso, il valore predefinito viene visualizzato se non viene fornito.
Prima di avviare l'animazione per l'effetto, potresti voler utilizzare la funzione di salvataggio per ricordare i valori originali di diversi attributi (dai nomi degli oggetti di scena) sull'elemento, in modo che possano essere ripristinati al termine. I valori sono memorizzati sull'elemento utilizzando la funzione dati jQuery.
Per facilitare il movimento di un elemento per un effetto, puoi avvolgere un contenitore attorno a quell'elemento con la funzione createWrapper da utilizzare come punto di riferimento per il movimento. Le informazioni di posizione vengono copiate dall'elemento specificato nel wrapper in modo che appaia direttamente sopra l'elemento originale. L'elemento viene quindi posizionato all'interno del nuovo contenitore in alto a sinistra in modo che l'utente non possa notare l'effetto complessivo. La funzione restituisce un riferimento al wrapper.
Eventuali modifiche alle impostazioni left / right / top / bottom per l'elemento originale saranno ora relative alla sua posizione originale, senza influenzare gli elementi circostanti. Dopo aver salvato alcuni valori di attributo in precedenza, si utilizzerà la funzione di ripristino al completamento dell'animazione per riportarli alle impostazioni originali. Allo stesso tempo, è necessario rimuovere qualsiasi wrapper creato in precedenza con la funzione remove-Wrapper. Questa funzione restituisce un riferimento al wrapper se è stato rimosso, o all'elemento stesso se non ci fosse un wrapper.
Ci sono alcune altre funzioni fornite dal modulo jQuery UI Effects Core che possono essere utili:
getBaseline (origine, originale) Questa funzione normalizza una specifica di origine (una matrice a due elementi di posizioni verticali e orizzontali) in valori frazionari (da 0,0 a 1,0) in base a una dimensione originale (un oggetto con attributi di altezza e larghezza). Converte le posizioni nominate (in alto, a sinistra, al centro e così via) ai valori 0.0, 0.5 o 1.0 e converte i valori numerici nella proporzione della dimensione pertinente. L'oggetto restituito ha attributi xey per contenere i valori frazionari nelle direzioni corrispondenti. Per esempio,
var baseline = $.effects.getBaseline(['middle', 20], {height: 100, width: 200}); // baseline = {x: 0.1, y: 0.5}setTransition (elemento, elenco, fattore, valore) Per applicare un fattore di scala a più valori di attributo contemporaneamente, utilizzare questa funzione. Per ogni nome di attributo nell'elenco, recupera il suo valore corrente per elemento e aggiorna quello moltiplicandolo per fattore. Imposta il risultato nell'oggetto valore sotto il nome dell'attributo e restituisci tale oggetto dalla funzione. Ad esempio, per ridurre alcuni valori della metà, potresti fare questo:
el.from = $.effects.setTransition(el, ['borderTopWidth', 'borderBottomWidth', ...], 0.5, el.from);cssUnit (chiave) Per separare un attributo CSS (chiave) nominato nella sua quantità e unità (em, pt, px o%), restituito come una matrice di due valori, utilizzare questa funzione. Se le unità non sono uno di questi tipi noti, viene restituito un array vuoto. Per esempio,
var value = el.cssUnit('width'); // e.g. value = [200, 'px']Le funzioni presentate in questa sezione sono utilizzate da molti degli effetti forniti dall'interfaccia utente di jQuery. Questi effetti sono esaminati nella prossima sezione.
Numerosi effetti sono forniti dall'interfaccia utente di jQuery. Molti di questi sono progettati per migliorare il modo in cui un elemento appare o scompare (come il cieco e il rilascio), mentre altri servono per attirare l'attenzione su un elemento (come l'evidenziazione e la scossa):
Questi effetti possono essere usati in congiunzione con l'interfaccia utente jQuery avanzata, nascondere e attivare le funzioni fornendo il nome dell'effetto desiderato come primo parametro. È inoltre possibile fornire opzioni aggiuntive che modificano il comportamento dell'effetto, la durata dell'animazione e una funzione di callback attivata al termine.
$('#aDiv').hide('clip');$('#aDiv').toggle('slide', {direction: 'down'}, 1000);Nei moduli dell'interfaccia utente jQuery sono incluse alcune funzioni di utilità di base, comportamenti di basso livello (come trascinamento della selezione), componenti di alto livello o widget (come Tab e Datepicker) e numerosi effetti visivi. Puoi utilizzare questi effetti per migliorare la presentazione degli elementi sulla tua pagina web o per portare un particolare elemento all'attenzione dell'utente. Per aiutarti a creare i tuoi effetti, c'è un nucleo di funzioni comunemente usate disponibili.
Hai usato il framework degli effetti di jQuery UI? Come si confronta alle interpolazioni CSS native? Fateci sapere che ne pensate nei commenti.