JqueryUI - 微调器

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

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

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

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

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

jQueryUI 提供了 spinner() 方法来创建旋转器。

句法

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

$(选择器,上下文).spinner(选项)方法

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

句法

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

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

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

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

先生。 选项和说明
1 文化

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

选项-文化

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

句法

$( ".selector" ).spinner(
   { culture: "fr" }
);
2 残疾人

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

选项 - 禁用

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

句法

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

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

选项 - 图标

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

句法

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

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

选项 - 增量

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

这可以是类型 -

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

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

句法

$( ".selector" ).spinner(
   { incremental: false }
);
5 最大限度

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

选项 - 最大

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

这可以是类型 -

  • Number - 最大值。

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

句法

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

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

选项 - 分钟

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

这可以是类型 -

  • Number - 最小值。

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

    。

句法

$( ".selector" ).spinner(
   { min: 0 }
);
7 数字格式

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

选项 - numberFormat

This option indicates format of numbers passed to Globalize, if available. Most common are "n" for a decimal number and "C" for a currency value. By default its value is null.

Syntax

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

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

Option - page

This option indicates the number of steps to take when paging via the pageUp/pageDown methods. By default its value is 10.

Syntax

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

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

Option - step

This option indicates size of the step to take when spinning via buttons or via the stepUp()/stepDown() methods. The element's step attribute is used if it exists and the option is not explicitly set.

This can be of type −

  • Number − The size of step.

  • String − If Globalize is included, the step option can be passed as a string which will be parsed based on the numberFormat and culture options, otherwise it will fall back to the native parseFloat.

    • Syntax

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

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

默认功能

以下示例演示了 spinner 小部件功能的简单示例，未向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 的 spinner 小部件中三个选项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 的标准浏览器中打开它，您还必须看到以下输出。现在，您可以使用结果 -

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

使用图标选项

以下示例演示了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 的标准浏览器中打开它，您还必须看到以下输出。现在，您可以使用结果 -

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

使用区域性、数字格式和页面选项

以下示例演示了JqueryUI 的 spinner 小部件中三个选项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”并且区域性设置为“de-DE”。这里我们使用了 jquery-ui 库中的 Globalize 文件。

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

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

句法

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

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

先生。 动作与描述
1 破坏

此操作完全破坏了元素的微调器功能。元素返回到其初始化前的状态。此方法不接受任何参数。

Action - destroy

This action destroys the spinner functionality of an element completely. The elements return to their pre-init state. This method does not accept any arguments.

Syntax

$(".selector").spinner("destroy");
2 禁用

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

Action - disable

This action disables the spinner functionality. This method does not accept any arguments.

Syntax

$(".selector").spinner("disable");
3 使能够

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

Action - enable

This action enables the spinner functionality. This method does not accept any arguments.

Syntax

$(".selector").spinner("enable");
4 选项（选项名称）

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

Action - option( optionName )

This action gets the value currently associated with the specified optionName. Where optionName is the name of the option to get.

Syntax

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

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

Action - option

This action gets an object containing key/value pairs representing the current spinner options hash. This method does not accept any arguments.

Syntax

var options = $( ".selector" ).spinner( "option" );
6 选项（选项名称，值）

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

Action - optionName

This action sets the value of the spinner option associated with the specified optionName.

Syntax

$( ".selector" ).spinner( "option", "disabled", true );
7 选项（选项）

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

Action - option( options )

This action sets one or more options for the spinner.

Syntax

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

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

Action - pageDown( [pages ] )

This action decrements the value by the specified number of pages, as defined by the page option. Invoking pageDown() will cause start, spin, and stop events to be triggered.

Syntax

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

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

Action - pageUp( [pages ] )

This action increments the value by the specified number of pages, as defined by the page option. Invoking pageUp() will cause start, spin, and stop events to be triggered.

Syntax

$(".selector").spinner("pageUp");
10 下步（[步数]）

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

Action - stepDown( [steps ] )

This action decrements the value by the specified number of steps. Invoking stepDown() will cause start, spin, and stop events to be triggered.

Syntax

$(".selector").spinner("stepDown");
11 向上（[步数]）

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

Action - stepUp( [steps ] )

This action increments the value by the specified number of steps. Invoking stepUp() will cause start, spin, and stop events to be triggered.

Syntax

$(".selector").spinner("stepUp");
12 价值

此操作获取数字形式的当前值。该值是根据 numberFormat 和区域性选项进行解析的。此方法不接受任何参数。

Action - value

This action gets the current value as a number. The value is parsed based on the numberFormat and culture options. This method does not accept any arguments.

Syntax

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

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

Action - value( value )

This action sets the value. if value is passed value is parsed based on the numberFormat and culture options.

Syntax

$( ".selector" ).spinner( "value", 50 );
14 小部件

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

Action - widget

This action returns the spinner widget element; the one annotated with the ui-spinner class name.

Syntax

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

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

使用动作启用和禁用

以下示例演示了启用和禁用方法的使用。

<!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（选项）方法之外，JqueryUI 还提供了针对特定事件触发的事件方法。下面列出了这些事件方法 -

先生。 活动方式及说明
1 更改（事件，用户界面）

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

Event - change(event, ui)

This event is triggered when the value of the spinner has changed and the input is no longer focused. Where event is of type Event, and ui is of type Object.

Syntax

$( ".selector" ).spinner({
   change: function( event, ui ) {}
});
2 创建（事件，用户界面）

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

Event - create(event, ui)

This event is triggered when the spinner is created. Where event is of type Event, and ui is of type Object.

Syntax

$( ".selector" ).spinner({
   create: function( event, ui ) {}
});
3 自旋（事件，用户界面）

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

Event - spin(event, ui)

This event is triggered during increment/decrement. Where event is of type Event, and ui is of type Object.

and represents the new value to be set, unless the event is cancelled.

Syntax

$( ".selector" ).spinner({
   spin: function( event, ui ) {}
});
4 开始（事件，用户界面）

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

Event - start(event, ui)

This event is triggered before a spin. Can be canceled, preventing the spin from occurring. Where event is of type Event, and ui is of type Object.

Syntax

$( ".selector" ).spinner({
   start: function( event, ui ) {}
});
5 停止（事件，用户界面）

该事件在旋转后触发。

Event - stop(event, ui)

This event is triggered after a spin. Where event is of type Event, and ui is of type Object.

Syntax

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

例子

以下示例演示了微调器小部件中事件方法的用法。此示例演示了旋转、更改和停止事件的使用。

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

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

扩展点

微调器小部件是使用小部件工厂构建的，并且可以扩展。要扩展小部件，我们可以覆盖或添加现有方法的Behave。以下方法提供了与微调器方法具有相同 API 稳定性的扩展点。列于上表。

先生。 方法及说明
1 _buttonHtml（事件）

该方法返回一个 HTML 字符串。此 HTML 可用于微调器的递增和递减按钮。每个按钮都必须有一个 ui-spinner-button 类名，关联事件才能工作。此方法不接受任何参数。

Extension Point - _buttonHtml(event, ui)

This method return a String which is an HTML. This HTML can be used for the spinner's increment and decrement buttons. Each button must be given a ui-spinner-button class name for the associated events to work. This method does not accept any arguments.

Code Example

_buttonHtml: function() {
  return "" +
    "" +
    "";
}
2 _uiSpinnerHtml（事件）

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

Extension Point - _uiSpinnerHtml(event, ui)

This method determine the HTML to use to wrap the spinner's <input> element. This method does not accept any arguments.

Code Example

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