目录

JqueryUI - Spinner( Spinner)

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

以下示例取决于Globalize 。 您可以从https://github.com/jquery/globalize获取Globalize文件。 单击releases链接,选择所需的版本,然后下载.ziptar.gz文件。 解压缩文件并将以下文件复制到示例所在的文件夹中。

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

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

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

jQueryUI提供了创建微调器的spinner()方法。

语法 (Syntax)

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

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

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

语法 (Syntax)

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

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

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

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

Sr.No. 选项和说明
1 culture

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

Option - culture

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

Syntax

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

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

Option - disabled

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

Syntax

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

此选项设置用于按钮的图标,匹配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" } }
);
4 incremental

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

Option - incremental

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

这可以是 -

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

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

Syntax

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

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

Option - max

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

这可以是 -

  • Number - 最大值。

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

Syntax

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

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

Option - min

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

这可以是 -

  • Number - 最小值。

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

Syntax

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

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

Option - numberFormat

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

Syntax

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

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

Option - page

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

Syntax

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

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

Option - step

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

这可以是 -

  • Number - 步长。

  • String - 如果包含Globalize,则step选项可以作为字符串传递,该字符串将根据numberFormatculture选项进行解析,否则将回退到本机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的微调器小部件中三个选项minmaxstep的用法。

<!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的微调器窗口小部件中三个选项culturenumberFormatpage的用法。

<!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. 行动和描述
1 destroy

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

Action - destroy

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

Syntax

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

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

Action - disable

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

Syntax

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

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

Action - enable

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

Syntax

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

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

Action - option( optionName )

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

Syntax

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

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

Action - option

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

Syntax

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

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

Action - optionName

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

Syntax

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

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

Action - option( options )

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

Syntax

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

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

Action - pageDown( [pages ] )

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

Syntax

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

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

Action - pageUp( [pages ] )

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

Syntax

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

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

Action - stepDown( [steps ] )

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

Syntax

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

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

Action - stepUp( [steps ] )

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

Syntax

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

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

Action - value

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

Syntax

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

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

Action - value( value )

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

Syntax

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

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

Action - widget

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

Syntax

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

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

使用操作stepUp,stepDown,pageUp和pageDown

以下示例演示了stepUp, stepDown, pageUppageDown方法的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的标准浏览器中打开它,你还必须看到以下输出 -

新页面打开

在上面的示例中,使用相应的按钮递增/递减微调器。

使用操作启用和禁用

以下示例演示了enabledisable方法的用法。

<!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. 事件方法和描述
1 change(event, ui)

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

Event - change(event, ui)

微调器的值已更改且输入不再聚焦时触发此事件。 其中eventEvent类型, uiObject类型。

Syntax

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

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

Event - create(event, ui)

创建微调器时会触发此事件。 其中eventEvent类型, uiObject类型。

Syntax

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

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

Event - spin(event, ui)

在递增/递减期间触发此事件。 其中eventEvent类型, uiObject类型。

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

Syntax

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

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

Event - start(event, ui)

在旋转之前触发此事件。 可以取消,防止旋转发生。 其中eventEvent类型, uiObject类型。

Syntax

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

旋转后触发此事件。

Event - stop(event, ui)

旋转后触发此事件。 其中eventEvent类型, uiObject类型。

Syntax

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

例子 (Example)

以下示例演示了微调器窗口小部件中的事件方法用法。 此示例演示了事件spinchangestop

<!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 class="ui-spinner-button ui-spinner-up">" +
      "<span class='ui-icon " + this.options.icons.up + "'>▲</span>" +
    "</button>" +
    "<button class="ui-spinner-button ui-spinner-down">" +
      "<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的小部件。 使用小部件工厂构建插件为状态管理提供了便利,也为常见任务提供了便利,例如公开插件方法和在实例化后更改选项。
↑回到顶部↑
WIKI教程 @2018