Latest web development tutorials

jQuery UI funziona

jQuery UI contiene molte piccole parti di mantenere lo stato (Widget), quindi, si tratta di un tipico plugin per jQuery utilizza un modello leggermente diverso. La sua installazione è simile all'installazione di più del plugin jQuery, widget jQuery UI è basata parti biblioteca (Widget Factory) creato biblioteca widget di fornisce una API comune. Quindi, fino a quando si impara a utilizzare uno, si sa come utilizzare altri widget (Widget). Questo tutorial (progressbar) barra di avanzamento esempi di codice widget di descrive le caratteristiche comuni.

installare

Al fine di monitorare lo stato dei componenti, per prima cosa introduciamo il ciclo di vita del widget. Quando il widget è stato installato e il ciclo di vita comincia. Abbiamo solo bisogno di chiamare il plug-in su uno o più elementi, vale a dire i widget installati. 

$( "#elem" ).progressbar();

Questo inizializza ciascun elemento nell'oggetto jQuery, in questo caso, l'id elemento come "elem". Perché noi chiamiamo senza argomenti .progressbar() il metodo, il widget è l'opzione di default in accordo con la sua inizializzazione. Siamo in grado di superare una serie di opzioni, al momento dell'installazione, in modo che possa sostituire l'opzione predefinita. 

$( "#elem" ).progressbar({ value: 20 });

Il numero di opzioni quando l'installazione passò molto in base alle nostre esigenze. non abbiamo passato tutte le opzioni che si utilizzano i loro valori di default.

Le opzioni sono parte di un piccolo Stato membro, in modo che possiamo anche impostare le opzioni dopo l'installazione. Seguiremo l' option descrive questa parte del metodo.

modo

Dal momento che il widget è stato inizializzato, siamo in grado di interrogare il suo status, o eseguire azioni su widget. Tutte le azioni vengono eseguite dopo l'inizializzazione, sotto forma di una chiamata di metodo. Per richiamare un metodo sul widget, siamo in grado di passare il nome del metodo al plugin jQuery. Ad esempio, per chiamare sulla barra di avanzamento (progressbar) widget di value metodo, dovremmo usare: 

$( "#elem" ).progressbar( "value" );

Se il metodo accetta parametri, siamo in grado di passare i parametri dopo il nome del metodo. Ad esempio, per passare un parametro 40 al value metodo, possiamo usare: 

$( "#elem" ).progressbar( "value", 40 );

Come altri metodi di jQuery, la maggior parte dei widget collegamento metodo restituisce l'oggetto jQuery. 

$( "#elem" )
    .progressbar( "value", 90 )
    .addClass( "almost-done" );

Metodo pubblico

Ogni widget ha una propria serie di widget che forniscono approccio basato funzionalità. Tuttavia, ci sono modi che tutti abbiamo in comune sono i widget.

opzione

Come abbiamo accennato in precedenza, possiamo dopo l'inizializzazione option di modificare il metodo di selezione. Ad esempio, possiamo chiamare la option di cambiare il metodo di progressbar (barra di avanzamento) il valore di 30. 

$( "#elem" ).progressbar( "option", "value", 30 );

Si prega di notare, questo è prima che chiamiamo value esempi del metodo è diverso. In questo esempio, che noi chiamiamo option metodo, l'opzione per modificare il valore di 30.

Possiamo anche ottenere il valore corrente di un'opzione. 

$( "#elem" ).progressbar( "option", "value" );

Inoltre, siamo in grado di dare option passare un metodo di oggetto, aggiornare più opzioni. 

$( "#elem" ).progressbar( "option", {
    value: 100,
    disabled: true
});

Avrete notato che option metodo ha i valori di codice jQuery e setter stessa bandiera, come .css() e .attr() . L'unica differenza è che si deve passare il "opzione" stringa come primo parametro.

disabilitare

disable modo per disattivare il widget. Nei casi barra di avanzamento (ProgressBar), questo cambierà lo stile in modo che la barra di avanzamento è disabilitato. 

$( "#elem" ).progressbar( "disable" );

Chiamata disable metodo è equivalente a impostare il disabled opzione true .

permettere

enable metodo è disable l'approccio opposto. 

$( "#elem" ).progressbar( "enable" );

Chiamare enable il metodo è equivalente a impostare il disabled opzione false .

distruggere

Se non è più necessario il widget, è possibile distruggere, tornare al punto originale. Ciò significa che la risoluzione del widget di ciclo di vita. 

$( "#elem" ).progressbar( "destroy" );

Una volta che si distrugge un widget, non è possibile chiamare qualsiasi metodo sul componente, a meno che non ri-inizializzare il widget. Se si desidera rimuovere l'elemento direttamente attraverso .remove() , può anche .html() o .empty() per modificare gli antenati, il widget verrà distrutto automaticamente.

widget di

Alcuni widget generati elemento o elementi collegati all'elemento originale involucri viene scollegato. Nel seguente esempio, widget rendimenti generati elementi. Nell'esempio barra di avanzamento (ProgressBar), non genera l'involucro, widget metodo restituisce gli elementi originali. 

$( "#elem" ).progressbar( "widget" );

evento

Eventi Tutti i widget hanno una varietà di comportamenti ad essi associati, per quando i cambiamenti di stato farvi sapere. Per la maggior parte piccole parti, quando l'evento viene attivato, il nome al nome del widget come prefisso. Ad esempio, siamo in grado di legare l'evento progress bar () di cambiamento, una volta che il valore cambia innescato. 

$( "#elem" ).bind( "progressbarchange", function() {
    alert( "The value has changed!" );
});

Ogni evento ha un corrispondente correzione, come opzione per il rendering. Possiamo usare la barra di avanzamento (progressbar) il change di callback, che equivale a vincolante progressbarchange evento. 

$( "#elem" ).progressbar({
    change: function() {
        alert( "The value has changed!" );
    }
});

eventi pubblici

La maggior parte degli eventi sono per i widget specifici, tutti i widget hanno un comune, create eventi. L'evento viene attivato al momento della creazione del widget.