jQuery UI par exemple - rotateur (Spinner)

Précédent: exemple jQuery UI - Curseur (curseur)

Suivant: jQuery UI par exemple - onglets (onglets)

Par les touches fléchées haut / bas et traitement des clés, les fonctions de saisie de texte améliorée valeur d'entrée.

Pour plus de détails sur l'élément de spinner, consultez la documentation de l' API élément rotateur (Spinner le Widget) .

La fonction par défaut

Le rotateur par défaut.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI 旋转器（Spinner） - 默认功能</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    var spinner = $( "#spinner" ).spinner();
 
    $( "#disable" ).click(function() {
      if ( spinner.spinner( "option", "disabled" ) ) {
        spinner.spinner( "enable" );
      } else {
        spinner.spinner( "disable" );
      }
    });
    $( "#destroy" ).click(function() {
      if ( spinner.data( "ui-spinner" ) ) {
        spinner.spinner( "destroy" );
      } else {
        spinner.spinner();
      }
    });
    $( "#getvalue" ).click(function() {
      alert( spinner.spinner( "value" ) );
    });
    $( "#setvalue" ).click(function() {
      spinner.spinner( "value", 5 );
    });
 
    $( "button" ).button();
  });
  </script>
</head>
<body>
 
<p>
  <label for="spinner">选择一个值：</label>
  <input id="spinner" name="value">
</p>
 
<p>
  <button id="disable">切换禁用/启用</button>
  <button id="destroy">切换部件</button>
</p>
 
<p>
  <button id="getvalue">获取值</button>
  <button id="setvalue">设置值为 5</button>
</p>
 
 
</body>
</html>

monnaie

Cet exemple est une forme de don, avec le nombre d'options de change et rotateurs.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI 旋转器（Spinner） - 货币</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
  <script src="/static/js/jqueryui/resources/demos/external/globalize.js"></script>
  <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.de-DE.js"></script>
  <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.ja-JP.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#currency" ).change(function() {
      $( "#spinner" ).spinner( "option", "culture", $( this ).val() );
    });
 
    $( "#spinner" ).spinner({
      min: 5,
      max: 2500,
      step: 25,
      start: 1000,
      numberFormat: "C"
    });
  });
  </script>
</head>
<body>
 
<p>
  <label for="currency">要捐款的货币</label>
  <select id="currency" name="currency">
    <option value="en-US">US $</option>
    <option value="de-DE">EUR €</option>
    <option value="ja-JP">YEN ¥</option>
  </select>
</p>
<p>
  <label for="spinner">要捐款的数量：</label>
  <input id="spinner" name="spinner" value="5">
</p>
</body>
</html>

décimal

Cet exemple est un rotateur décimal. Augmentations de 0,01. Code relatives aux changements culturels va lire la valeur actuelle du sélecteur lors du changement de la culture, il réinitialise la valeur basée sur le style de la nouvelle culture.

<! DOCTYPE html>
<Html>
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI rotateur (Spinner) - Décimal </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "/ statiques / js / jQueryUI / resources / démos / externes / jquery.mousewheel.js"> </ script>
  <script src = "/ statiques / js / jQueryUI / resources / démos / externes / globalize.js"> </ script>
  <Script src = "/ / statiques js / jQueryUI / resources / démos / / globalize.culture.de-DE.js externe"> </ script>
  <Script src = "/ / statiques js / jQueryUI / resources / démos / / globalize.culture.ja-JP.js externe"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#spinner") .spinner ({
      étape: 0,01,
      NumberFormat: "n"
    });
 
    $ ( "#culture") .Modification (Function () {
      courant var = $ ( "#spinner") .spinner ( "value");
      Globalize.culture ($ (this) .val ());
      $ ( "#spinner") .spinner ( "Value", en cours);
    });
  });
  </ Script>
</ Head>
<Body>
 
<P>
  <Label for = "spinner"> décimal rotateurs: </ label>
  <Entrée id = nom = valeur "spinner" "spinner" = "5.06">
</ P>
<P>
  <Label for = "culture"> Sélectionnez un format pour la culture: </ label>
  <Select id = "culture">
    <Option value = "fr-FR" selected = "selected"> English </ option>
    <Option value = "de-DE"> allemand </ option>
    <Option value = "ja-JP"> japonais </ option>
  </ Select>
</ P>
</ Body>
</ Html>

carte

intégration de Google Maps, en utilisant un spinner pour modifier la latitude et la longitude.

<! DOCTYPE html>
<Html>
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI rotateur (Spinner) - Carte </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "http://maps.google.com/maps/api/js?sensor=false"> </ script>
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "/ statiques / js / jQueryUI / resources / démos / externes / jquery.mousewheel.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    fonction latlong () {
      return new google.maps.LatLng ($ (val "lat #") (), $ ( "# lng") val () ..);
    }
    position function () {
      map.setCenter (LatLong ());
    }
    $ ( "#lat, #lng") .spinner ({
      étape: .001,
      changer: position,
      arrêter: Position
    });
 
    var map = new google.maps.Map ($ ( "# map") [0], {
      zoom: 8,
      centre: LatLong (),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  });
  </ Script>
  <Style>
  #Map {
    largeur: 500px;
    hauteur: 500px;
  }
  </ Style>
</ Head>
<Body>
 
<Label for = "lat"> latitude </ label>
<Id d'entrée = nom = valeur "lat" "lat" = "44,797">
<br>
<Label for = "lng"> Longitude </ label>
<Id d'entrée = nom = valeur "lng" "lng" = "- 93,278">
 
<Div id = "map"> </ div>
</ Body>
</ Html>

trop-plein

limites des rotateurs Dépassement de -10 à 10. Pour une valeur de 10 ou plus, de trop-plein à -10 ° C, et vice versa.

<! DOCTYPE html>
<Html>
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI rotateur (Spinner) - Dépassement </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "/ statiques / js / jQueryUI / resources / démos / externes / jquery.mousewheel.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#spinner") .spinner ({
      rotation: function (event, ui) {
        if (ui.value> 10) {
          $ (Ce) .spinner ( "valeur", -10);
          return false;
        } Else if (ui.value <-10) {
          $ (Ce) .spinner ( "valeur", 10);
          return false;
        }
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<P>
  <Label for = "spinner"> sélectionnez une valeur: </ label>
  <Entrée id = "spinner" name = "valeur">
</ P>
</ Body>
</ Html>

temps

Elle étend à partir d'une des parties de la coiffe personnalisés. Utilisez la mondialisation (globalisation) plug-in pour analyser et l'horodatage de sortie à l'étape de mesure et options de la page. Up / curseur vers le bas pour les minutes haut / bas, haut / bas pour des incréments heures / décrément.

<! DOCTYPE html>
<Html>
<Head>
  <Meta charset = "utf-8">
  <Titre> jQuery UI rotateur (Spinner) - Temps </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "/ statiques / js / jQueryUI / resources / démos / externes / jquery.mousewheel.js"> </ script>
  <script src = "/ statiques / js / jQueryUI / resources / démos / externes / globalize.js"> </ script>
  <Script src = "/ / statiques js / jQueryUI / resources / démos / / globalize.culture.de-DE.js externe"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  .widget $ ( "Ui.timespinner", $ .ui.spinner, {
    Options: {
      // Deuxième étape: 60 * 1000,
      // H page: 60
    },
 
    _parse: function (value) {
      if (typeof valeur === "string") {
        Formé d'un horodatage // if (Number (valeur) == valeur) {
          retour Nombre (valeur);
        }
        retour + Globalize.parseDate (valeur);
      }
      la valeur de retour;
    },
 
    _format: function (value) {
      retour Globalize.format (new Date (valeur), "t");
    }
  });
 
  $ (Function () {
    $ ( "#spinner") .timespinner ();
 
    $ ( "#culture") .Modification (Function () {
      courant var = $ ( "#spinner") .timespinner ( "value");
      Globalize.culture ($ (this) .val ());
      $ ( "#spinner") .timespinner ( "Value", en cours);
    });
  });
  </ Script>
</ Head>
<Body>
 
<P>
  <Label for = "spinner"> Time rotateurs: </ label>
  <Entrée id = "spinner" nom = valeur "spinner" = "08:30 PM">
</ P>
<P>
  <Label for = "culture"> Sélectionnez un format pour la culture: </ label>
  <Select id = "culture">
    <Option value = "fr-FR" selected = "selected"> English </ option>
    <Option value = "de-DE"> allemand </ option>
  </ Select>
</ P>
</ Body>
</ Html>

Précédent: exemple jQuery UI - Curseur (curseur)

Suivant: jQuery UI par exemple - onglets (onglets)

jQuery UI cours

jQuery UI thème

jQuery UI Bibliothèque de composants

jQuery UI Manuel de référence