首页 » jQuery UI » jQuery UI 实例
网站地图

旋转器（Spinner）

jQuery UI 实例 - 旋转器（Spinner）

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

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

默认功能

默认的旋转器。

  1. <!doctype html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 旋转器（Spinner） - 默认功能</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
  9.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  10.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  11.   <script>
  12.   $(function() {
  13.     var spinner = $( "#spinner" ).spinner();
  14.  
  15.     $( "#disable" ).click(function() {
  16.       if ( spinner.spinner( "option", "disabled" ) ) {
  17.         spinner.spinner( "enable" );
  18.       } else {
  19.         spinner.spinner( "disable" );
  20.       }
  21.     });
  22.     $( "#destroy" ).click(function() {
  23.       if ( spinner.data( "ui-spinner" ) ) {
  24.         spinner.spinner( "destroy" );
  25.       } else {
  26.         spinner.spinner();
  27.       }
  28.     });
  29.     $( "#getvalue" ).click(function() {
  30.       alert( spinner.spinner( "value" ) );
  31.     });
  32.     $( "#setvalue" ).click(function() {
  33.       spinner.spinner( "value", 5 );
  34.     });
  35.  
  36.     $( "button" ).button();
  37.   });
  38.   </script>
  39. </head>
  40. <body>
  41.  
  42. <p>
  43.   <label for="spinner">选择一个值：</label>
  44.   <input id="spinner" name="value">
  45. </p>
  46.  
  47. <p>
  48.   <button id="disable">切换禁用/启用</button>
  49.   <button id="destroy">切换部件</button>
  50. </p>
  51.  
  52. <p>
  53.   <button id="getvalue">获取值</button>
  54.   <button id="setvalue">设置值为 5</button>
  55. </p>
  56.  
  57.  
  58. </body>
  59. </html>

货币

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

  1. <!doctype html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 旋转器（Spinner） - 货币</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
  9.   <script src="/static/js/jqueryui/resources/demos/external/globalize.js"></script>
  10.   <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.de-DE.js"></script>
  11.   <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.ja-JP.js"></script>
  12.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  13.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  14.   <script>
  15.   $(function() {
  16.     $( "#currency" ).change(function() {
  17.       $( "#spinner" ).spinner( "option", "culture", $( this ).val() );
  18.     });
  19.  
  20.     $( "#spinner" ).spinner({
  21.       min: 5,
  22.       max: 2500,
  23.       step: 25,
  24.       start: 1000,
  25.       numberFormat: "C"
  26.     });
  27.   });
  28.   </script>
  29. </head>
  30. <body>
  31.  
  32. <p>
  33.   <label for="currency">要捐款的货币</label>
  34.   <select id="currency" name="currency">
  35.     <option value="en-US">US $</option>
  36.     <option value="de-DE">EUR €</option>
  37.     <option value="ja-JP">YEN ¥</option>
  38.   </select>
  39. </p>
  40. <p>
  41.   <label for="spinner">要捐款的数量：</label>
  42.   <input id="spinner" name="spinner" value="5">
  43. </p>
  44. </body>
  45. </html>

小数

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

  1. <!doctype html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 旋转器（Spinner） - 小数</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
  9.   <script src="/static/js/jqueryui/resources/demos/external/globalize.js"></script>
  10.   <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.de-DE.js"></script>
  11.   <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.ja-JP.js"></script>
  12.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  13.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  14.   <script>
  15.   $(function() {
  16.     $( "#spinner" ).spinner({
  17.       step: 0.01,
  18.       numberFormat: "n"
  19.     });
  20.  
  21.     $( "#culture" ).change(function() {
  22.       var current = $( "#spinner" ).spinner( "value" );
  23.       Globalize.culture( $(this).val() );
  24.       $( "#spinner" ).spinner( "value", current );
  25.     });
  26.   });
  27.   </script>
  28. </head>
  29. <body>
  30.  
  31. <p>
  32.   <label for="spinner">小数旋转器：</label>
  33.   <input id="spinner" name="spinner" value="5.06">
  34. </p>
  35. <p>
  36.   <label for="culture">选择一种用于格式化的文化：</label>
  37.   <select id="culture">
  38.     <option value="en-EN" selected="selected">English</option>
  39.     <option value="de-DE">German</option>
  40.     <option value="ja-JP">Japanese</option>
  41.   </select>
  42. </p>
  43. </body>
  44. </html>

地图

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

  1. <!doctype html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 旋转器（Spinner） - 地图</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  8.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  9.   <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
  10.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  11.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  12.   <script>
  13.   $(function() {
  14.     function latlong() {
  15.       return new google.maps.LatLng( $("#lat").val(), $("#lng").val() );
  16.     }
  17.     function position() {
  18.       map.setCenter( latlong() );
  19.     }
  20.     $( "#lat, #lng" ).spinner({
  21.       step: .001,
  22.       change: position,
  23.       stop: position
  24.     });
  25.  
  26.     var map = new google.maps.Map( $("#map")[0], {
  27.       zoom: 8,
  28.       center: latlong(),
  29.       mapTypeId: google.maps.MapTypeId.ROADMAP
  30.     });
  31.   });
  32.   </script>
  33.   <style>
  34.   #map {
  35.     width:500px;
  36.     height:500px;
  37.   }
  38.   </style>
  39. </head>
  40. <body>
  41.  
  42. <label for="lat">纬度</label>
  43. <input id="lat" name="lat" value="44.797">
  44. <br>
  45. <label for="lng">经度</label>
  46. <input id="lng" name="lng" value="-93.278">
  47.  
  48. <div id="map"></div>
  49. </body>
  50. </html>

溢出

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

  1. <!doctype html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 旋转器（Spinner） - 溢出</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
  9.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  10.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  11.   <script>
  12.   $(function() {
  13.     $( "#spinner" ).spinner({
  14.       spin: function( event, ui ) {
  15.         if ( ui.value > 10 ) {
  16.           $( this ).spinner( "value", -10 );
  17.           return false;
  18.         } else if ( ui.value < -10 ) {
  19.           $( this ).spinner( "value", 10 );
  20.           return false;
  21.         }
  22.       }
  23.     });
  24.   });
  25.   </script>
  26. </head>
  27. <body>
  28.  
  29. <p>
  30.   <label for="spinner">选择一个值：</label>
  31.   <input id="spinner" name="value">
  32. </p>
  33. </body>
  34. </html>

时间

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

  1. <!doctype html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 旋转器（Spinner） - 时间</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
  9.   <script src="/static/js/jqueryui/resources/demos/external/globalize.js"></script>
  10.   <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.de-DE.js"></script>
  11.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  12.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  13.   <script>
  14.   $.widget( "ui.timespinner", $.ui.spinner, {
  15.     options: {
  16.       // 秒
  17.       step: 60 * 1000,
  18.       // 小时
  19.       page: 60
  20.     },
  21.  
  22.     _parse: function( value ) {
  23.       if ( typeof value === "string" ) {
  24.         // 已经是一个时间戳
  25.         if ( Number( value ) == value ) {
  26.           return Number( value );
  27.         }
  28.         return +Globalize.parseDate( value );
  29.       }
  30.       return value;
  31.     },
  32.  
  33.     _format: function( value ) {
  34.       return Globalize.format( new Date(value), "t" );
  35.     }
  36.   });
  37.  
  38.   $(function() {
  39.     $( "#spinner" ).timespinner();
  40.  
  41.     $( "#culture" ).change(function() {
  42.       var current = $( "#spinner" ).timespinner( "value" );
  43.       Globalize.culture( $(this).val() );
  44.       $( "#spinner" ).timespinner( "value", current );
  45.     });
  46.   });
  47.   </script>
  48. </head>
  49. <body>
  50.  
  51. <p>
  52.   <label for="spinner">时间旋转器：</label>
  53.   <input id="spinner" name="spinner" value="08:30 PM">
  54. </p>
  55. <p>
  56.   <label for="culture">选择一种用于格式化的文化：</label>
  57.   <select id="culture">
  58.     <option value="en-EN" selected="selected">English</option>
  59.     <option value="de-DE">German</option>
  60.   </select>
  61. </p>
  62. </body>
  63. </html>