jquery

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > jquery > jQuery UI旋转器部件

jQuery UI旋转器部件Spinner Widget

作者:springsnow

这篇文章介绍了jQuery UI旋转器部件Spinner Widget,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

通过向上/向下按钮和箭头键处理,为输入数值增强文本输入功能。

一、实例

普通的数字选择器。

代码

<input id="spinner">
 
<script>
$( "#spinner" ).spinner();
</script>

旋转器(Spinner),或数步进控件(number stepper widget),是用于处理各种数字输入的完美控件。它允许用户直接输入一个值,或通过键盘、鼠标、滚轮旋转改变一个已有的值。当与全球化(Globalize)结合时,您甚至可以旋转显示不同地区的货币和日期。

旋转器(Spinner)使用两个按钮将文本输入覆盖为当前值的递增值和递减值。旋转器增加了按键事件,以便可以用键盘完成相同的递增和递减。旋转器代表 全球化(Globalize)的数字格式和解析。

二、键盘交互

用鼠标点击旋转按钮后,焦点仍停留在文本域中。

当旋转器不是只读()时,用户可以输入值,这可能会产生无效的值(小于最小值,大于最大值,增减错配,非数字输入)。当增减时,不管通过编程方式还是旋转按钮方式,值都会被强制为一个有效值(如需了解详情,请查看 stepUp() 和 stepDown() 的描述。

三、主题化

旋转器部件(Spinner Widget)使用 jQuery UI CSS 框架 来定义它的外观和感观的样式。如果需要使用旋转器指定的样式,则可以使用下面的 CSS class 名称:

四、快速导航

1、Options

2、Methods

3、Extension Points

4、Events

到此这篇关于jQuery UI旋转器部件Spinner Widget的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文