Latest web development tutorials

jQuery UI API - membro dei rotatori (Spinner Widget)

categoria

Widget (Widget)

uso

Descrizione: I tasti freccia su / giù e di elaborazione dei tasti, le funzioni di ingresso del testo migliorato valore di input.

Nuova versione: 1.9

Rotator (Spinner), o controllare il numero di passi (numero widget di passo-passo), viene utilizzato per elaborare vari ingressi digitali di controllo perfetto. Esso consente all'utente di immettere un valore direttamente, o ruotare per modificare un valore esistente tramite la tastiera, la rotellina del mouse. In combinazione con la globalizzazione (Globalize), si può anche ruotare la valuta di visualizzazione e date in diverse regioni.

Rotator (Spinner) utilizzando i due pulsanti per inserire la copertura di testo per aumentare e diminuire il valore corrente. Rotator aggiunge eventi chiave in modo che è possibile utilizzare la tastiera per eseguire lo stesso incremento e decremento. Rotator rappresentante della globalizzazione (Globalize) formato digitale e risoluzione.

l'interazione della tastiera

  • UP: per aumentare il valore di un passo.
  • DOWN: per ridurre il passo di valore.
  • PAGE UP: per aumentare un valore.
  • PAGE DOWN: per diminuire un valore.

Fare clic sul pulsante di rotazione con il mouse, la messa a fuoco rimane nel campo di testo.

Quando il rotatore non viene letto ( <input readonly> ), l'utente può immettere un valore, che può risultare in un valore non valido (inferiore al minimo, superiore al massimo, aumentare o diminuire disadattamento, ingresso non numerico). Quando l'aumento o la diminuzione, a livello di programmazione o tramite la manopola, il valore sarà costretto a un valore valido (Per ulteriori informazioni, consultare la pagina stepUp() e stepDown() sarà descritto.

tematizzazione

membro Rotator (Spinner Widget) utilizzando framework jQuery UI CSS per definire l'aspetto del suo stile. Se è necessario utilizzare la casella di selezione stile specificato, è possibile utilizzare il seguente nome della classe CSS:

  • ui-spinner : rotatore contenitore esterno.
    • ui-spinner-input : membro dei rotatori (Spinner Widget) un'istanza <input> elementi.
    • ui-spinner-button : rotatore viene utilizzato per incrementare o decrementare il valore del controllo pulsante. pulsante Up sarà inoltre essere dotato di una ui-spinner-up , di classe, premuto un pulsante con l'aggiunta di ui-spinner-down , di classe.

fare affidamento

Ulteriori informazioni

  • La parte richiede un po 'di CSS funzionale, altrimenti non funzionerà. Se si crea un tema personalizzato, utilizzare il file CSS widget di specificato come punto di partenza.
  • I componenti da manipolare programmazione il valore dell'elemento, in modo che quando il valore delle modifiche elemento non innescare nativi change eventi.
  • Non supporta <input type="number"> Crea selettore, perché causerà un conflitto con il rotatore interfaccia utente locale.

Esempi

selettore digitale comune. 

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> membro dei rotatori (Spinner Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.10.2.js"> </ script>
  <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<Input id = "filatrice">
 
<Script>
$ ( "#spinner") .spinner ();
</ Script>
 
</ Corpo>
</ Html>