jQuery UI example - rotator (Spinner)

Previous: jQuery UI example - Slider (Slider)

By the up / down arrow buttons and key processing, the input value enhanced text input functions.

For more details about the spinner member, see the API documentation rotator member (Spinner the Widget) .

The default function

The default rotator.

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

currency

This example is a donation form, with the number of currency options and rotator.

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

Decimal

This example is a decimal rotator. Increments of 0.01. Code dealing with cultural changes will read the current value of the selector when changing the culture, it will reset the value based on the style of the new culture.

<! Doctype html>
<Html>
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI rotator (Spinner) - Decimal </ 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 () {
    $ ( "#spinner") .spinner ({
      step: 0.01,
      numberFormat: "n"
    });
 
    $ ( "#culture") .change (Function () {
      var current = $ ( "#spinner") .spinner ( "value");
      Globalize.culture ($ (this) .val ());
      $ ( "#spinner") .spinner ( "Value", current);
    });
  });
  </ Script>
</ Head>
<Body>
 
<P>
  <Label for = "spinner"> decimal rotator: </ label>
  <Input id = "spinner" name = "spinner" value = "5.06">
</ P>
<P>
  <Label for = "culture"> Select a format for the culture: </ label>
  <Select id = "culture">
    <Option value = "en-EN" selected = "selected"> English </ option>
    <Option value = "de-DE"> German </ option>
    <Option value = "ja-JP"> Japanese </ option>
  </ Select>
</ P>
</ Body>
</ Html>

map

Google Maps integration, using a spinner to change the latitude and longitude.

<! Doctype html>
<Html>
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI rotator (Spinner) - Map </ 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 = "/ 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 () {
    function latlong () {
      return new google.maps.LatLng ($ ( "# lat") val (), $ ( "# lng") val ()..);
    }
    function position () {
      map.setCenter (latlong ());
    }
    $ ( "#lat, #lng") .spinner ({
      step: .001,
      change: position,
      stop: position
    });
 
    var map = new google.maps.Map ($ ( "# map") [0], {
      zoom: 8,
      center: latlong (),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  });
  </ Script>
  <Style>
  #map {
    width: 500px;
    height: 500px;
  }
  </ Style>
</ Head>
<Body>
 
<Label for = "lat"> latitude </ label>
<Input id = "lat" name = "lat" value = "44.797">
<br>
<Label for = "lng"> Longitude </ label>
<Input id = "lng" name = "lng" value = "- 93.278">
 
<Div id = "map"> </ div>
</ Body>
</ Html>

overflow

Overflow rotator limits from -10 to 10. For a value of 10 or more, overflow to -10, and vice versa.

<! Doctype html>
<Html>
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI rotator (Spinner) - Overflow </ 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 () {
    $ ( "#spinner") .spinner ({
      spin: function (event, ui) {
        if (ui.value> 10) {
          $ (This) .spinner ( "value", -10);
          return false;
        } Else if (ui.value <-10) {
          $ (This) .spinner ( "value", 10);
          return false;
        }
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<P>
  <Label for = "spinner"> select a value: </ label>
  <Input id = "spinner" name = "value">
</ P>
</ Body>
</ Html>

time

It extends from a rotator custom parts. Use Globalization (Globalization) plug-in to parse and output time stamp with custom step and page options. Up / down cursor for minutes up / down, page up / down for hours increments / decrement.

<! Doctype html>
<Html>
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI rotator (Spinner) - Time </ 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 = "// 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: {
      // Second step: 60 * 1000,
      // H page: 60
    },
 
    _parse: function (value) {
      if (typeof value === "string") {
        Has a time stamp // if (Number (value) == value) {
          return Number (value);
        }
        return + Globalize.parseDate (value);
      }
      return value;
    },
 
    _format: function (value) {
      return Globalize.format (new Date (value), "t");
    }
  });
 
  $ (Function () {
    $ ( "#spinner") .timespinner ();
 
    $ ( "#culture") .change (Function () {
      var current = $ ( "#spinner") .timespinner ( "value");
      Globalize.culture ($ (this) .val ());
      $ ( "#spinner") .timespinner ( "Value", current);
    });
  });
  </ Script>
</ Head>
<Body>
 
<P>
  <Label for = "spinner"> Time rotator: </ label>
  <Input id = "spinner" name = "spinner" value = "08:30 PM">
</ P>
<P>
  <Label for = "culture"> Select a format for the culture: </ label>
  <Select id = "culture">
    <Option value = "en-EN" selected = "selected"> English </ option>
    <Option value = "de-DE"> German </ option>
  </ Select>
</ P>
</ Body>
</ Html>

Previous: jQuery UI example - Slider (Slider)

Next: jQuery UI example - tabs (Tabs)

jQuery UI Tutorial

jQuery UI theme

jQuery UI Parts library

jQuery UI Reference Manual