JqueryUI - Spinner

JqueryUI Spinner - 从简单和简单的步骤学习JqueryUI，从基本到高级概念，包括概述，环境设置，交互，可拖动，可放置，可调整大小，可选择，可排序，小部件，手风琴，自动完成，按钮，Datepicker，对话框，菜单， Progressbar，Slider，Spinner，Tabs，Tooltip，Effects，Add Class，Color Animation，Effect，Hide，Remove Class，Show，Switch Class，Toggle，Toggle Class，Utilities，Position，Widget Factory

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

以下示例取决于 Globalize .您可以从 https://github.com/jquery/globalize 获取Globalize文件.单击版本链接，选择所需的版本，然后下载 .zip 或 tar.gz 文件.解压缩文件并将以下文件复制到示例所在的文件夹中.
lib/globalize.js:This file包含用于处理本地化的Javascript代码
lib/globalize.culture.js:此文件包含Globalize库附带的一组完整语言环境.
这些文件也存在于jquery-ui库的 external 文件夹中.

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

语法

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

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

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

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

语法

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

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

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

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


  $(".selector").spinner( {culture:"fr"} );
  $(".selector").spinner( {disabled:true} );
  $(".selector").spinner( {icons:{ down:"custom-down-icon"，up:"custom-up-icon"}} );
  $(".selector").spinner( {incremental:false} );
  $ (".selector").spinner( {max:50} );
  $(".selector").spinner( {min:0} );
  $(".selector").spinner( {numberFormat:"n"} );
  $(".selector").spinner( {page:5} );
  $(".selector").spinner( {step:2} );

Sr.No.	选项&安培;描述
1	culture 此选项设置用于解析和格式化值的区域性.默认情况下，其值为 null ，这意味着使用了 Globalize 中当前设置的文化. 选项 - 文化此选项设置用于解析和格式化值的区域性.默认情况下，其值为 null ，这意味着使用 Globalize 中当前设置的文化.仅在设置了 numberFormat 选项时才相关. 语法 $(".selector").spinner( {culture:"fr"} );
2	disabled 此选项如果设置为 true ，则禁用微调器.默认情况下，其值为 false . 选项 - 已停用此选项如果设置为 true ，则禁用微调器.默认情况下，其值为 false . 语法 $(".selector").spinner( {disabled:true} );
3	icons 此选项设置用于按钮的图标，与 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	incremental 此选项控制按住旋转按钮时所执行的步骤数.默认情况下，其值为 true . 选项 - 增量此选项控制按住旋转按钮时所执行的步骤数.默认情况下，其值为 true . 这可以是 : 布尔 : 如果设置为 false ，则所有步骤都相同.如果设置为 true ，步进增量将在不断旋转时增加. 功能 : 这必须返回当前旋转应该发生的步数. 语法 $(".selector").spinner( {incremental:false} );
5	max 此选项表示允许的最大值.默认情况下，其值为 null ，这意味着没有最大强制执行. 选项 - 最大此选项表示允许的最大值.默认情况下，其值为 null ，这意味着没有最大强制执行. 这可以是 : 数字 : 最大值. 字符串 : 如果包含 Globalize ，则max选项可以作为字符串传递，该字符串将根据 numberFormat 和 culture 选项进行解析语法 $ (".selector").spinner( {max:50} );
6	min 此选项表示允许的最小值.默认情况下，其值为 null ，这意味着没有最低强制执行. 选项 - 分钟此选项表示允许的最小值.默认情况下，其值为 null ，这意味着没有最低强制执行. 这可以是 : 数字 : 最小值. 字符串 : 如果包含 Globalize ，则min选项可以作为字符串传递，该字符串将根据 numberFormat 和 culture 选项进行解析 . 语法 $(".selector").spinner( {min:0} );
7	numberFormat 此选项表示传递给 Globalize 的数字格式(如果有).最常见的是十进制数字的"n"和货币值的"C".默认情况下，其值为 null . 选项 - numberFormat 此选项表示传递给 Globalize 的数字格式(如果有).最常见的是十进制数字的"n"和货币值的"C".默认情况下，其值为 null . 语法 $(".selector").spinner( {numberFormat:"n"} );
8	page 此选项指示通过pageUp/pageDown方法进行分页时要执行的步骤数.默认情况下，其值 10 . 选项 - 页面此选项指示通过pageUp/pageDown方法进行分页时要执行的步骤数.默认情况下，其值 10 . 语法 $(".selector").spinner( {page:5} );
9	step 此选项表示通过按钮或通过 stepUp()/stepDown()方法旋转时要执行的步骤的大小.如果元素的 step 属性存在且未明确设置该选项，则使用该元素. 选项 - 步骤此选项表示通过按钮或通过 stepUp()/stepDown()方法旋转时要执行的步骤的大小.如果元素的 step 属性存在且未明确设置该选项，则使用该元素. 这可以是 : 数字 : 步骤的大小. String : 如果包含 Globalize ，则step选项可以作为字符串传递，该字符串将根据 numberFormat 和 culture 选项进行解析，否则将回退到本机parseFloat. 语法 $(".selector").spinner( {step:2} );

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

默认功能

以下示例演示了微调器窗口小部件功能的简单示例，不将参数传递给 spinner()方法.

               jQuery UI Spinner functionality                                             #spinner-1 input {width: 100px}

让我们将上述代码保存在HTML文件中 spinnerexample.htm 并在支持javascript的标准浏览器中打开它，你还必须看到以下输出.现在，您可以使用结果

使用 Min, Max 和 Step 选项

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

               jQuery UI Spinner functionality                                             #spinner-2,#spinner-3 input {width: 100px}                                                 Spinner Min, Max value set:         

         Spinner increments/decrements in step of of 100:

让我们将上述代码保存在HTML文件spinnerexample.htm中，并在支持javascript的标准浏览器中打开它，您还必须看到以下输出。现在，你可以玩结果

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

使用图标选项

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

               jQuery UI Spinner functionality                                             #spinner-5 input {width: 100px}

让我们将上述代码保存在HTML文件spinnerexample.htm中，并在支持javascript的标准浏览器中打开它，您还必须看到以下输出。现在，你可以玩结果

在上面的示例中，您可以注意到图像微调器已更改。

使用culture，numberFormat和页面选项

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

               jQuery UI Spinner functionality                                                                        Amount to donate:

让我们将上述代码保存在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);;

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


$(".selector").spinner("destroy");
$(".selector").spinner("disable");
$(".selector").spinner("enable");
var isDisabled = $( ".selector" ).spinner( "option", "disabled" );
var options = $( ".selector" ).spinner( "option" );
$( ".selector" ).spinner( "option", "disabled", true );
$(".selector").spinner("option", { disabled: true });
$(".selector").spinner("pageDown");
$(".selector").spinner("pageUp");
$(".selector").spinner("stepDown");
$(".selector").spinner("stepUp");
var value = $( ".selector" ).spinner( "value" );
$( ".selector" ).spinner( "value", 50 );
$( ".selector" ).spinner( "widget");

Sr.No.	Action & Description
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()将导致触发启动，旋转和停止事件。 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()将导致触发启动，旋转和停止事件。 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，pageUp和pageDown方法的用法。

               jQuery UI Spinner functionality                                             #spinner-6 input {width: 100px}                                                    
      Increment      Decrement      Increment Page      Decrement Page

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

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

使用操作 enable 和 disable

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

               jQuery UI Spinner functionality                                             #spinner-7 input {width: 100px}                                                    
      Enable      Disable

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

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

Spinner元素的事件管理

除了我们在前面几节中看到的spinner（options）方法之外，JqueryUI还提供了为特定事件触发的事件方法。这些事件方法如下所列


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

Sr.No.	Event Method & Description
1	change(event, ui) 微调器的值已更改且输入不再聚焦时，将触发此事件。 Event - change(event, ui) 微调器的值已更改且输入不再聚焦时，将触发此事件。其中event是Event类型，ui是Object类型。 Syntax $( ".selector" ).spinner({ change: function( event, ui ) {}});
2	create(event, ui) 创建微调器时会触发此事件。 Event - create(event, ui) 创建微调器时会触发此事件。其中event是Event类型，ui是Object类型。 Syntax $( ".selector" ).spinner({ create: function( event, ui ) {}});
3	spin(event, ui) 在递增/递减期间触发此事件。 Event - spin(event, ui) 在递增/递减期间触发此事件。其中event是Event类型，ui是Object类型。并表示要设置的新值，除非事件被取消。 Syntax $( ".selector" ).spinner({ spin: function( event, ui ) {}});
4	start(event, ui) 在旋转之前触发此事件。可以取消，防止旋转发生。 Event - start(event, ui) 在旋转之前触发此事件。可以取消，防止旋转发生。其中event是Event类型，ui是Object类型。 Syntax $( ".selector" ).spinner({ start: function( event, ui ) {}});
5	stop(event, ui) 旋转后会触发此事件。 Event - stop(event, ui) 旋转后会触发此事件。其中event是Event类型，ui是Object类型。 Syntax $( ".selector" ).spinner({ stop: function( event, ui ) {}});

示例

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

               jQuery UI Spinner functionality                                             #spinner-8 input {width: 100px}

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

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

扩展点

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

Sr.No.	Method & Description
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 "" + "" + "▲" + "" + "" + "▼" + "";}
2	_uiSpinnerHtml(event) 此方法确定用于包装微调器的元素的HTML。此方法不接受任何参数。 Extension Point - _uiSpinnerHtml(event, ui) 此方法确定用于包装微调器的元素的HTML。此方法不接受任何参数。 Code Example _uiSpinnerHtml: function() { return "";}

Sr.No.

Method & Description

_buttonHtml(event)

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

Extension Point - _buttonHtml(event, ui)

Code Example

_buttonHtml: function() {  return "" +    "" +      "▲" +    "" +    "" +      "▼" +    "";}

_uiSpinnerHtml(event)

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

Extension Point - _uiSpinnerHtml(event, ui)

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

Code Example

_uiSpinnerHtml: function() {  return "";}

jQuery UI Widget Factory是一个可扩展的基础，可以在其上构建所有jQuery UI的小部件。使用小部件工厂构建插件为状态管理提供了便利，也为常见任务提供了约定，例如公开插件方法和在实例化后更改选项。