登录
目录
当前位置： 首页 > 文档资料 > jQueryUI 入门教程 >

Spinner（Spinner）

优质
小牛编辑
121浏览
2023-12-01

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（）方法。

语法 (Syntax)

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

  • $（selector，context）.spinner（options）方法

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

$（selector，context）.spinner（options）方法

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

语法 (Syntax)

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

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

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

下表列出了可与此方法一起使用的不同options -

Sr.No.选项和说明
1culture

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

Option - culture

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

Syntax

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

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

Option - disabled

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

Syntax

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

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

Option - icons

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

Syntax

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

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

Option - incremental

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

这可以是 -

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

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

Syntax

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

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

Option - max

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

这可以是 -

  • Number - 最大值。

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

Syntax

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

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

Option - min

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

这可以是 -

  • Number - 最小值。

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

    。

Syntax

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

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

Option - numberFormat

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

Syntax

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

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

Option - page

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

Syntax

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

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

Option - step

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

这可以是 -

  • Number - 步长。

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

    • Syntax

$( ".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的标准浏览器中打开它，您还必须看到以下输出。

使用最小，最大和步长选项

以下示例演示了JqueryUI的微调器小部件中三个选项min ， max和step的用法。

<!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的标准浏览器中打开它，您还必须看到以下输出。

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

使用图标选项

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

<!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和页面选项

以下示例演示了numberFormat的微调器窗口小部件中三个选项culture ， numberFormat和page的用法。

<!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”禁用微调器）。 请查看下表中可以传递的操作。

语法 (Syntax)

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

下表列出了此方法可以使用的不同actions -

Sr.No.行动和描述
1destroy

此操作会完全破坏元素的微调器功能。 元素返回到pre-init状态。 此方法不接受任何参数。

Action - destroy

此操作会完全破坏元素的微调器功能。 元素返回到pre-init状态。 此方法不接受任何参数。

Syntax

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

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

Action - disable

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

Syntax

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

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

Action - enable

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

Syntax

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

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

Action - option( optionName )

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

Syntax

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

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

Action - option

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

Syntax

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

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

Action - optionName

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

Syntax

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

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

Action - option( options )

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

Syntax

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

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

Action - pageDown( [pages ] )

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

Syntax

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

此操作将值增加指定的页数，如页面选项所定义。

Action - pageUp( [pages ] )

此操作将值增加指定的页数，如页面选项所定义。 调用pageUp()将导致触发start, spin,和stop事件。

Syntax

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

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

Action - stepDown( [steps ] )

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

Syntax

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

此操作将值增加指定的步数。

Action - stepUp( [steps ] )

此操作将值增加指定的步数。 调用stepUp()将导致触发start, spin,和stop事件。

Syntax

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

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

Action - value

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

Syntax

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

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

Action - value( value )

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

Syntax

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

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

Action - widget

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

Syntax

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

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

使用操作stepUp，stepDown，pageUp和pageDown

以下示例演示了stepUp, stepDown, pageUp和pageDown方法的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的标准浏览器中打开它

在上面的示例中，使用“启用/禁用”按钮启用或禁用微调器。

Spinner元素的事件管理

除了我们在前面部分中看到的spinner（options）方法之外，JqueryUI还提供了针对特定事件触发的事件方法。 这些事件方法如下 -

Sr.No.事件方法和描述
1change(event, ui)

微调器的值已更改且输入不再聚焦时触发此事件。

Event - change(event, ui)

微调器的值已更改且输入不再聚焦时触发此事件。 其中event是Event类型， ui是Object类型。

Syntax

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

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

Event - create(event, ui)

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

Syntax

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

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

Event - spin(event, ui)

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

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

Syntax

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

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

Event - start(event, ui)

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

Syntax

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

旋转后触发此事件。

Event - stop(event, ui)

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

Syntax

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

例子 (Example)

以下示例演示了微调器窗口小部件中的事件方法用法。 此示例演示了事件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的标准浏览器中打开它

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

扩展点

微调器窗口小部件是使用窗口小部件工厂构建的，可以进行扩展。 要扩展小部件，我们可以覆盖或添加现有方法的行为。 以下方法提供了与spinner方法具有相同API稳定性的扩展点。 列于 above table 。

Sr.No.方法和描述
1_buttonHtml(event)

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

Extension Point - _buttonHtml(event, ui)

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

Code Example

_buttonHtml: function() {
  return "" +
    "<button>" +
      "<span class='ui-icon " + this.options.icons.up + "'>▲</span>" +
    "</button>" +
    "<button>" +
      "<span class='ui-icon " + this.options.icons.down + "'>▼</span>" +
    "</button>";
}
2_uiSpinnerHtml(event)

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

Extension Point - _uiSpinnerHtml(event, ui)

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

Code Example

_uiSpinnerHtml: function() {
  return " ";
}
jQuery UI Widget Factory是一个可扩展的基础，可以在其上构建所有jQuery UI的小部件。 使用小部件工厂构建插件为状态管理提供了便利，也为常见任务提供了便利，例如公开插件方法和在实例化后更改选项。
免责声明： 以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。
@小牛知识库 xnip.cn