jQuery UI 实例 - 旋转器（Spinner）

通过向上/向下按钮和箭头键处理，为输入数值增强文本输入功能。

如需了解更多有关 spinner 部件的细节，请查看 API 文档旋转器部件（Spinner Widget）。

默认功能

默认的旋转器。


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

货币

本实例是一个捐款表格，带有货币选择和数量旋转器。


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

小数

本实例是一个小数旋转器。增量设置为 0.01。处理文化变化的代码会读取当前的选择器的值，当改变文化时，会基于新的文化重新设置值的样式。


<!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() {

    $( "#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">小数旋转器：</label>

  <input id="spinner" name="spinner" value="5.06">

</p>

<p>

  <label for="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>

地图

谷歌地图集成，使用旋转器来改变纬度和经度。


<!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="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">纬度</label>

<input id="lat" name="lat" value="44.797">

<br>

<label for="lng">经度</label>

<input id="lng" name="lng" value="-93.278">

 

<div id="map"></div>

</body>

</html>

溢出

溢出旋转器限制范围从 -10 到 10。对于 10 以上的值，会溢出到 -10，反之亦然。


<!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() {

    $( "#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">选择一个值：</label>

  <input id="spinner" name="value">

</p>

</body>

</html>

时间

一个扩展自旋转器的自定义部件。使用全球化（Globalization）插件来解析和输出时间戳，带有自定义的 step 和 page 选项。向上/向下光标用于分钟的递增/递减，向上/向下翻页用于小时的递增/递减。


<!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="//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: {

      // 秒

      step: 60 * 1000,

      // 小时

      page: 60

    },

 

    _parse: function( value ) {

      if ( typeof value === "string" ) {

        // 已经是一个时间戳

        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">时间旋转器：</label>

  <input id="spinner" name="spinner" value="08:30 PM">

</p>

<p>

  <label for="culture">选择一种用于格式化的文化：</label>

  <select id="culture">

    <option value="en-EN" selected="selected">English</option>

    <option value="de-DE">German</option>

  </select>

</p>

</body>

</html>

旋转器（Spinner） - jQuery UI教程

jQuery UI 实例 - 旋转器（Spinner）

默认功能

货币

小数

地图

溢出

时间