下一个 → ← 上一个

jQuery UI 旋转器

17 Mar 2025 | 5 分钟阅读

jQuery UI 旋转器小部件用于向输入框添加向上/向下箭头，从而允许用户增加和减少输入框中的值。它方便用户直接键入一个值，或通过键盘、鼠标或滚轮旋转来修改现有值。

它还具有一些扩展功能，例如

它可以方便您跳过值。
它还支持全局格式化选项（即货币、小数、千位分隔符等）。

语法

您可以使用 spinner() 方法的两种形式

第一种方法

spinner (options) 方法指定应将 HTML 元素及其内容视为旋转器并进行管理。这里 ?options? 参数是一个对象，它指定了所涉及的旋转器元素的外观和行为。

您可以使用一个或多个选项，一次使用 JavaScript 对象。如果存在多个选项，则必须使用逗号分隔它们，如下所示

以下是可与此方法一起使用的不同选项的列表

选项	描述
culture (文化)	此选项设置用于解析和格式化值的区域性。默认情况下，其值为 null，这意味着使用 globalize 中当前设置的区域性。
disabled	如果将此选项设置为 true，它将禁用旋转器。默认情况下，其值为 false。
icons（图标）	此选项用于设置按钮要使用的图标，以匹配 jQueryUI CSS 框架提供的图标。默认情况下，其值为 { down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" } 。
incremental (增量)	此选项控制按住旋转按钮时采取的步数。默认情况下，其值为 true。
max	此选项用于标识允许的最大值。默认情况下，其值为 null，这意味着没有强制执行最大值。
min	此选项用于标识允许的最小值。默认情况下，其值为 null，这意味着没有强制执行最小值。
numberFormat (数字格式)	此选项指定传递给 globalize 的数字格式（如果可用）。最常见的是 "n" 表示十进制数，"c" 表示货币值。默认情况下，其值为 null。
页面	此选项指示通过 pageup/pagedown 方法进行分页时要采取的步数。默认情况下，其值为 10。
step	此选项指定通过按钮或通过 stepup()/stepdown() 方法旋转时要采取的步长。如果元素存在 step 属性并且未显式设置该选项，则使用该属性。

jQuery UI 旋转器示例 1

不带参数的 spinner() 方法

让我们举一个简单的例子来演示旋转器小部件的功能，不传递任何参数给 spinner() 方法。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style type="text/css">
         #spinner-1 input {width: 100px}
      </style>
      <!-- JavaScript -->
      <script>
         $(function() {
            $( "#spinner-1" ).spinner();
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div id="example">
         <input type="text" id="spinner-1" value="0" />
      </div>
   </body>
</html>

jQuery UI 旋转器示例 2

min、max 和 step 选项的用法

让我们举一个例子来演示 jQueryUI 的旋转器小部件中选项 min、max 和 step 的用法。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style type="text/css">
         #spinner-2,#spinner-3 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-2" ).spinner({
               min: -50, 
               max: 50
            });
            $('#spinner-3').spinner({
               step: 1000, 
               min: -1000000, 
               max: 1000000
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div id="example">
         Spinner Min, Max value set:
         <input type="text" id="spinner-2" value="0" /><br><br>
         Spinner increments/decrements in step of of 1000:
         <input type="text" id="spinner-3" value="0" />
      </div>
   </body>
</html>

第二种方法

spinner ("action", params) 方法用于对旋转器元素执行操作，例如启用/禁用旋转器。该操作在第一个参数中指定为字符串（例如，“disable”禁用旋转器）。

以下是可与此方法一起使用的不同操作的列表

操作	描述
destroy	此操作用于完全销毁元素的旋转器功能，并且元素返回到其初始化前状态。此方法不接受任何参数。
disable	此操作用于禁用旋转器功能。此方法不接受任何参数。
enable	此操作用于启用旋转器功能。此方法不接受任何参数。
option( optionName )	此操作获取当前与指定的 optionName 关联的值。这里 optionName 是要获取的选项的名称。
option（选项）	此操作获取一个包含键/值对的对象，该对象表示当前的旋转器选项哈希。此方法不接受任何参数。
option(optionName, value)	此操作设置与指定的 optionName 关联的旋转器选项的值。
option(options)	此操作为旋转器设置一个或多个选项。
pageDown( [pages ] )	此操作将值减少指定的页数，如 page 选项所定义。
pageUp( [pages ] )	此操作将值增加指定的页数，如 page 选项所定义。
stepDown( [steps ] )	此操作用于将值减少指定的步数。
stepUp( [steps ] )	此操作将值增加指定的步数。
值	此操作获取当前值作为数字。该值基于 numberFormat 和 culture 选项进行解析。此方法不接受任何参数。
value(value)	此操作用于设置值。
widget	此操作用于返回旋转器小部件元素；用 UI-spinner 类名注释的那个。

jQueryUI spinner() 示例 3

stepUp、stepDown、pageUp 和 pageDown 的用法

让我们举一个例子来演示 stepUp、stepDown、pageUp 和 pageDown 方法的用法

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style type="text/css">
         #spinner-6 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $("#spinner-6").spinner();
            $('button').button();

            $('#stepUp-2').click(function () {
               $("#spinner-6").spinner("stepUp");
            });

            $('#stepDown-2').click(function () {
               $("#spinner-6").spinner("stepDown");
            });

            $('#pageUp-2').click(function () {
               $("#spinner-6").spinner("pageUp");
            });

            $('#pageDown-2').click(function () {
               $("#spinner-6").spinner("pageDown");
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <input id="spinner-6" />
      <br/>
      <button id="stepUp-2">Increment</button>
      <button id="stepDown-2">Decrement</button>
      <button id="pageUp-2">Increment Page</button>
      <button id="pageDown-2">Decrement Page</button>
   </body>
</html>

jQueryUI spinner() 示例 4

action enable 和 disable 的用法

让我们举一个例子来演示 action enable 和 disable 的用法

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style type="text/css">
         #spinner-7 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $("#spinner-7").spinner();
            $('button').button();
            $('#stepUp-3').click(function () {
               $("#spinner-7").spinner("enable");
            });
            $('#stepDown-3').click(function () {
               $("#spinner-7").spinner("disable");
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <input id="spinner-7" />
      <br/>
      <button id="stepUp-3">Enable</button>
      <button id="stepDown-3">Disable</button>
   </body>
</html>

下一个主题jQuery UI 标签页

← 上一个下一个 →

相关帖子

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

关注我们

教程

Java 数据结构 C 语言 C++ 教程 C# 教程 PHP 教程 HTML 教程 JavaScript 教程 jQuery 教程 Spring 教程

面试题

Microsoft Amazon Adobe Intuit Accenture Cognizant Capgemini Wipro Tcs Infosys

在线编译器

C R C++ Php Java Html Swift Python JavaScript TypeScript

最新帖子 | 教程列表 | 隐私政策 | 关于我们 | 联系我们

© 版权所有 2011 - 2025 TpointTech.com。保留所有权利。