HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

JqueryUI - 微调器小部件

Spinner 小部件在输入框的左侧添加一个向上/向下箭头，从而允许用户增加/减少输入框中的值。 它允许用户直接键入一个值，或通过旋转键盘、鼠标或滚轮来修改现有值。 它还具有跳过值的步骤功能。 除了基本的数字功能外，它还启用了全球化的格式选项（即货币、千位分隔符、小数等），从而提供了一个方便的国际化屏蔽输入框。

以下示例依赖于 Globalize。 您可以从 https://github.com/jquery/globalize 获取 Globalize 文件。单击releases 链接，选择所需的版本，然后下载.zip 或tar.gz 文件。 提取文件并将以下文件复制到您的示例所在的文件夹中。

  • lib/globalize.js :此文件包含用于处理本地化的 Javascript 代码

  • lib/globalize.culture.js :此文件包含 Globalize 库附带的一整套语言环境。

这些文件也存在于您的 jquery-ui 库的 external 文件夹中。

jQueryUI 提供了 spinner() 方法来创建一个微调器。

语法

The spinner() method can be used in two forms −

$ (selector, context).spinner (options) 方法

spinner (options) 方法声明 HTML 元素及其内容应作为微调器处理和管理。 options 参数是一个对象，它指定所涉及的微调器元素的外观和行为。

语法

$(selector, context).spinner (options);

您可以使用 Javascript 对象一次提供一个或多个选项。 如果要提供多个选项，那么您将使用逗号分隔它们，如下所示 −

$(selector, context).spinner({option1: value1, option2: value2..... });

下表列出了可与此方法一起使用的不同选项 −

序号 选项 & 说明
1 culture

此选项设置用于解析和格式化值的区域性。 默认情况下，它的值为 null，这意味着使用当前在 Globalize 中设置的区域性。

Option - culture

此选项设置用于解析和格式化值的区域性。 默认情况下，它的值为 null，这意味着使用当前在 Globalize 中设置的区域性。仅当设置了 numberFormat 选项时才相关。 需要包含Globalize。

语法

$( ".selector" ).spinner(
   { culture: "fr" }
);
2 disabled

如果设置为 true，此选项将禁用微调器。 默认情况下，它的值为 false。

Option - disabled

如果设置为 true，此选项将禁用微调器。 默认情况下，它的值为 false。

语法

$( ".selector" ).spinner(
   { disabled: true }
);
3 icons

此选项设置用于按钮的图标，匹配 jQuery UI CSS 框架提供的图标 。 默认情况下它的值为 { down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }。

Option - icons

此选项设置用于按钮的图标，匹配 jQuery UI CSS 框架提供的图标 。 默认情况下它的值为 { down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }。

语法

$( ".selector" ).spinner(
   { icons: { down: "custom-down-icon", up: "custom-up-icon" } }
);
4 incremental

此选项控制按住旋转按钮时采取的步数。 默认情况下，它的值为 true。

Option - incremental

此选项控制按住旋转按钮时采取的步数。 默认情况下，它的值为 true。

这可以是类型 −

  • Boolean − 如果设置为 false，则所有步骤都相同。 如果设置为 true，步进增量将在不断旋转时增加。

  • Function − 这必须返回当前旋转应该发生的步数。

语法

$( ".selector" ).spinner(
   { incremental: false }
);
5 max

此选项指示最大允许值。 默认情况下，它的值为 null，这意味着没有强制执行的最大值。

Option - max

此选项指示最大允许值。 默认情况下，它的值为 null，这意味着没有强制执行的最大值。

这可以是类型 −

  • Number − 最大值。

  • String − 如果包含 Globalize，则 max 选项可以作为字符串传递，该字符串将根据 numberFormat 和 culture 选项进行解析

语法

$( ".selector" ).spinner(
   { max: 50 }
);
6 min

此选项指示最小允许值。 默认情况下，它的值为 null，这意味着没有强制执行的最小值。

Option - min

此选项指示最小允许值。 默认情况下，它的值为 null，这意味着没有强制执行的最小值。

这可以是类型 −

  • Number − 最小值。

  • String − 如果包含 Globalize，则可以将 min 选项作为字符串传递，该字符串将根据 numberFormat 和 culture 选项进行解析

    。

语法

$( ".selector" ).spinner(
   { min: 0 }
);
7 numberFormat

此选项指示传递给 Globalize 的数字格式（如果可用）。 最常见的是"n"表示十进制数，"C"表示货币值。 默认情况下，它的值为 null。

Option - numberFormat

此选项指示传递给 Globalize 的数字格式（如果可用）。 最常见的是"n"表示十进制数，"C"表示货币值。 默认情况下，它的值为 null。

语法

$( ".selector" ).spinner(
   { numberFormat: "n" }
);
8 page

此选项指示通过 pageUp/pageDown 方法进行分页时要执行的步骤数。 默认情况下，它的值为 10。

Option - page

此选项指示通过 pageUp/pageDown 方法进行分页时要执行的步骤数。 默认情况下，它的值为 10。

语法

$( ".selector" ).spinner(
   { page: 5 }
);
9 step

此选项指示通过按钮或通过 stepUp()/stepDown() 方法旋转时要采取的步骤大小。 如果元素的 step 属性存在且未显式设置该选项，则使用该元素。

Option - step

此选项指示通过按钮或通过 stepUp()/stepDown() 方法旋转时要采取的步骤大小。 如果元素的 step 属性存在且未显式设置该选项，则使用该元素。

这可以是类型 −

  • Number − 步长大小。

  • String − 如果包含 Globalize，则 step 选项可以作为字符串传递，该字符串将根据 numberFormat 和 culture 选项进行解析，否则它 将回退到原生的 parseFloat。

    • 语法

    $( ".selector" ).spinner(
   { step: 2 }
);

以下部分将向您展示微调器小部件功能的一些工作示例。

默认功能

以下示例演示了微调器小部件功能的一个简单示例，不向 spinner() 方法传递任何参数。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/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>

让我们将上面的代码保存在一个 HTML 文件 spinnerexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −

最小值、最大值和步长选项的使用

以下示例演示了三个选项min、max 和step 在JqueryUI 的spinner widget 中的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/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: -10, 
               max: 10
            });
            $('#spinner-3').spinner({
               step: 100, 
               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 100:
         <input type = "text" id = "spinner-3" value = "0" />
      </div>
   </body>
</html>

让我们将上面的代码保存在一个 HTML 文件 spinnerexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −

在上面的示例中，您可以在第一个微调器中看到最大值和最小值分别设置为 10 和 -10。 因此，越过这些值，微调器将停止递增/递减。 在第二个微调器中，微调器值以 100 为步长递增/递减。

图标选项的使用

以下示例演示了选项 icons 在 JqueryUI 的微调器小部件中的用法。

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

让我们将上面的代码保存在一个 HTML 文件 spinnerexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −

在上面的示例中，您会注意到图像微调器发生了变化。

使用 culture、numberFormat 和 page 选项

以下示例演示了三个选项 culture、numberFormat 和 page 在 JqueryUI 的微调控件中的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script src = "/jqueryui/jquery-ui-1.10.4/external/jquery.mousewheel.js"></script>
      <script src = "/jqueryui/jquery-ui-1.10.4/external/globalize.js"></script>
      <script src = "/jqueryui/jquery-ui-1.10.4/external/globalize.culture.de-DE.js"></script>
      
      <script>
         $(function() {
            $( "#spinner-4" ).spinner({
               culture:"de-DE",
               numberFormat:"C",
               step:2,
               page:10
            });
         });
      </script>
   </head>
   
   <body>
      <p>
         <label for = "spinner-4">Amount to donate:</label>
         <input id = "spinner-4" name = "spinner" value = "5">
      </p>
     
   </body>
</html>

让我们将上面的代码保存在一个 HTML 文件 spinnerexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −

在上面的示例中，您可以看到微调器以货币格式显示数字，因为 numberFormat 设置为"C"且 culture 设置为"de-DE"。 这里我们使用了 jquery-ui 库中的 Globalize 文件。

$ (selector, context).spinner ("action", params) 方法

spinner ("action", params) 方法可以对微调器元素执行操作，例如启用/禁用微调器。 该操作在第一个参数中指定为字符串（例如，"disable"禁用微调器）。 在下表中检查可以通过的操作。

语法

$(selector, context).spinner ("action", params);;

下表列出了可与此方法一起使用的不同actions操作 −

序号 操作 & 说明
1 destroy

此操作会完全破坏元素的旋转器功能。 元素返回到它们的预初始化状态。 此方法不接受任何参数。

Action - destroy

此操作会完全破坏元素的旋转器功能。 元素返回到它们的预初始化状态。 此方法不接受任何参数。

语法

$(".selector").spinner("destroy");
2 disable

此操作禁用微调器功能。 此方法不接受任何参数。

Action - disable

此操作禁用微调器功能。 此方法不接受任何参数。

语法

$(".selector").spinner("disable");
3 enable

此操作启用微调器功能。 此方法不接受任何参数。

Action - enable

此操作启用微调器功能。 此方法不接受任何参数。

语法

$(".selector").spinner("enable");
4 option( optionName )

此操作获取当前与指定的 optionName 关联的值。 其中 optionName 是要获取的选项的名称。

Action - option( optionName )

此操作获取当前与指定的 optionName 关联的值。 其中 optionName 是要获取的选项的名称。

语法

var isDisabled = $( ".selector" ).spinner( "option", "disabled" );
5 option

此操作获取一个对象，其中包含表示当前微调器选项哈希的键/值对。 此方法不接受任何参数。

Action - option

此操作获取一个对象，其中包含表示当前微调器选项哈希的键/值对。 此方法不接受任何参数。

语法

var options = $( ".selector" ).spinner( "option" );
6 option( optionName, value )

此操作设置与指定的 optionName 关联的微调器选项的值。

Action - optionName

此操作设置与指定的 optionName 关联的微调器选项的值。

语法

$( ".selector" ).spinner( "option", "disabled", true );
7 option( options )

此操作为微调器设置一个或多个选项。

Action - option( options )

此操作为微调器设置一个或多个选项。

语法

$(".selector").spinner("option", { disabled: true });
8 pageDown( [pages ] )

此操作将值减少指定页数，如页面选项所定义。

Action - pageDown( [pages ] )

此操作将值减少指定页数，如 page 选项所定义。 调用 pageDown() 将触发 start、spin、 和 stop 事件。

语法

$(".selector").spinner("pageDown");
9 pageUp( [pages ] )

此操作按页面选项定义的指定页数递增该值。

Action - pageUp( [pages ] )

此操作按页面选项定义的指定页数递增该值。 调用 pageUp() 将触发 start、spin、 和 stop 事件。

语法

$(".selector").spinner("pageUp");
10 stepDown( [steps ] )

此操作将值递减指定的步数。

Action - stepDown( [steps ] )

此操作将值递减指定的步数。 调用 stepDown() 将触发 start、spin、 和 stop 事件。

语法

$(".selector").spinner("stepDown");
11 stepUp( [steps ] )

此操作按指定步数递增该值。

Action - stepUp( [steps ] )

此操作按指定步数递增该值。 调用 stepUp() 将触发 start、spin、 和 stop 事件。

语法

$(".selector").spinner("stepUp");
12 value

此操作获取当前值作为数字。 该值根据 numberFormat 和 culture 选项进行解析。 此方法不接受任何参数。

Action - value

此操作获取当前值作为数字。 该值根据 numberFormat 和 culture 选项进行解析。 此方法不接受任何参数。

语法

var value = $( ".selector" ).spinner( "value" );
13 value( value )

此操作设置值。 如果传递值，则根据 numberFormat 和 culture 选项解析值。

Action - value( value )

此操作设置值。 如果传递值，则根据 numberFormat 和 culture 选项解析值。

语法

$( ".selector" ).spinner( "value", 50 );
14 widget

此操作返回微调器小部件元素； 用 ui-spinner 类名注释的那个。

Action - widget

此操作返回微调器小部件元素； 用 ui-spinner 类名注释的那个。

语法

$( ".selector" ).spinner( "widget");

以下示例演示如何使用上表中给出的操作。

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.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/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>

让我们将上面的代码保存在一个 HTML 文件 spinnerexample.htm 中并在支持 javascript 的标准浏览器中打开它，您还必须看到以下输出 −

在上面的示例中，使用相应的按钮来增加/减少微调器。

启用和禁用动作的使用

下面的例子演示了enable 和disable 方法的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/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>

让我们将上面的代码保存在一个 HTML 文件 spinnerexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出 −

在上面的示例中，使用 Enable/Disable (启用/禁用)按钮来启用或禁用微调器。

Spinner 元素的事件管理

除了我们在前面部分看到的微调器（选项）方法之外，JqueryUI 还提供了针对特定事件触发的事件方法。 下面列出了这些事件方法 −

序号 事件方法 & 说明
1 change(event, ui)

当微调器的值发生变化并且输入不再聚焦时，将触发此事件。

Event - change(event, ui)

当微调器的值发生变化并且输入不再聚焦时，将触发此事件。 其中event是Event类型，ui是Object类型。

语法

$( ".selector" ).spinner({
   change: function( event, ui ) {}
});
2 create(event, ui)

创建微调器时会触发此事件。

Event - create(event, ui)

创建微调器时会触发此事件。 其中event是Event类型，ui是Object类型。

语法

$( ".selector" ).spinner({
   create: function( event, ui ) {}
});
3 spin(event, ui)

该事件在递增/递减期间触发。

Event - spin(event, ui)

该事件在递增/递减期间触发。 其中event是Event类型，ui是Object类型。

表示新的 要设置的值，除非事件被取消。

语法

$( ".selector" ).spinner({
   spin: function( event, ui ) {}
});
4 start(event, ui)

此事件在旋转前触发。 可以取消，防止旋转发生。

Event - start(event, ui)

此事件在旋转前触发。 可以取消，防止旋转发生。 其中event是Event类型，ui是Object类型。

语法

$( ".selector" ).spinner({
   start: function( event, ui ) {}
});
5 stop(event, ui)

此事件在旋转后触发。

Event - stop(event, ui)

此事件在旋转后触发。 其中event是Event类型，ui是Object类型。

语法

$( ".selector" ).spinner({
   stop: function( event, ui ) {}
});

示例

以下示例演示了微调器小部件中的事件方法用法。 此示例演示了事件 spin、change 和 stop 的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-8 input {width: 100px}
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-8" ).spinner({
               spin: function( event, ui ) {
                  var result = $( "#result-2" );
                  result.append( "Spin Value: "+$( "#spinner-8" ).spinner("value") );
               },
               change: function( event, ui ) {
                  var result = $( "#result-2" );
                  result.append( "Change value: "+$( "#spinner-8" ).spinner("value") );
               },
               stop: function( event, ui ) {
                  var result = $( "#result-2" );
                  result.append( "Stop value: "+$( "#spinner-8" ).spinner("value") );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "example">
         <input type = "text" id = "spinner-8" value = "0" />
      </div>
      <span id = "result-2"></span>
   </body>
</html>

让我们将上面的代码保存在一个 HTML 文件 spinnerexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出 −

在上面的示例中，更改微调器的值并查看下面显示的有关旋转和停止事件的消息。 现在更改微调器的焦点，您会看到一条关于更改事件的消息。

扩展点

微调器小部件是使用小部件工厂构建的，可以扩展。 要扩展小部件，我们可以覆盖或添加现有方法的行为。以下方法作为扩展点提供了与旋转器方法相同的 API 稳定性。 在上表中列出。

序号 方法 & 说明
1 _buttonHtml(event)

此方法返回一个 HTML 字符串。 此 HTML 可用于微调器的递增和递减按钮。 必须为每个按钮指定一个 ui-spinner-button 类名称，以便关联的事件起作用。 此方法不接受任何参数。

扩展点 - _buttonHtml(event, ui)

此方法返回一个 HTML 字符串。 此 HTML 可用于微调器的递增和递减按钮。 必须为每个按钮指定一个 ui-spinner-button 类名称，以便关联的事件起作用。 此方法不接受任何参数。

代码示例

_buttonHtml: function() {
  return "" +
    "" +
    "";
}
2 _uiSpinnerHtml(event)

此方法确定用于包装微调器的 <input> 元素的 HTML。 此方法不接受任何参数。

扩展点 - _uiSpinnerHtml(event, ui)

此方法确定用于包装微调器的 <input> 元素的 HTML。 此方法不接受任何参数。

代码示例

_uiSpinnerHtml: function() {
  return "";
}
jQuery UI Widget Factory 是一个可扩展的基础，所有 jQuery UI 的小部件都是基于它构建的。 使用小部件工厂构建插件为状态管理提供了便利，并为常见任务（如在实例化后公开插件方法和更改选项）提供了约定。
❮ 上一节 下一节 ❯