jQuery UI微调器 jQueryUI微调器|jQueryUI

本文概述

第一种方法
jQuery UI Spinner示例1
jQuery UI Spinner示例2
第二种方法
jQueryUI spinner()示例3
jQueryUI spinner()示例4

jQuery UI旋转器小部件用于在输入框中添加向上/向下箭头, 从而允许用户增大和减小输入框中的值。它使用户可以直接键入值, 或通过使用键盘, 鼠标或滚轮旋转来修改现有值。
它还具有一些扩展功能, 例如：

它有助于你跳过值。
它还启用了全球化的格式设置选项（即货币, 小数, 千位分隔符等）

句法：
你可以使用两种形式的spinner()方法：

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

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

第一种方法

$(selector, context).spinner (options)

spinner（options）方法指定应将HTML元素及其内容视为Spinner对待和管理。在这里？选项？参数是一个对象, 用于指定所涉及的微调器元素的外观和行为。
你可以使用JavaScript对象一次使用一个或多个选项。如果有多个选项, 则必须使用逗号将它们分开, 如下所示：

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

以下是可与该方法一起使用的不同选项的列表：

选项	描述
culture	此选项设置区域性以用于解析和格式化值。默认情况下, 其值为null, 这表示使用当前设置的globalize。
disabled	如果将此选项设置为true, 它将禁用微调器。默认情况下, 其值为false。
icons	此选项用于设置用于按钮的图标, 与jQueryUI CSS框架提供的图标匹配。默认情况下, 其值为{down：“ ui-icon-triangle-1-s”, up：“ ui-icon-triangle-1-n”}。
incremental	此选项控制按住旋转按钮时采取的步骤数。默认情况下, 其值为true。
max	此选项用于标识最大允许值。默认情况下, 它的值为null, 这意味着没有最大强制执行。
min	此选项用于标识最小允许值。默认情况下, 其值为null, 这意味着没有最低强制要求。
numberFormat	此选项指定传递给全球化的数字的格式（如果有）。最常见的是“ n”代表十进制数字, “ c”代表货币值。默认情况下, 其值为null。
page	此选项指示通过pageup / pagedown方法进行分页时要采取的步骤数。默认情况下, 其值为10。
step	此选项指定通过按钮或通过stepup()/ stepdown()方法旋转时要采取的步骤的大小。如果元素的step属性存在并且未明确设置选项, 则使用该属性。

jQuery UI Spinner示例1在spinner()方法没有参数的情况下：
让我们以一个简单的示例来演示Spinner小部件功能, 不将任何参数传递给spinner()方法。

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Spinner functionality< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/0135201J5-0.jpg"> < /script> < script src="http://img.readke.com/220430/0135203101-1.jpg"> < /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="http://www.srcmini.com/0" /> < /div> < /body> < /html>

立即测试
jQuery UI Spinner示例2使用最小, 最大和步进选项：
让我们以一个示例来演示jQueryUI的微调小部件中选项min, max和step的用法。

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Spinner functionality< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/0135201J5-0.jpg"> < /script> < script src="http://img.readke.com/220430/0135203101-1.jpg"> < /script> < !-- CSS --> < style type="text/css"> #spinner-2, #spinner-3 input {width: 100px} < /style> < !-- Javascript --> < script> $(function() { $( "#spinner-2" ).spinner({ min: -50, max: 50 }); $('#spinner-3').spinner({ step: 1000, min: -1000000, max: 1000000 }); }); < /script> < /head> < body> < !-- HTML --> < div id="example"> Spinner Min, Max value set: < input type="text" id="spinner-2" value="http://www.srcmini.com/0" /> < br> < br> Spinner increments/decrements in step of of 1000: < input type="text" id="spinner-3" value="http://www.srcmini.com/0" /> < /div> < /body> < /html>

立即测试
第二种方法

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

微调器（“操作”, 参数）方法用于对微调器元素执行操作, 例如启用/禁用微调器。该操作在第一个参数中指定为字符串（例如, “ disable”禁用微调器）。
以下是可与该方法一起使用的不同操作的列表：

行动	描述
destroy	此操作用于完全破坏元素的微调器功能, 并且元素返回其初始状态。此方法不接受任何参数。
disable	此操作用于禁用微调器功能。此方法不接受任何参数。
enable	此操作用于启用微调功能。此方法不接受任何参数。
option( optionName )	此操作获取当前与指定的optionName关联的值。这里的optionName是要获取的选项的名称。
option	此操作将获取一个对象, 该对象包含表示当前微调器选项哈希的键/值对。此方法不接受任何参数。
option(optionName, value)	此操作设置与指定的optionName关联的微调器选项的值。
option(options)	此操作为微调器设置一个或多个选项。
pageDown( [pages ] )	此操作将值减小指定的页数（如page选项所定义）。
pageUp( [pages ] )	此操作将按页面选项的定义将值增加指定的页面数。
stepDown( [steps ] )	此操作用于将值减少指定的步数。
stepUp( [steps ] )	此操作将值增加指定的步数。
value	该操作将当前值作为数字获取。该值基于numberFormat和区域性选项进行解析。此方法不接受任何参数。
value(value)	此操作用于设置值。
widget	此操作用于返回微调小部件元素；一个带有UI旋转器类名称的注释。

jQueryUI spinner()示例3使用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="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/0135201J5-0.jpg"> < /script> < script src="http://img.readke.com/220430/0135203101-1.jpg"> < /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>

立即测试
jQueryUI spinner()示例4使用动作启用和禁用：
让我们以一个示例来演示动作启用和禁用的用法：

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Spinner functionality< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/0135201J5-0.jpg"> < /script> < script src="http://img.readke.com/220430/0135203101-1.jpg"> < /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>

【jQuery UI微调器】立即测试