JqueryUI - Spinner

Widżet Spinner dodaje strzałkę w górę / w dół po lewej stronie pola wprowadzania, umożliwiając w ten sposób użytkownikowi zwiększanie / zmniejszanie wartości w polu wprowadzania. Umożliwia użytkownikom wpisywanie wartości bezpośrednio lub modyfikowanie istniejącej wartości, obracając ją za pomocą klawiatury, myszy lub kółka przewijania. Posiada również funkcję pomijania wartości. Oprócz podstawowych funkcji numerycznych umożliwia również zglobalizowane opcje formatowania (np. Waluta, separator tysięcy, ułamki dziesiętne itp.), Zapewniając w ten sposób wygodne, umiędzynarodowione, zamaskowane pole wprowadzania.

Poniższy przykład zależy od Globalize . Możesz pobrać pliki Globalize zhttps://github.com/jquery/globalize. Kliknij komunikaty linku wybierz wersję, którą chcesz i pobrać zip lub tar.gz pliku. Wyodrębnij pliki i skopiuj następujące pliki do folderu, w którym znajduje się przykład.

lib / globalize.js: ten plik zawiera kod Javascript do obsługi lokalizacji

lib / globalize.culture.js: ten plik zawiera pełny zestaw ustawień narodowych, które zawiera biblioteka Globalize.

Te pliki są również obecne w folderze zewnętrznym biblioteki jquery-ui.

jQueryUI udostępnia metodę spinner (), która tworzy spinner.

Składnia

Plik spinner() metoda może być stosowana w dwóch formach -

$ (selektor, kontekst) .spinner (opcje) Metoda
$ (selektor, kontekst) .spinner ("akcja", parametry) Metoda

$ (selektor, kontekst) .spinner (opcje) Metoda

Metoda spinner (options) deklaruje, że element HTML i jego zawartość powinny być traktowane i zarządzane jako spinner. Te opcje parametr jest obiektem, który określa wygląd i zachowanie elementów obracanych zaangażowanych.

Składnia

$(selector, context).spinner (options);

Możesz podać jedną lub więcej opcji naraz, używając obiektu JavaScript. Jeśli ma zostać podanych więcej niż jedna opcja, oddziel je przecinkiem w następujący sposób -

$(selector, context).spinner({option1: value1, option2: value2..... });

W poniższej tabeli wymieniono różne opcje , których można użyć z tą metodą -


$( ".selector" ).spinner(
   { culture: "fr" }
);
$( ".selector" ).spinner(
   { disabled: true }
);
$( ".selector" ).spinner(
   { icons: { down: "custom-down-icon", up: "custom-up-icon" } }
);
$( ".selector" ).spinner(
   { incremental: false }
);
$( ".selector" ).spinner(
   { max: 50 }
);
$( ".selector" ).spinner(
   { min: 0 }
);
$( ".selector" ).spinner(
   { numberFormat: "n" }
);
$( ".selector" ).spinner(
   { page: 5 }
);
$( ".selector" ).spinner(
   { step: 2 }
);

Sr.No.	Opcja i opis
1	kultura Ta opcja ustawia kulturę, która ma być używana do analizowania i formatowania wartości. Domyślnie jego wartość tonull co oznacza, że używana jest aktualnie ustawiona kultura w Globalize. Option - culture Ta opcja ustawia kulturę, która ma być używana do analizowania i formatowania wartości. Domyślnie jego wartość tonullco oznacza, że używana jest aktualnie ustawiona kultura w Globalize. Ma znaczenie tylko wtedy, gdy ustawiona jest opcja numberFormat . Wymaga uwzględnienia globalizacji . Syntax `$( ".selector" ).spinner( { culture: "fr" } );`
2	wyłączone Ta opcja, jeśli jest ustawiona na true, wyłącza pokrętło. Domyślnie jego wartość tofalse. Option - disabled Ta opcja, jeśli jest ustawiona na true, wyłącza pokrętło. Domyślnie jego wartość tofalse. Syntax `$( ".selector" ).spinner( { disabled: true } );`
3	ikony Ta opcja ustawia ikony używane dla przycisków, pasujące do ikony dostarczonej przez strukturę CSS interfejsu użytkownika jQuery . Domyślnie jego wartość to{ down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }. Option - icons Ta opcja ustawia ikony używane dla przycisków, pasujące do ikony dostarczonej przez strukturę CSS interfejsu użytkownika jQuery . Domyślnie jego wartość to{ down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }. Syntax `$( ".selector" ).spinner( { icons: { down: "custom-down-icon", up: "custom-up-icon" } } );`
4	przyrostowe Ta opcja kontroluje liczbę kroków wykonywanych podczas przytrzymywania przycisku obracania. Domyślnie jego wartość totrue. Option - incremental Ta opcja kontroluje liczbę kroków wykonywanych podczas przytrzymywania przycisku obracania. Domyślnie jego wartość totrue. Może to być typ - Boolean- Jeśli ustawione na false, wszystkie kroki są równe. Jeśli ustawione na true , delta krokowa będzie wzrastać, gdy będzie się obracał bez przerwy. Function - Musi zwrócić liczbę kroków, które powinny wystąpić w bieżącym spinie. Syntax `$( ".selector" ).spinner( { incremental: false } );`
5	max Ta opcja wskazuje maksymalną dozwoloną wartość. Domyślnie jego wartość tonull co oznacza, że nie ma narzuconego maksimum. Option - max Ta opcja wskazuje maksymalną dozwoloną wartość. Domyślnie jego wartość tonull co oznacza, że nie ma narzuconego maksimum. Może to być typ - Number - wartość maksymalna. String- Jeśli globalizacji jest włączone, opcja max mogą być przekazywane jako ciąg znaków, który będzie analizowany na podstawie numberFormat i kultury opcji Syntax `$( ".selector" ).spinner( { max: 50 } );`
6	min Ta opcja wskazuje minimalną dozwoloną wartość. Domyślnie jego wartość tonull co oznacza, że nie ma narzuconego minimum. Option - min Ta opcja wskazuje minimalną dozwoloną wartość. Domyślnie jego wartość tonull co oznacza, że nie ma narzuconego minimum. Może to być typ - Number - minimalna wartość. String- Jeśli globalizacji jest włączone, opcja min mogą być przekazywane jako ciąg znaków, który będzie analizowany na podstawie numberFormat i kultury opcji . Syntax `$( ".selector" ).spinner( { min: 0 } );`
7	format liczbowy Ta opcja wskazuje format liczb przekazywanych do Globalizacji , jeśli jest dostępny. Najczęściej są to „n” dla liczby dziesiętnej i „C” dla wartości waluty. Domyślnie jego wartość tonull. Option - numberFormat Ta opcja wskazuje format liczb przekazywanych do Globalizacji , jeśli jest dostępny. Najczęściej są to „n” dla liczby dziesiętnej i „C” dla wartości waluty. Domyślnie jego wartość tonull. Syntax `$( ".selector" ).spinner( { numberFormat: "n" } );`
8	strona Ta opcja wskazuje liczbę kroków, które należy wykonać podczas stronicowania za pomocą metod pageUp / pageDown. Domyślnie jego wartość to10. Option - page Ta opcja wskazuje liczbę kroków, które należy wykonać podczas stronicowania za pomocą metod pageUp / pageDown. Domyślnie jego wartość to10. Syntax `$( ".selector" ).spinner( { page: 5 } );`
9	krok Ta opcja wskazuje rozmiar kroku do wykonania podczas obracania za pomocą przycisków lub metod stepUp () / stepDown () . Atrybut step elementu jest używany, jeśli istnieje, a opcja nie jest jawnie ustawiona. Option - step Ta opcja wskazuje rozmiar kroku do wykonania podczas obracania za pomocą przycisków lub metod stepUp () / stepDown () . Atrybut step elementu jest używany, jeśli istnieje, a opcja nie jest jawnie ustawiona. Może to być typ - Number - Wielkość kroku. String- Jeśli uwzględniono opcję Globalize, opcja step może zostać przekazana jako ciąg, który zostanie przeanalizowany na podstawie opcji numberFormat i culture , w przeciwnym razie powróci do natywnego parseFloat. Syntax `$( ".selector" ).spinner( { step: 2 } );`

W poniższej sekcji przedstawiono kilka działających przykładów funkcjonalności widżetu obrotowego.

Domyślna funkcjonalność

Poniższy przykład ilustruje prosty przykład funkcji widżetu pokrętła, nie przekazując żadnych parametrów do spinner() metoda.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-1 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-1" ).spinner();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "example">
         <input type = "text" id = "spinner-1" value = "0" />
      </div>
   </body>
</html>

Zapiszmy powyższy kod w pliku HTML spinnerexample.htmi otwórz go w standardowej przeglądarce obsługującej javascript, musisz również zobaczyć następujące dane wyjściowe. Teraz możesz grać z wynikiem -

Korzystanie z opcji Min, Max i Step

Poniższy przykład ilustruje użycie trzech opcji min, max i krok w widżecie pokrętła JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-2,#spinner-3 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-2" ).spinner({
               min: -10, 
               max: 10
            });
            $('#spinner-3').spinner({
               step: 100, 
               min: -1000000, 
               max: 1000000
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "example">
         Spinner Min, Max value set:
         <input type = "text" id = "spinner-2" value = "0" /><br><br>
         Spinner increments/decrements in step of of 100:
         <input type = "text" id = "spinner-3" value = "0" />
      </div>
   </body>
</html>

W powyższym przykładzie widać, że w pierwszym pokrętle wartości max i min są ustawione odpowiednio na 10 i -10. Stąd przekroczenie tych wartości, przędzarka przestanie zwiększać / zmniejszać. W drugiej przędzarce wartość przędzarki zwiększa / zmniejsza się o 100 stopni.

Korzystanie z ikon Opcja

Poniższy przykład demonstruje użycie opcji icons w widżecie spinner JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-5 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-5" ).spinner({
               icons: {
                  down: "custom-down-icon", up: "custom-up-icon"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "example">
         <input type = "text" id = "spinner-5" value = "0" />
      </div>
   </body>
</html>

W powyższym przykładzie możesz zauważyć zmianę pokrętła obrazów.

Korzystanie z opcji culture, numberFormat i strony

Poniższy przykład ilustruje użycie trzech opcji culture, numberFormat i strona w widżecie spinner JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script src = "/jqueryui/jquery-ui-1.10.4/external/jquery.mousewheel.js"></script>
      <script src = "/jqueryui/jquery-ui-1.10.4/external/globalize.js"></script>
      <script src = "/jqueryui/jquery-ui-1.10.4/external/globalize.culture.de-DE.js"></script>
      
      <script>
         $(function() {
            $( "#spinner-4" ).spinner({
               culture:"de-DE",
               numberFormat:"C",
               step:2,
               page:10
            });
         });
      </script>
   </head>
   
   <body>
      <p>
         <label for = "spinner-4">Amount to donate:</label>
         <input id = "spinner-4" name = "spinner" value = "5">
      </p>
     
   </body>
</html>

W powyższym przykładzie widać, że pokrętło wyświetla liczbę w formacie waluty, gdy parametr numberFormat jest ustawiony na „C”, a kultura jest ustawiona na „de-DE”. Tutaj użyliśmy plików Globalize z biblioteki jquery-ui.

$ (selektor, kontekst) .spinner ("akcja", parametry) Metoda

Metoda spinner („action”, params) może wykonać akcję na elementach błystki, taką jak włączenie / wyłączenie błystki. Akcja jest określona jako łańcuch w pierwszym argumencie (np. „Disable” wyłącza pokrętło). Zapoznaj się z czynnościami, które można wykonać, w poniższej tabeli.

Składnia

$(selector, context).spinner ("action", params);;

W poniższej tabeli wymieniono różne akcje , których można użyć z tą metodą -


$(".selector").spinner("destroy");
$(".selector").spinner("disable");
$(".selector").spinner("enable");
var isDisabled = $( ".selector" ).spinner( "option", "disabled" );
var options = $( ".selector" ).spinner( "option" );
$( ".selector" ).spinner( "option", "disabled", true );
$(".selector").spinner("option", { disabled: true });
$(".selector").spinner("pageDown");
$(".selector").spinner("pageUp");
$(".selector").spinner("stepDown");
$(".selector").spinner("stepUp");
var value = $( ".selector" ).spinner( "value" );
$( ".selector" ).spinner( "value", 50 );
$( ".selector" ).spinner( "widget");

Sr.No.	Działanie i opis
1	zniszczyć Ta czynność całkowicie niszczy funkcję przędzarki elementu. Elementy wracają do stanu sprzed uruchomienia. Ta metoda nie przyjmuje żadnych argumentów. Action - destroy Ta czynność całkowicie niszczy funkcję przędzarki elementu. Elementy wracają do stanu sprzed uruchomienia. Ta metoda nie przyjmuje żadnych argumentów. Syntax `$(".selector").spinner("destroy");`
2	wyłączyć Ta czynność wyłącza funkcję pokrętła. Ta metoda nie przyjmuje żadnych argumentów. Action - disable Ta czynność wyłącza funkcję pokrętła. Ta metoda nie przyjmuje żadnych argumentów. Syntax `$(".selector").spinner("disable");`
3	włączyć Ta akcja włącza funkcjonalność tarczy. Ta metoda nie przyjmuje żadnych argumentów. Action - enable Ta akcja włącza funkcjonalność tarczy. Ta metoda nie przyjmuje żadnych argumentów. Syntax `$(".selector").spinner("enable");`
4	opcja (optionName) Ta akcja pobiera wartość aktualnie skojarzoną z określoną optionName . Gdzie nazwa_opcji to nazwa opcji do pobrania. Action - option( optionName ) Ta akcja pobiera wartość aktualnie skojarzoną z określoną optionName . Gdzie nazwa_opcji to nazwa opcji do pobrania. Syntax `var isDisabled = $( ".selector" ).spinner( "option", "disabled" );`
5	opcja Ta akcja pobiera obiekt zawierający pary klucz / wartość reprezentujące bieżący skrót opcji pokrętła. Ta metoda nie przyjmuje żadnych argumentów. Action - option Ta akcja pobiera obiekt zawierający pary klucz / wartość reprezentujące bieżący skrót opcji pokrętła. Ta metoda nie przyjmuje żadnych argumentów. Syntax `var options = $( ".selector" ).spinner( "option" );`
6	opcja (nazwa_opcji, wartość) Ta akcja ustawia wartość opcji pokrętła skojarzonej z określoną opcją nazwa_opcji . Action - optionName Ta akcja ustawia wartość opcji pokrętła skojarzonej z określoną opcją nazwa_opcji . Syntax `$( ".selector" ).spinner( "option", "disabled", true );`
7	opcja (opcje) Ta akcja ustawia jedną lub więcej opcji dla pokrętła. Action - option( options ) Ta akcja ustawia jedną lub więcej opcji dla pokrętła. Syntax `$(".selector").spinner("option", { disabled: true });`
8	pageDown ([strony]) Ta czynność zmniejsza wartość o określoną liczbę stron, zgodnie z definicją w opcji strony. Action - pageDown( [pages ] ) Ta akcja zmniejsza wartość o określoną liczbę stron, zgodnie z definicją w opcji strony. Wywołanie pageDown () spowoduje wyzwolenie zdarzeń start, spin i stop . Syntax `$(".selector").spinner("pageDown");`
9	pageUp ([strony]) Ta akcja zwiększa wartość o określoną liczbę stron, zgodnie z definicją w opcji strony. Action - pageUp( [pages ] ) Ta akcja zwiększa wartość o określoną liczbę stron, zgodnie z definicją w opcji strony. Wywołanie pageUp () spowoduje wyzwolenie zdarzeń start, spin i stop . Syntax `$(".selector").spinner("pageUp");`
10	stepDown ([kroki]) Ta akcja zmniejsza wartość o określoną liczbę kroków. Action - stepDown( [steps ] ) Ta akcja zmniejsza wartość o określoną liczbę kroków. Wywołanie stepDown () spowoduje wyzwolenie zdarzeń start, spin i stop . Syntax `$(".selector").spinner("stepDown");`
11	stepUp ([kroki]) Ta akcja zwiększa wartość o określoną liczbę kroków. Action - stepUp( [steps ] ) Ta akcja zwiększa wartość o określoną liczbę kroków. Wywołanie stepUp () spowoduje wyzwolenie zdarzeń start, spin i stop . Syntax `$(".selector").spinner("stepUp");`
12	wartość Ta akcja pobiera bieżącą wartość jako liczbę. Wartość jest analizowana na podstawie opcji numberFormat i culture. Ta metoda nie przyjmuje żadnych argumentów. Action - value Ta akcja pobiera bieżącą wartość jako liczbę. Wartość jest analizowana na podstawie opcji numberFormat i culture. Ta metoda nie przyjmuje żadnych argumentów. Syntax `var value = $( ".selector" ).spinner( "value" );`
13	wartość (wartość) Ta akcja ustawia wartość. jeśli wartość jest przekazywana, wartość jest analizowana na podstawie opcji numberFormat i culture. Action - value( value ) Ta akcja ustawia wartość. jeśli wartość jest przekazywana, wartość jest analizowana na podstawie opcji numberFormat i culture. Syntax `$( ".selector" ).spinner( "value", 50 );`
14	widget Ta akcja zwraca element widżetu spinner; ten z adnotacją z nazwą klasy ui-spinner . Action - widget Ta akcja zwraca element widżetu spinner; ten z adnotacją z nazwą klasy ui-spinner . Syntax `$( ".selector" ).spinner( "widget");`

Poniższe przykłady pokazują, jak korzystać z działań podanych w powyższej tabeli.

Korzystanie z akcji stepUp, stepDown, pageUp i pageDown

Poniższy przykład ilustruje użycie metod stepUp, stepDown, pageUp i pageDown .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-6 input {width: 100px}
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $("#spinner-6").spinner();
            $('button').button();

            $('#stepUp-2').click(function () {
               $("#spinner-6").spinner("stepUp");
            });

            $('#stepDown-2').click(function () {
               $("#spinner-6").spinner("stepDown");
            });

            $('#pageUp-2').click(function () {
               $("#spinner-6").spinner("pageUp");
            });

            $('#pageDown-2').click(function () {
               $("#spinner-6").spinner("pageDown");
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <input id = "spinner-6" />
      <br/>
      <button id = "stepUp-2">Increment</button>
      <button id = "stepDown-2">Decrement</button>
      <button id = "pageUp-2">Increment Page</button>
      <button id = "pageDown-2">Decrement Page</button>
   </body>
</html>

Zapiszmy powyższy kod w pliku HTML spinnerexample.htm i otwórz go w standardowej przeglądarce obsługującej javascript, musisz również zobaczyć następujące dane wyjściowe -

W powyższym przykładzie użyj odpowiednich przycisków, aby zwiększyć / zmniejszyć pokrętło.

Użycie akcji włącz i wyłącz

Poniższy przykład demonstruje użycie metod włączania i wyłączania .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-7 input {width: 100px}
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $("#spinner-7").spinner();
            $('button').button();
            $('#stepUp-3').click(function () {
               $("#spinner-7").spinner("enable");
            });
            $('#stepDown-3').click(function () {
               $("#spinner-7").spinner("disable");
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <input id = "spinner-7" />
      <br/>
      <button id = "stepUp-3">Enable</button>
      <button id = "stepDown-3">Disable</button>
   </body>
</html>

Zapiszmy powyższy kod w pliku HTML spinnerexample.htm i otwórz go w standardowej przeglądarce obsługującej javascript, musisz również zobaczyć następujące dane wyjściowe -

W powyższym przykładzie użyj przycisków Włącz / Wyłącz, aby włączyć lub wyłączyć pokrętło.

Zarządzanie zdarzeniami na elementach Spinner

Oprócz metody spinner (opcje), którą widzieliśmy w poprzednich sekcjach, JqueryUI udostępnia metody zdarzeń, które są wyzwalane dla określonego zdarzenia. Te metody zdarzeń są wymienione poniżej -


$( ".selector" ).spinner({
   change: function( event, ui ) {}
});
$( ".selector" ).spinner({
   create: function( event, ui ) {}
});
$( ".selector" ).spinner({
   spin: function( event, ui ) {}
});
$( ".selector" ).spinner({
   start: function( event, ui ) {}
});
$( ".selector" ).spinner({
   stop: function( event, ui ) {}
});

Sr.No.	Metoda i opis wydarzenia
1	zmiana (zdarzenie, ui) To zdarzenie jest wyzwalane, gdy zmieni się wartość pokrętła i wejście nie jest już aktywne. Event - change(event, ui) To zdarzenie jest wyzwalane, gdy zmieni się wartość pokrętła i wejście nie jest już aktywne. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Syntax `$( ".selector" ).spinner({ change: function( event, ui ) {} });`
2	create (event, ui) To zdarzenie jest uruchamiane po utworzeniu przędzarki. Event - create(event, ui) To zdarzenie jest uruchamiane po utworzeniu przędzarki. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Syntax `$( ".selector" ).spinner({ create: function( event, ui ) {} });`
3	spin (zdarzenie, ui) To zdarzenie jest wyzwalane podczas zwiększania / zmniejszania. Event - spin(event, ui) To zdarzenie jest wyzwalane podczas zwiększania / zmniejszania. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . i reprezentuje nową wartość do ustawienia, chyba że zdarzenie zostanie anulowane. Syntax `$( ".selector" ).spinner({ spin: function( event, ui ) {} });`
4	start (wydarzenie, ui) To zdarzenie jest uruchamiane przed spinem. Można anulować, zapobiegając wirowaniu. Event - start(event, ui) To zdarzenie jest uruchamiane przed spinem. Można anulować, zapobiegając wirowaniu. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Syntax `$( ".selector" ).spinner({ start: function( event, ui ) {} });`
5	stop (zdarzenie, ui) To zdarzenie jest uruchamiane po obrocie. Event - stop(event, ui) To zdarzenie jest uruchamiane po obrocie. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Syntax `$( ".selector" ).spinner({ stop: function( event, ui ) {} });`

Przykład

Poniższy przykład ilustruje użycie metody zdarzenia w widżetach obrotowych. Ten przykład demonstruje użycie zdarzeń spin , change i stop .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-8 input {width: 100px}
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-8" ).spinner({
               spin: function( event, ui ) {
                  var result = $( "#result-2" );
                  result.append( "Spin Value: "+$( "#spinner-8" ).spinner("value") );
               },
               change: function( event, ui ) {
                  var result = $( "#result-2" );
                  result.append( "Change value: "+$( "#spinner-8" ).spinner("value") );
               },
               stop: function( event, ui ) {
                  var result = $( "#result-2" );
                  result.append( "Stop value: "+$( "#spinner-8" ).spinner("value") );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "example">
         <input type = "text" id = "spinner-8" value = "0" />
      </div>
      <span id = "result-2"></span>
   </body>
</html>

Zapiszmy powyższy kod w pliku HTML spinnerexample.htm i otwórz go w standardowej przeglądarce obsługującej javascript, musisz również zobaczyć następujące dane wyjściowe -

W powyższym przykładzie zmień wartość pokrętła i zobacz, wyświetlane poniżej komunikaty dla zdarzeń spin i stop. Teraz zmień punkt skupienia pokrętła, a zobaczysz komunikat wyświetlany w przypadku zmiany zdarzenia.

Punkty przedłużenia

Widget spinner jest zbudowany z fabryką widżetów i może być rozszerzany. Aby rozszerzyć widżety, możemy przesłonić lub dodać zachowanie istniejących metod. Poniższa metoda zapewnia punkt rozszerzenia z taką samą stabilnością API, jak metody przędzarki. Wymienione w powyższej tabeli .

Sr.No.	Metoda i opis
1	_buttonHtml (zdarzenie) Ta metoda zwraca String, który jest kodem HTML. Ten kod HTML może być używany do przycisków zwiększania i zmniejszania pokrętła. Każdy przycisk musi mieć nadaną nazwę klasy ui-spinner-button, aby powiązane zdarzenia działały. Ta metoda nie przyjmuje żadnych argumentów. Extension Point - _buttonHtml(event, ui) Ta metoda zwraca String, który jest kodem HTML. Ten kod HTML może być używany do przycisków zwiększania i zmniejszania pokrętła. Każdy przycisk musi mieć nadaną nazwę klasy ui-spinner-button, aby powiązane zdarzenia działały. Ta metoda nie przyjmuje żadnych argumentów. Code Example `_buttonHtml: function() { return "" + "" + ""; }`
2	_uiSpinnerHtml (zdarzenie) Ta metoda określa kod HTML, który ma zostać użyty do zawijania elementu <input> elementu spinner. Ta metoda nie przyjmuje żadnych argumentów. Extension Point - _uiSpinnerHtml(event, ui) Ta metoda określa kod HTML, który ma zostać użyty do zawijania elementu <input> elementu spinner. Ta metoda nie przyjmuje żadnych argumentów. Code Example `_uiSpinnerHtml: function() { return " "; }`

Fabryka widżetów jQuery UI jest rozszerzalną bazą, na której zbudowane są wszystkie widżety jQuery UI. Wykorzystanie fabryki widżetów do zbudowania wtyczki zapewnia wygodę zarządzania stanem, a także konwencje dla typowych zadań, takich jak ujawnianie metod wtyczek i zmiana opcji po utworzeniu instancji.