JqueryUI - Spinner

Il widget Spinner aggiunge una freccia su / giù a sinistra di una casella di input consentendo così a un utente di aumentare / diminuire un valore nella casella di input. Consente agli utenti di digitare direttamente un valore o di modificare un valore esistente ruotando con la tastiera, il mouse o la rotella di scorrimento. Ha anche una funzione di passaggio per saltare i valori. Oltre alle caratteristiche numeriche di base, abilita anche opzioni di formattazione globalizzate (es. Valuta, mille separatori, decimali, ecc.) Fornendo così una comoda casella di immissione mascherata internazionalmente.

L'esempio seguente dipende da Globalize . Puoi ottenere i file Globalize dahttps://github.com/jquery/globalize. Fare clic sul collegamento delle versioni , selezionare la versione desiderata e scaricare il file .zip o tar.gz. Estrai i file e copia i seguenti file nella cartella in cui si trova il tuo esempio.

lib / globalize.js: questo file contiene il codice Javascript per gestire le localizzazioni

lib / globalize.culture.js: questo file contiene un set completo di locale con cui viene fornita la libreria Globalize.

Questi file sono presenti anche nella cartella esterna della libreria jquery-ui.

jQueryUI fornisce il metodo spinner () che crea uno spinner.

Sintassi

Il spinner() metodo può essere utilizzato in due forme:

$ (selettore, contesto) .spinner (opzioni) Metodo

Il metodo spinner (opzioni) dichiara che un elemento HTML e il suo contenuto devono essere trattati e gestiti come spinner. Il parametro options è un oggetto che specifica l'aspetto e il comportamento degli elementi di selezione coinvolti.

Sintassi

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

Puoi fornire una o più opzioni alla volta utilizzando l'oggetto Javascript. Se ci sono più opzioni da fornire, le separerai usando una virgola come segue:

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

La tabella seguente elenca le diverse opzioni che possono essere utilizzate con questo metodo:


$( ".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.	Opzione e descrizione
1	cultura Questa opzione imposta le impostazioni cultura da utilizzare per l'analisi e la formattazione del valore. Per impostazione predefinita, il suo valore ènull il che significa che viene utilizzata la cultura attualmente impostata in Globalize. Option - culture Questa opzione imposta le impostazioni cultura da utilizzare per l'analisi e la formattazione del valore. Per impostazione predefinita, il suo valore ènullil che significa che viene utilizzata la cultura attualmente impostata in Globalize. Rilevante solo se è impostata l' opzione numberFormat . Richiede che Globalizza sia incluso. Syntax `$( ".selector" ).spinner( { culture: "fr" } );`
2	Disabilitato Questa opzione, se impostata su true, disabilita lo spinner. Per impostazione predefinita, il suo valore èfalse. Option - disabled Questa opzione, se impostata su true, disabilita lo spinner. Per impostazione predefinita, il suo valore èfalse. Syntax `$( ".selector" ).spinner( { disabled: true } );`
3	icone Questa opzione imposta le icone da utilizzare per i pulsanti, corrispondenti a un'icona fornita da jQuery UI CSS Framework . Per impostazione predefinita, il suo valore è{ down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }. Option - icons Questa opzione imposta le icone da utilizzare per i pulsanti, corrispondenti a un'icona fornita da jQuery UI CSS Framework . Per impostazione predefinita, il suo valore è{ 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	incrementale Questa opzione controlla il numero di passaggi effettuati quando si tiene premuto un pulsante di selezione. Per impostazione predefinita, il suo valore ètrue. Option - incremental Questa opzione controlla il numero di passaggi effettuati quando si tiene premuto un pulsante di selezione. Per impostazione predefinita, il suo valore ètrue. Questo può essere di tipo - Boolean- Se impostato su false tutti i passaggi sono uguali. Se impostato su true , il delta del passo aumenterà quando viene fatto girare incessantemente. Function - Deve restituire il numero di passaggi che dovrebbero verificarsi per la rotazione corrente. Syntax `$( ".selector" ).spinner( { incremental: false } );`
5	max Questa opzione indica il valore massimo consentito. Per impostazione predefinita, il suo valore ènull il che significa che non esiste un limite massimo applicato. Option - max Questa opzione indica il valore massimo consentito. Per impostazione predefinita, il suo valore ènull il che significa che non esiste un limite massimo applicato. Questo può essere di tipo - Number - Il valore massimo. String- Se Globalize è incluso, l'opzione max può essere passata come una stringa che verrà analizzata in base alle opzioni numberFormat e culture Syntax `$( ".selector" ).spinner( { max: 50 } );`
6	min Questa opzione indica il valore minimo consentito. Per impostazione predefinita, il suo valore ènull il che significa che non è previsto alcun minimo. Option - min Questa opzione indica il valore minimo consentito. Per impostazione predefinita, il suo valore ènull il che significa che non è previsto alcun minimo. Questo può essere di tipo - Number - Il valore minimo. String- Se Globalize è incluso, l'opzione min può essere passata come una stringa che verrà analizzata in base alle opzioni numberFormat e culture . Syntax `$( ".selector" ).spinner( { min: 0 } );`
7	numberFormat Questa opzione indica il formato dei numeri passati a Globalizza , se disponibile. I più comuni sono "n" per un numero decimale e "C" per un valore di valuta. Per impostazione predefinita, il suo valore ènull. Option - numberFormat Questa opzione indica il formato dei numeri passati a Globalizza , se disponibile. I più comuni sono "n" per un numero decimale e "C" per un valore di valuta. Per impostazione predefinita, il suo valore ènull. Syntax `$( ".selector" ).spinner( { numberFormat: "n" } );`
8	pagina Questa opzione indica il numero di passaggi da eseguire durante la paginazione tramite i metodi pageUp / pageDown. Per impostazione predefinita, il suo valore è10. Option - page Questa opzione indica il numero di passaggi da eseguire durante la paginazione tramite i metodi pageUp / pageDown. Per impostazione predefinita, il suo valore è10. Syntax `$( ".selector" ).spinner( { page: 5 } );`
9	passo Questa opzione indica la dimensione del passaggio da eseguire durante la rotazione tramite pulsanti o tramite i metodi stepUp () / stepDown () . L' attributo step dell'elemento viene utilizzato se esiste e l'opzione non è impostata esplicitamente. Option - step Questa opzione indica la dimensione del passaggio da eseguire durante la rotazione tramite pulsanti o tramite i metodi stepUp () / stepDown () . L' attributo step dell'elemento viene utilizzato se esiste e l'opzione non è impostata esplicitamente. Questo può essere di tipo - Number - La dimensione del gradino. String- Se Globalize è incluso, l'opzione step può essere passata come una stringa che verrà analizzata in base alle opzioni numberFormat e culture , altrimenti tornerà al parseFloat nativo. Syntax `$( ".selector" ).spinner( { step: 2 } );`

La sezione seguente ti mostrerà alcuni esempi funzionanti della funzionalità del widget di selezione.

Funzionalità predefinita

L'esempio seguente mostra un semplice esempio di funzionalità del widget spinner, senza passare parametri al file spinner() metodo.

<!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>

Salviamo il codice sopra in un file HTML spinnerexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:

Uso delle opzioni Min, Max e Step

Il seguente esempio dimostra l'utilizzo di tre opzioni min, max ed entra nel widget spinner di 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>

Salviamo il codice sopra in un file HTML spinnerexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:

Nell'esempio sopra, puoi vedere nella prima casella di selezione che i valori massimo e minimo sono impostati rispettivamente su 10 e -10. Quindi incrociando questi valori, lo spinner smetterà di aumentare / diminuire. Nella seconda trottola il valore della trottola aumenta / diminuisce in passi di 100.

Uso delle icone Opzione

Il seguente esempio dimostra l'utilizzo di option icons nel widget spinner di 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>

Salviamo il codice sopra in un file HTML spinnerexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:

Nell'esempio sopra, puoi notare che lo spinner delle immagini è cambiato.

Uso delle opzioni cultura, numberFormat e pagina

Il seguente esempio dimostra l'utilizzo di tre opzioni culture, numberFormat e page nel widget di selezione di 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>

Salviamo il codice sopra in un file HTML spinnerexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:

Nell'esempio precedente, puoi vedere che la casella di selezione visualizza il numero in formato valuta poiché numberFormat è impostato su "C" e la cultura è impostata su "de-DE". Qui abbiamo usato i file Globalize dalla libreria jquery-ui.

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

Il metodo spinner ("action", params) può eseguire un'azione sugli elementi spinner, come abilitare / disabilitare lo spinner. L'azione è specificata come una stringa nel primo argomento (ad esempio, "disable" disabilita lo spinner). Controlla le azioni che possono essere trasmesse, nella tabella seguente.

Sintassi

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

La tabella seguente elenca le diverse azioni che possono essere utilizzate con questo metodo:


$(".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.	Azione e descrizione
1	distruggere Questa azione distrugge completamente la funzionalità dello spinner di un elemento. Gli elementi tornano al loro stato pre-inizializzazione. Questo metodo non accetta argomenti. Action - destroy Questa azione distrugge completamente la funzionalità dello spinner di un elemento. Gli elementi tornano al loro stato pre-inizializzazione. Questo metodo non accetta argomenti. Syntax `$(".selector").spinner("destroy");`
2	disattivare Questa azione disabilita la funzionalità di selezione. Questo metodo non accetta argomenti. Action - disable Questa azione disabilita la funzionalità di selezione. Questo metodo non accetta argomenti. Syntax `$(".selector").spinner("disable");`
3	abilitare Questa azione abilita la funzionalità di selezione. Questo metodo non accetta argomenti. Action - enable Questa azione abilita la funzionalità di selezione. Questo metodo non accetta argomenti. Syntax `$(".selector").spinner("enable");`
4	opzione (optionName) Questa azione ottiene il valore attualmente associato con optionName specificato . Dove optionName è il nome dell'opzione da ottenere. Action - option( optionName ) Questa azione ottiene il valore attualmente associato con optionName specificato . Dove optionName è il nome dell'opzione da ottenere. Syntax `var isDisabled = $( ".selector" ).spinner( "option", "disabled" );`
5	opzione Questa azione ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni di selezione corrente. Questo metodo non accetta argomenti. Action - option Questa azione ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni di selezione corrente. Questo metodo non accetta argomenti. Syntax `var options = $( ".selector" ).spinner( "option" );`
6	opzione (optionName, value) Questa azione imposta il valore dell'opzione spinner associata all'opzione optionName specificato . Action - optionName Questa azione imposta il valore dell'opzione spinner associata all'opzione optionName specificato . Syntax `$( ".selector" ).spinner( "option", "disabled", true );`
7	opzione (opzioni) Questa azione imposta una o più opzioni per lo spinner. Action - option( options ) Questa azione imposta una o più opzioni per lo spinner. Syntax `$(".selector").spinner("option", { disabled: true });`
8	pageDown ([pagine]) Questa azione decrementa il valore del numero di pagine specificato, come definito dall'opzione di pagina. Action - pageDown( [pages ] ) Questa azione decrementa il valore del numero di pagine specificato, come definito dall'opzione di pagina. Invocando PageDown () causerà inizio, rotazione, e di arresto eventi che vengono attivati. Syntax `$(".selector").spinner("pageDown");`
9	pageUp ([pagine]) Questa azione incrementa il valore del numero di pagine specificato, come definito dall'opzione di pagina. Action - pageUp( [pages ] ) Questa azione incrementa il valore del numero di pagine specificato, come definito dall'opzione di pagina. Invocando pageUp () causerà inizio, rotazione, e di arresto eventi che vengono attivati. Syntax `$(".selector").spinner("pageUp");`
10	stepDown ([steps]) Questa azione riduce il valore del numero di passaggi specificato. Action - stepDown( [steps ] ) Questa azione riduce il valore del numero di passaggi specificato. Invocando Stepdown () causerà inizio, rotazione, e di arresto eventi che vengono attivati. Syntax `$(".selector").spinner("stepDown");`
11	stepUp ([passaggi]) Questa azione incrementa il valore del numero di passaggi specificato. Action - stepUp( [steps ] ) Questa azione incrementa il valore del numero di passaggi specificato. Invocare StepUp () causerà inizio, rotazione, e di arresto eventi che vengono attivati. Syntax `$(".selector").spinner("stepUp");`
12	valore Questa azione ottiene il valore corrente come numero. Il valore viene analizzato in base alle opzioni numberFormat e culture. Questo metodo non accetta argomenti. Action - value Questa azione ottiene il valore corrente come numero. Il valore viene analizzato in base alle opzioni numberFormat e culture. Questo metodo non accetta argomenti. Syntax `var value = $( ".selector" ).spinner( "value" );`
13	valore (valore) Questa azione imposta il valore. se viene passato value, il valore viene analizzato in base alle opzioni numberFormat e culture. Action - value( value ) Questa azione imposta il valore. se viene passato value, il valore viene analizzato in base alle opzioni numberFormat e culture. Syntax `$( ".selector" ).spinner( "value", 50 );`
14	aggeggio Questa azione restituisce l'elemento del widget spinner; quello annotato con il nome della classe ui-spinner . Action - widget Questa azione restituisce l'elemento del widget spinner; quello annotato con il nome della classe ui-spinner . Syntax `$( ".selector" ).spinner( "widget");`

I seguenti esempi dimostrano come utilizzare le azioni fornite nella tabella sopra.

Uso delle azioni stepUp, stepDown, pageUp e pageDown

L'esempio seguente mostra l'uso dei metodi stepUp, stepDown, pageUp e 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>

Salviamo il codice sopra in un file HTML spinnerexample.htm e aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output:

Nell'esempio precedente, utilizzare i rispettivi pulsanti per aumentare / diminuire la casella di selezione.

Uso dell'azione abilita e disabilita

L'esempio seguente mostra l'uso dei metodi di abilitazione e disabilitazione .

<!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>

Salviamo il codice sopra in un file HTML spinnerexample.htm e aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output:

Nell'esempio precedente, utilizzare i pulsanti Abilita / Disabilita per abilitare o disabilitare la casella di selezione.

Gestione degli eventi su Spinner Elements

Oltre al metodo spinner (opzioni) che abbiamo visto nelle sezioni precedenti, JqueryUI fornisce metodi di eventi che vengono attivati per un particolare evento. Questi metodi di evento sono elencati di seguito:


$( ".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.	Metodo e descrizione dell'evento
1	cambiamento (evento, ui) Questo evento viene attivato quando il valore dello spinner è cambiato e l'input non è più focalizzato. Event - change(event, ui) Questo evento viene attivato quando il valore della casella di selezione è cambiato e l'input non è più focalizzato. Dove event è di tipo Event e ui è di tipo Object . Syntax `$( ".selector" ).spinner({ change: function( event, ui ) {} });`
2	create (evento, ui) Questo evento viene attivato quando viene creata la casella di selezione. Event - create(event, ui) Questo evento viene attivato quando viene creata la casella di selezione. Dove event è di tipo Event e ui è di tipo Object . Syntax `$( ".selector" ).spinner({ create: function( event, ui ) {} });`
3	spin (evento, ui) Questo evento viene attivato durante l'incremento / decremento. Event - spin(event, ui) Questo evento viene attivato durante l'incremento / decremento. Dove event è di tipo Event e ui è di tipo Object . e rappresenta il nuovo valore da impostare, a meno che l'evento non venga annullato. Syntax `$( ".selector" ).spinner({ spin: function( event, ui ) {} });`
4	inizio (evento, ui) Questo evento viene attivato prima di un giro. Può essere annullato, impedendo il verificarsi della rotazione. Event - start(event, ui) Questo evento viene attivato prima di un giro. Può essere annullato, impedendo il verificarsi della rotazione. Dove event è di tipo Event e ui è di tipo Object . Syntax `$( ".selector" ).spinner({ start: function( event, ui ) {} });`
5	stop (evento, ui) Questo evento viene attivato dopo un giro. Event - stop(event, ui) Questo evento viene attivato dopo un giro. Dove event è di tipo Event e ui è di tipo Object . Syntax `$( ".selector" ).spinner({ stop: function( event, ui ) {} });`

Esempio

L'esempio seguente mostra l'utilizzo del metodo dell'evento nei widget di selezione. Questo esempio dimostra l'uso di eventi spin , change e 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>

Salviamo il codice sopra in un file HTML spinnerexample.htm e aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output:

Nell'esempio sopra, cambia il valore dello spinner e vedi, i messaggi che vengono visualizzati sotto per gli eventi spin e stop. Ora cambia il focus dello spinner e vedrai un messaggio visualizzato sull'evento di modifica.

Punti di estensione

Il widget spinner è costruito con la fabbrica dei widget e può essere esteso. Per estendere i widget, possiamo sovrascrivere o aggiungere al comportamento dei metodi esistenti. Il seguente metodo fornisce come punto di estensione la stessa stabilità API dei metodi spinner. Elencato nella tabella sopra .

Sr.No.	Metodo e descrizione
1	_buttonHtml (evento) Questo metodo restituisce una stringa che è un HTML. Questo codice HTML può essere utilizzato per i pulsanti di incremento e decremento dello spinner. A ogni pulsante deve essere assegnato un nome di classe ui-spinner-button affinché gli eventi associati funzionino. Questo metodo non accetta argomenti. Extension Point - _buttonHtml(event, ui) Questo metodo restituisce una stringa che è un HTML. Questo codice HTML può essere utilizzato per i pulsanti di incremento e decremento dello spinner. A ogni pulsante deve essere assegnato un nome di classe ui-spinner-button affinché gli eventi associati funzionino. Questo metodo non accetta argomenti. Code Example `_buttonHtml: function() { return "" + "" + ""; }`
2	_uiSpinnerHtml (evento) Questo metodo determina l'HTML da utilizzare per racchiudere l'elemento <input> dello spinner. Questo metodo non accetta argomenti. Extension Point - _uiSpinnerHtml(event, ui) Questo metodo determina l'HTML da utilizzare per racchiudere l'elemento <input> dello spinner. Questo metodo non accetta argomenti. Code Example `_uiSpinnerHtml: function() { return " "; }`

JQuery UI Widget Factory è una base estensibile su cui sono costruiti tutti i widget di jQuery UI. L'utilizzo della fabbrica di widget per creare un plug-in offre comodità per la gestione dello stato, nonché convenzioni per attività comuni come l'esposizione dei metodi del plug-in e la modifica delle opzioni dopo l'istanza.

↰ Previous page Next page ↱

JqueryUI - Spinner

Sintassi

$ (selettore, contesto) .spinner (opzioni) Metodo

Sintassi

Funzionalità predefinita

Uso delle opzioni Min, Max e Step

Uso delle icone Opzione

Uso delle opzioni cultura, numberFormat e pagina

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

Sintassi

Uso delle azioni stepUp, stepDown, pageUp e pageDown

Uso dell'azione abilita e disabilita

Gestione degli eventi su Spinner Elements

Esempio

Punti di estensione

Effetti JqueryUI

Interazioni JqueryUI

Tutorial JqueryUI

Risorse utili di JqueryUI

Utilità JqueryUI

Widget JqueryUI