Najlepszy samouczek jQuery UI działa W 2024 r. W tym samouczku możesz dowiedzieć się zainstalować,sposób,wydarzenie,
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.
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.
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" );
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.
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.
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
.
enable
metodą jest disable
podejście odwrotnie.
$( "#elem" ).progressbar( "enable" );
Zadzwoń enable
metoda jest równoważna ustawić disabled
opcję false
.
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ż ()
lub .empty()
, aby zmodyfikować przodków, widget automatycznie zostanie zniszczona.
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" );
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!" ); } });
Większość zdarzeń są konkretne wzory, wszystkie widżety mają wspólne create
zdarzeń. Zdarzenie jest wyzwalane, gdy widżet jest tworzony.