zoukankan      html  css  js  c++  java
  • jQuery UI (17)旋转器部件(Spinner Widget)

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

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

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

    键盘交互

    • UP:对值增加一步。
    • DOWN:对值减少一步。
    • PAGE UP:对值增加一页。
    • PAGE DOWN:对值减少一页。

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

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

    主题化

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

    • ui-spinner:旋转器的外层容器。
      • ui-spinner-input:旋转器部件(Spinner Widget)实例化的 <input> 元素。
      • ui-spinner-button:用于递增或递减旋转器值的按钮控件。向上按钮会另外带有一个 ui-spinner-up class,向下按钮会另外带有一个 ui-spinner-down class。

    依赖

    附加说明

    • 该部件要求一些功能性的 CSS,否则将无法工作。如果您创建了一个自定义的主题,请使用小部件指定的 CSS 文件作为起点。
    • 该部件以编程方式操作元素的值,因此当元素的值改变时不会触发原生的 change 事件。
    • 不支持在 <input type="number"> 上创建选择器,因为会造成与本地旋转器的 UI 冲突。

    QuickNavExamples

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

    Methods

    Extension Points

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

    Events

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

    实例

    普通的数字选择器。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>旋转器部件(Spinner Widget)演示</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    </head>
    <body>
     
    <input id="spinner">
     
    <script>
    $( "#spinner" ).spinner();
    </script>
     
    </body>
    </html>

    查看演示

  • 相关阅读:
    v4l2程序实例
    uboot的readme导读
    基于Linux的v4l2视频架构驱动编写
    V4L2
    Uboot优美代码赏析1:目录结构和malkefile分析
    查找 mysql 配置文件 my.cnf
    thinkphp中array_diff运行无效 Invalid opcode 153/1/8
    thinkphp后端开发ajax接口开发测试
    Thinkphp getLastSql函数用法
    web日志分析的重要性
  • 原文地址:https://www.cnblogs.com/springsnow/p/12503529.html
Copyright © 2011-2022 走看看