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。

四、快速导航

1、Options

  • 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属性值将作为该选项的值使用。

2、Methods

  • destroy():完全移除 spinner功能。这会把元素返回到它的预初始化状态。
  • disable():禁用 spinner.
  • enable():启用 spinner.
  • option():获取当前与指定的 optionName 关联的值。
  • pageDown():通过指定页数递减值, 页数由page选项定义。 如果没有参数, 单页递减。
  • pageUp():通过指定页数递增值, 页数由page选项定义。 如果没有参数, 单页递增。
  • stepDown():通过指定步数递减值, 步数由step选项定义。 如果没有参数, 单步递减。
  • stepUp():通过指定步数递增值, 步数由step选项定义。 如果没有参数, 单步递增。
  • value():获取或设置当前数值,这个值是基于numberFormat 和 culture选项解析的。
  • widget():返回包含生成组件包裹元素 的一个jQuery对象。

3、Extension Points

  • _buttonHtml():这个方法返回的HTML用于spinner(微调组件)的递增和递减按钮。 每个按钮都必须给定一个ui-spinner-button的类名 用于相关联的事件工作。
  • _uiSpinnerHtml():这个方法返回的HTML用于包裹 spinner(微调组件)元素。

4、Events

  • change( event, ui ):当spinner微调器的值改变并且输入元素(input)失去焦点时,该事件触发。
  • create( event, ui ):当spinner微调器创建的时候,该时间触发。
  • spin( event, ui ):在递增/递减的时候,该事件触发(用 当前值和ui.value比较来 确定的微调的方向)。可以取消,以防止被更新值。
  • start( event, ui ):微调开始之前,触发该事件。可以取消,以防止微调。
  • stop( event, ui ):微调结束后,触发该事件。

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

(0)

相关推荐

  • jQuery UI工具提示框部件Tooltip Widget

    可自定义的.可主题化的工具提示框,替代原生的工具提示框. 一.实例 使用带有 title 属性的所有元素的事件代理,在文档上创建一个工具提示框(Tooltip). 代码: <p> <a href="#" rel="external nofollow" title="锚描述">锚文本</a> <input title="输入帮助"> </p> <script>

  • jQuery UI组件介绍

    一.jQuery UI简介 jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互.特效.小部件及主题.无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery UI 都是一个完美的选择. jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同.所有的 jQuery UI 小部件(Widget)使用相同的模式,所以,只要您学会使用其中一个,您就知道如何使用其他的小部件(

  • jquery UI实现autocomplete在获取焦点时得到显示列表功能示例

    本文实例讲述了jquery UI实现autocomplete在获取焦点时得到显示列表功能.分享给大家供大家参考,具体如下: 在做项目的时候,客户有这样的需求,将以前输入过的内容,在某个文本框上用列表的形式提示出来,可以选择,换言之,就如同我们用谷歌搜索,或者百度搜索一样,输入一些关键词,会自动提示,这个功能就叫autocomplete. 当然在 jquery  UI  下有 插件,具体下载的地方,搜索就知道了.重点是,我现在的用法,是需要在文本框获取焦点的时候,就弹出待选择的列表.而传统的是必须

  • jQuery UI实现动画效果代码分享

    页面文档载入后,为第一张图片添加class属性值为img1,为第二张图片添加class属性值img2,为第三张图片添加class属性img3,为第四张图片添加class属性值img4,这会使得每张图片的下半部分被上一张更大的图片给覆盖住. 当鼠标单击暴露在最上面的图片时,该图片在0.6秒内从原本大小放大150%,并逐渐减小不透明度直到完全消失,与此同时,其他所有图片在0.6秒内动态的放大并占据相应上一张图片的位置.全部动态效果结束后,消失不见的那张图片重新显示在最下面. <!DOCTYPE ht

  • jquery ui 实现 tab标签功能示例【测试可用】

    本文实例讲述了jquery ui 实现 tab标签功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <title>www.jb51.net tab切换</title> <style type="text/css"> #tabs{ width:500px; height:500px; margin:0 auto; } .ui-widget-header{ border

  • jQuery-ui插件sortable实现自由拖动排序

    本文为大家分享了jQuery ui插件sortable实现自由拖动排序的具体方法,供大家参考,具体内容如下 此为网上资源demo自己做了修改,记录下方便日后的学习. 效果展示: 代码展示: <!doctype html> <html lang="en"> <!-- 学习功能:使用Jquery-ui的sortable插件实现拖动排序 author: lisa于2018-5-30 --> <head> <meta charset=&qu

  • jquery-ui 进度条功能示例【测试可用】

    本文实例讲述了jquery-ui 进度条功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf8" /> <title>www.jb51.net progressbar</title> <style type="text/css"> #divprogressbar{ width:300px; heigh

  • jQuery UI旋转器部件Spinner Widget

    通过向上/向下按钮和箭头键处理,为输入数值增强文本输入功能. 一.实例 普通的数字选择器. 代码 <input id="spinner"> <script> $( "#spinner" ).spinner(); </script> 旋转器(Spinner),或数步进控件(number stepper widget),是用于处理各种数字输入的完美控件.它允许用户直接输入一个值,或通过键盘.鼠标.滚轮旋转改变一个已有的值.当与全球化(

  • jQuery UI菜单部件Menu Widget

    目录 实例 二.图标 三.分隔符 四.键盘交互 五.主题化 六.快速导航 1.Options 2.Methods 3.Events 带有鼠标和键盘交互的用于导航的可主题化菜单. 实例 一个简单的 jQuery UI 菜单(Menu). 代码 <ul id="menu"> <li><a href="#" rel="external nofollow" rel="external nofollow"

  • 基于jQuery UI CSS Framework开发Widget的经验

    jQuery UI中两大核心的css文件是ui.core.css和ui.theme.css.这两个css样式贯穿整个基于jQuery ui的界面上,并且可以通过jQuery ui ThemeRoller来生成自己的样式. .ui-helper-hidden :为元素应用display:none .ui-helper-hidden-accessible:将元素的绝对位置设置为不可见 .ui-helper-clearfix:适用于浮动包裹父元素的属性 . ui-helper-zfix:适用于修复if

  • jQuery UI结合Ajax创建可定制的Web界面

    如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化.个性化的主页或仪表板页面(例如 iGoogle.MyYahoo! 和 MyAOL)日渐普及,大多数 Web 应用程序内甚至也整合了类似的功能.jQuery 库简化了此类复杂 JavaScript 交互的编写,随着 jQuery UI 的引入,这项功能得到了进一步的简化,该库以易于访问的 jQuery 插件的形式提供了常用用户界面类型. 本文介绍了如何利用 Ajax 和 jQuery UI 创建具有各种定制功能的高度可

  • 基于jquery ui的alert,confirm方案(支持换肤)

    实现功能: 1.修改标题样式.把jquery ui的标题样式放上去.支持换肤. 2.修改按钮样式,换成jqueryui的button按钮样式. 3.将模式化窗口的背景换成了jqueryui的模式化背景. 代码: //首先要引入jquery,以及ui的包和皮肤的样式如: <script src="../js/ui/jquery-1.11.0.min.js"></script> <script src="../js/ui/jquery-migrate

  • jQuery UI AutoComplete 使用说明

    介绍 在 jQuery UI 的最近更新中增加了自动完成控件 AutoComplete,这为我们提供了又一个强大的开发工具,这里介绍一下这个控件的使用方式. 首先,jQuery UI 是基于 jQuery 的,所以,必须在你的页面中首先引用 jQuery 脚本库,然后再引用 jQuery UI 库,对于 jQuery UI 库来说,可以引用整个的库,也可以仅仅引用当前页面用到的库. jQuery UI 的下载地址:http://jqueryui.com/download 一.基本配置 一般来说,

  • jQuery UI AutoComplete 自动完成使用小记

    页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="web_Test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

  • 使用Asp.net Mvc3 Razor视图方式扩展JQuery UI Widgets方法介绍

    JQuery UI Widgets是本人非常喜欢的一套前端JS组件,日常开发中基于原有的jquery ui widget js代码进行开发,需要写非常多的重复代码,同时一些现有组件无法满足需求的情况下,需要对现有组件进行扩展,本文使用一套基于jquery ui 的扩展js组件---jtable (http://www.jtable.org),包含了基本的列表和编辑窗口,比起jqGrid,jquery easyui grid或者extjs grid,jtable的代码非常简洁.对于grid功能要求

随机推荐