这篇文章主要介绍“jQuery UI旋转器部件Spinner Widget怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“jQuery UI旋转器部件Spinner Widget怎么使用”文章能帮助大家解决问题。
通过向上/向下按钮和箭头键处理，为输入数值增强文本输入功能。
普通的数字选择器。
代码
<input id="spinner"> <script> $( "#spinner" ).spinner(); </script>
旋转器（Spinner），或数步进控件（number stepper widget），是用于处理各种数字输入的完美控件。它允许用户直接输入一个值，或通过键盘、鼠标、滚轮旋转改变一个已有的值。当与全球化（Globalize）结合时，您甚至可以旋转显示不同地区的货币和日期。
旋转器（Spinner）使用两个按钮将文本输入覆盖为当前值的递增值和递减值。旋转器增加了按键事件，以便可以用键盘完成相同的递增和递减。旋转器代表 全球化（Globalize）的数字格式和解析。
UP：对值增加一步。
DOWN：对值减少一步。
PAGE UP：对值增加一页。
PAGE DOWN：对值减少一页。
用鼠标点击旋转按钮后，焦点仍停留在文本域中。
当旋转器不是只读（）时，用户可以输入值，这可能会产生无效的值（小于最小值，大于最大值，增减错配，非数字输入）。当增减时，不管通过编程方式还是旋转按钮方式，值都会被强制为一个有效值（如需了解详情，请查看 stepUp() 和 stepDown() 的描述。
旋转器部件（Spinner Widget）使用 jQuery UI CSS 框架 来定义它的外观和感观的样式。如果需要使用旋转器指定的样式，则可以使用下面的 CSS class 名称：
ui-spinner：旋转器的外层容器。
ui-spinner-input：旋转器部件（Spinner Widget）实例化的 元素。
ui-spinner-button：用于递增或递减旋转器值的按钮控件。向上按钮会另外带有一个 ui-spinner-up class，向下按钮会另外带有一个 ui-spinner-downclass。
culture：设置culture选项 用于解析和格式化值。 如果为null，在Globalize下当前设置的culture将被使用， 可供的culture，请查看Globalize 文档。 只有当numberFormat选项设置了，才会有关联。 需要引用Globalize。
disabled：如果设置为 true，则禁用该 spinner（微调组件）。
icons：标题要使用的图标，与 jQuery UI CSS 框架提供的图标（Icons） 匹配。设置为 false 则不显示图标。
incremental：当按住spinner（微调组件）按钮不放时，控制的步数。
max：允许的最大值。 如果元素的max属性存在，该选项未明确设置，那么该元素的max属性就被用作该选项的值。 如果为null，表示没有上限。
min：允许的最小值。 如果元素的min属性存在，该选项未明确设置，那么该元素的min属性就被用作该选项的值。 如果为null，表示没有下限。
numberFormat：通过Globalize格式化数字， 如果有效的话。 最常见的用于"n"用作十进制数 和"C"用作货币值。 也看到了culture选择。
page：当通过pageUp/pageDown的方法进行分页时，采取的步数。
step：通过按钮或stepUp()/stepDown()方法微调时，采取的步数。 如果元素的step属性存在，并且该选项未明确设置，那么元素的step属性值将作为该选项的值使用。
destroy()：完全移除 spinner功能。这会把元素返回到它的预初始化状态。
disable()：禁用 spinner.
enable()：启用 spinner.
option()：获取当前与指定的 optionName 关联的值。
pageDown()：通过指定页数递减值， 页数由page选项定义。 如果没有参数， 单页递减。
pageUp()：通过指定页数递增值， 页数由page选项定义。 如果没有参数， 单页递增。
stepDown()：通过指定步数递减值， 步数由step选项定义。 如果没有参数， 单步递减。
stepUp()：通过指定步数递增值， 步数由step选项定义。 如果没有参数， 单步递增。
value()：获取或设置当前数值，这个值是基于numberFormat 和 culture选项解析的。
widget()：返回包含生成组件包裹元素 的一个jQuery对象。
_buttonHtml()：这个方法返回的HTML用于spinner（微调组件）的递增和递减按钮。 每个按钮都必须给定一个ui-spinner-button的类名 用于相关联的事件工作。
_uiSpinnerHtml()：这个方法返回的HTML用于包裹 spinner（微调组件）元素。
change( event, ui )：当spinner微调器的值改变并且输入元素（input）失去焦点时，该事件触发。
create( event, ui )：当spinner微调器创建的时候，该时间触发。
spin( event, ui )：在递增/递减的时候，该事件触发（用 当前值和ui.value比较来 确定的微调的方向）。可以取消，以防止被更新值。
start( event, ui )：微调开始之前，触发该事件。可以取消，以防止微调。
stop( event, ui )：微调结束后，触发该事件。
关于“jQuery UI旋转器部件Spinner Widget怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
