jQuery UI 實例 - 旋轉器（Spinner） · W3School jQuery UI 教程

# jQuery UI 實例 - 旋轉器（Spinner）通過向上/向下按鈕和箭頭鍵處理，為輸入數值增強文本輸入功能。如需了解更多有關 spinner 部件的細節，請查看 API 文檔 [旋轉器部件（Spinner Widget）](api-spinner.html)。 ## 默認功能默認的旋轉器。 ``` <!doctype html> <html lang="en"> <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="http://jqueryui.com/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 lang="en"> <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="http://jqueryui.com/resources/demos/external/jquery.mousewheel.js"></script> <script src="http://jqueryui.com/resources/demos/external/globalize.js"></script> <script src="http://jqueryui.com/resources/demos/external/globalize.culture.de-DE.js"></script> <script src="http://jqueryui.com/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 lang="en"> <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="http://jqueryui.com/resources/demos/external/jquery.mousewheel.js"></script> <script src="http://jqueryui.com/resources/demos/external/globalize.js"></script> <script src="http://jqueryui.com/resources/demos/external/globalize.culture.de-DE.js"></script> <script src="http://jqueryui.com/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 lang="en"> <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="http://jqueryui.com/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 lang="en"> <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="http://jqueryui.com/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 lang="en"> <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="http://jqueryui.com/resources/demos/external/jquery.mousewheel.js"></script> <script src="http://jqueryui.com/resources/demos/external/globalize.js"></script> <script src="http://jqueryui.com/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> ```