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 name=\"value\">
</p>
 
<p>
  <button>切换禁用/启用</button>
  <button>切换部件</button>
</p>
 
<p>
  <button>获取值</button>
  <button>设置值为 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 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 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 name=\"spinner\" value=\"5.06\">
</p>
<p>
  <label for=\"culture\">选择一种用于格式化的文化：</label>
  <select>
    <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 name=\"lat\" value=\"44.797\">
<br>
<label for=\"lng\">经度</label>
<input name=\"lng\" value=\"-93.278\">
 
<div></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 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 name=\"spinner\" value=\"08:30 PM\">
</p>
<p>
  <label for=\"culture\">选择一种用于格式化的文化：</label>
  <select>
    <option value=\"en-EN\" selected=\"selected\">English</option>
    <option value=\"de-DE\">German</option>
  </select>
</p>
</body>
</html>