Latest web development tutorials

jQuery UI API - élément rotateur (Spinner Widget)

catégorie

Widgets (Widgets)

usage

Description: Les touches fléchées haut / bas et le traitement clé, les fonctions de saisie de texte améliorée valeur d'entrée.

Nouvelle version: 1.9

Rotator (Spinner), ou contrôler le nombre d'étapes (widget stepper numéro), est utilisé pour traiter diverses entrées numériques contrôle parfait. Il permet à l'utilisateur d'entrer une valeur directement, ou faire pivoter pour changer une valeur existante par le clavier, la molette de la souris. Lorsqu'il est combiné avec la mondialisation (Globalize), vous pouvez même faire tourner la devise d'affichage et les dates dans les différentes régions.

Rotator (Spinner) en utilisant les deux boutons pour entrer la couverture de texte pour incrémenter et décrémenter la valeur actuelle. Rotator ajoute des événements clés de sorte que vous pouvez utiliser le clavier pour effectuer le même incrément et décrément. représentant Rotator de la mondialisation (Globalize) format et la résolution numérique.

Clavier interaction

  • UP: pour augmenter la valeur d'un pas.
  • DOWN: pour réduire l'étape de la valeur.
  • PAGE UP: pour augmenter une valeur.
  • PAGE DOWN: pour diminuer une valeur.

Cliquez sur le bouton de rotation avec la souris, l'accent reste dans le champ de texte.

Lorsque le rotateur est pas lu ( <input readonly> ), l'utilisateur peut entrer une valeur, qui peut conduire à une valeur non valide (inférieur au minimum, supérieur au maximum, augmenter ou diminuer mismatch, entrée non numérique). Lorsque l'augmentation ou la diminution, soit par programme ou par le biais du bouton rotatif, la valeur seront contraints à une valeur valide (Pour plus d' informations, s'il vous plaît voir stepUp() et stepDown() sera décrit.

theming

membre Rotator (Spinner Widget) en utilisant framework jQuery UI CSS pour définir l'aspect et la convivialité de son style. Si vous avez besoin d'utiliser le spinner de style spécifié, vous pouvez utiliser le nom de la classe CSS suivante:

  • ui-spinner : rotateurs récipient extérieur.
    • ui-spinner-input : élément rotateur (Spinner Widget) instancié <input> éléments.
    • ui-spinner-button : rotateur est utilisé pour augmenter ou diminuer la valeur du bouton de commande. Up bouton va en outre être muni d'un ui-spinner-up , classe, sur un bouton avec supplémentaire ui-spinner-down , classe.

Fiez

informations complémentaires

  • La partie exige une certaine CSS fonctionnelle, sinon cela ne fonctionnera pas. Si vous créez un thème personnalisé, utilisez le fichier CSS widget spécifié comme un point de départ.
  • Les composants à manipuler par programme la valeur de l'élément, de sorte que lorsque la valeur de l'élément change ne déclenchent pas les natifs change événements.
  • Il ne supporte pas <input type="number"> Créer sélecteur, car il va provoquer un conflit avec le rotateur de l' interface utilisateur locale.

Exemples

sélecteur numérique commune. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> élément rotateur (Spinner Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<Id d'entrée = "spinner">
 
<Script>
$ ( "#spinner") .spinner ();
</ Script>
 
</ Body>
</ Html>

la