jQuery UI działa

jQuery UI zawiera wiele drobnych części w celu utrzymania stanu (widget), dlatego, że jest to typowy plugin jQuery używa nieco inny wzór. Jego instalacja jest podobna do większości instalacji wtyczki jQuery, jQuery UI widgety bazuje części biblioteki (Widget fabryczne) utworzony widżet biblioteki zapewnia wspólny interfejs API. Tak, tak długo, jak nauczyć się korzystać z jednego, wiesz jak korzystać z innych widżetów (widget). Ten poradnik (progressbar) Pasek postępu przykłady kodu widget opisuje cechy wspólne.

zainstalować

W celu śledzenia statusu komponentów, najpierw przedstawić pełny cykl życia widgetu. Kiedy widżet jest zainstalowany i zaczyna cykl życia. Musimy po prostu zadzwonić plug-in na jednym lub więcej elementów, które jest instalowane widgety.

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

Będzie to zainicjować każdego elementu w obiekcie jQuery, w tym przypadku, id element jako "elem". Ponieważ wywołać bez argumentów .progressbar() metodę, widget to opcja domyślna, zgodnie z jego inicjalizacji. Możemy przekazać zestaw opcji w czasie instalacji, dzięki czemu można zastąpić domyślną opcję.

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

Liczba opcji podczas instalacji przeszedł znacznie w zależności od naszych potrzeb. Nie przechodzą żadnych opcji użyć ich wartości domyślnych.

Opcje są częścią małego państwa członkowskiego, więc możemy również ustawić opcje po instalacji. Będziemy postępować zgodnie z option opisuje tę część metody.

sposób

Ponieważ widget został zainicjowany, możemy zapytać swój status, lub wykonywać czynności na widget. Wszystkie czynności wykonuje się po inicjalizacji w postaci połączenia metody. Aby wywołać metodę na widget, możemy przekazać nazwę metody do wtyczki jQuery. Na przykład, aby zadzwonić na pasku postępu (Progressbar) widget value metody, powinniśmy używać:

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

Jeśli metoda wymaga parametrów, możemy przekazać parametry po nazwie metody. Na przykład, aby przekazać parametr 40 na value metody, możemy użyć:

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

Podobnie jak inne metody jQuery, większość widżetów odwołuje metoda zwraca obiekt jQuery.

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

Metoda publiczna

Każdy widget ma swój własny zestaw widżetów, które dostarczają podejścia opartego funkcjonalności. Jednak istnieją sposoby, które wszystkie mają wspólne są widgety.

opcja

Jak już wspomniano wcześniej, możemy po uruchomieniu option , aby zmienić sposób wyboru. Na przykład, możemy wywołać option zmiany progressbar metodą (pasek postępu) wartość 30.

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

Należy pamiętać, że jest przed nazywamy value przykłady wykonania sposobu są różne. W tym przykładzie wzywamy option metodę, możliwość zmiany wartości do 30.

Możemy również uzyskać bieżącą wartość opcji.

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

Ponadto, możemy dać option zdać metodę obiektu, zaktualizuj wiele opcji.

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

Można zauważyć, że option metoda ma wartości kodu jQuery i setter samą flagę jak .css() i .attr() . Jedyną różnicą jest to, że trzeba zdać "opcję" string jako pierwszy parametr.

wyłączyć

disable możliwości wyłączenia widget. Na pasku postępu (Progressbar) przypadkach będzie to zmienić styl, tak że pasek postępu jest wyłączone.

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

Zaproszenie disable metoda jest równoważna ustawić disabled opcję true .

umożliwiać

enable metodą jest disable podejście odwrotnie.

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

Zadzwoń enable metoda jest równoważna ustawić disabled opcję false .

zniszczyć

Jeśli nie trzeba już widżet, można go zniszczyć, powrót do pierwotnego znaku. Oznacza to, że po zakończeniu cyklu widget.

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

Po zniszczyć widżet, nie można wywołać dowolną metodę na części, chyba że ponownie zainicjować widget. Jeśli chcesz usunąć element bezpośrednio .remove() , może również .html() lub .empty() , aby zmodyfikować przodków, widget automatycznie zostanie zniszczona.

widget

Niektóre widżety generowane elementu opakowania lub elementy związane z pierwotnym elementem jest odłączony. W poniższym przykładzie widget zwroty generowane elementy. Na pasku postępu (progressbar) przykład, nie generuje opakowanie, widget metoda zwraca oryginalne elementy.

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

wydarzenie

Wydarzenia Wszystkie widgety mają wiele zachowań związanych z nimi, gdy zmienia się stan poinformować. Dla większości małych części, gdy zdarzenie jest wywoływane, nazwę do nazwy widget jako przedrostek. Na przykład, możemy powiązać pasek postępu () zdarzenie zmian, po zmianie wartości wyzwolone.

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

Każde zdarzenie ma odpowiednią korektę, jako opcja dla renderingu. Możemy użyć paska postępu (Progressbar) Do change zwrotnego, co jest równoznaczne z wiążącym progressbarchange imprezy.

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

wydarzenia publiczne

Większość zdarzeń są konkretne wzory, wszystkie widżety mają wspólne create zdarzeń. Zdarzenie jest wyzwalane, gdy widżet jest tworzony.