减小字体
增大字体- ·上一篇文章：jQuery UI 实例 - 滑块（Slider）
- ·下一篇文章：jQuery UI 实例 - 标签页（Tabs）
当前位置：K88软件开发 → 文章中心 → 编程语言 → JavaScript → JS02 → 文章内容
jQuery UI 实例 - 旋转器（Spinner）
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
//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
jQuery UI 实例 - 旋转器（Spinner）
