bui.number - BUI
Show:

bui.number Class

Defined in: src/scripts/ui/bui.number.js:8
Module: UI

数字增减条

支持静态初始化,常用于购物车

预览地址: demo

方法说明:

prev: 执行减少操作
next: 执行增加操作
value: 不传参则获取,传参则设置
disabled: 禁止输入修改
option: 获取设置参数
widget: 获取依赖控件
控件预览

Constructor

bui.number

(
  • option
)

Defined in src/scripts/ui/bui.number.js:8

Parameters:

  • option Object
    • [parentId] String optional

      1.5.3新增, 默认".bui-page", 这样可以一次性初始化页面的所有number,只需初始化一次.

    • [id] String optional

      控件id, 不传则全部初始化,可以通过查找input的值设置.

    • [uid] String optional

      1.6.6新增，实例的自定义唯一名字，用于命令式调用

    • [min] Number optional

      最小值, 属性的 data-min 会优先

    • [max] Number optional

      最大值, 属性的 data-max 会优先, 默认:100

    • [step] Number optional

      一次增加多少

    • [decimal] Number optional

      1.6.6新增，小数点后几位，默认1，step:0.001 的时候，decimal改成3

    • [value] String optional

      初始值

    • [name] String optional

      某一组的名称

    • [type] String optional

      输入框的类型 text | number

    • [disabled] Boolean optional

      是否可以输入修改 false | true

    • [render] Boolean optional

      是否动态填充, true | false

    • [onInput] Function optional

      1.4.3新增 输入数值的时候的实时校验处理

    • [onChange] Function optional

      1.5新增 改变的时候触发,初始值的时候不触发

    • [onBeforeInit] Function optional

      1.5.1新增 初始化前触发

    • [onInited] Function optional

      1.5.1新增 初始化以后触发

    • [callback] Function optional

      点击按钮的回调

Example:

// 例子1: 动态渲染 html:

       <div id="number" class="bui-number"></div>

js:

       // 初始化
                                           var uiNumber = bui.number({
                                                           id:'#number'
                                               });
                                               //获取值
                                               uiNumber.value();

js:

       // 初始化小数点  1.6.4新增
                                           var uiNumber = bui.number({
                                                   id: "#number",
                                                   type: "number",
                                                   step: 0.1,
                                                   min: 0.0,
                                                   value: 0.1,
                                               })

// 例子2: 静态渲染, 把结构写在模板里一起渲染, 用于一组number的渲染. 这种情况在跟列表模板配合使用的时候,尤其有用, 只需初始化一次. html:

       <div id="number1" class="bui-number">
                                               <div class="bui-number-prev"><i class="icon-minus"></i></div>
                                               <input type="text" name="" value="1" max="" min="">
                                               <div class="bui-number-next"><i class="icon-plus"></i></div>
                                           </div>

js:

       // 初始化, 如果有多个页面有这个控件, id选择器可以通过当前页查找: id:".page-cart .bui-number"
                                           var uiNumber = bui.number({
                                                   render: false
                                               });
                                    
                                           // 取值 uiNumber.values();

Methods

destroy

(
  • [bool]
)

Defined in src/scripts/ui/bui.number.js:720

Available since 1.4.2

[销毁控件]

Parameters:

  • [bool] Boolean optional

    默认: false 销毁部分 | true 销毁全部

Example:

       //销毁
                                                       uiNumber.destroy();

disabled

(
  • [默认： true禁止｜false]
)
chainable

Defined in src/scripts/ui/bui.number.js:544

禁止输入

Parameters:

  • [默认： true禁止｜false] Boolean optional

Example:

       //获取值
                                                       uiNumber.disabled();

disableNext

() chainable

Defined in src/scripts/ui/bui.number.js:606

1.7.0 禁止递增

Example:

       uiNumber.disableNext();

disablePrev

() chainable

Defined in src/scripts/ui/bui.number.js:592

1.7.0 禁止递减

Example:

       uiNumber.disablePrev();

enable

() chainable

Defined in src/scripts/ui/bui.number.js:572

1.7.0 允许输入

Example:

       uiNumber.enable();

enableNext

() chainable

Defined in src/scripts/ui/bui.number.js:632

1.7.0 允许点击递增

Example:

       uiNumber.enableNext();

enablePrev

() chainable

Defined in src/scripts/ui/bui.number.js:619

1.7.0 允许点击递减

Example:

       uiNumber.enablePrev();

init

(
  • [option]
)
chainable

Defined in src/scripts/ui/bui.number.js:167

初始化方法,用于重新初始化结构,事件只初始化一次

Parameters:

  • [option] Object optional

    参数控件本身

next

() chainable

Defined in src/scripts/ui/bui.number.js:693

增加值

Example:

       //增加
                                                       uiNumber.next();

option

(
  • [key]
  • [value]
)
chainable

Defined in src/scripts/ui/bui.number.js:764

获取设置参数

Parameters:

  • [key] String | object optional

    不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数

  • [value] String | number | boolean | function optional

    设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传

Example:

       //获取所有参数
                                                        //获取所有参数
                                                       var option = uiNumber.option();
                                                
                                                       //获取某个参数
                                                       var id = uiNumber.option( "id" );
                                                
                                                       //修改一个参数
                                                       uiNumber.option( "min",10 );
                                                
                                                       //修改多个参数
                                                       uiNumber.option( {"min":10} );

prev

() chainable

Defined in src/scripts/ui/bui.number.js:666

减少值

Example:

       //减少
                                                       uiNumber.prev();

reset

() chainable

Defined in src/scripts/ui/bui.number.js:471

Available since 1.6.2

重置数据

Example:

       //重置
                                                       uiNumber.reset();

value

(
  • [num]
)
chainable

Defined in src/scripts/ui/bui.number.js:442

设置或者获取值

Parameters:

  • [num] String optional

    设置值

Example:

       //设置值
                                                       uiNumber.value("110");
                                                
                                                       //获取值
                                                       uiNumber.value();

values

(
  • [num] 设置值 [{id:"",value:""}]
)
Array chainable

Defined in src/scripts/ui/bui.number.js:490

获取设置多个值

Parameters:

  • [num] 设置值 [{id:"",value:""}] String optional

Returns:

Array:

[ 返回 [{id:"",value:""}] ]

Example:

       uiNumber.values();

widget

(
  • [name]
)

Defined in src/scripts/ui/bui.number.js:749

获取依赖的控件

Parameters:

  • [name] String optional

    依赖控件名

Example:

       //获取依赖控件
                                                       var uiNumberWidget = uiNumber.widget();

Events

off

Defined in src/scripts/ui/bui.number.js:811

Available since 1.3.0

为控件取消绑定事件

Event Payload:

  • [type] String optional

    事件类型: "prev" | "next" | "change" 符合条件时触发改变

  • [callback] Function optional

    绑定的事件, this 为当前点击的菜单

Example:

       uiNumber.off("change");

on

Defined in src/scripts/ui/bui.number.js:791

Available since 1.3.0

为控件绑定事件

Event Payload:

  • [type] String optional

    事件类型: "prev" | "next" | "change" 符合条件时触发改变

  • [callback] Function optional

    绑定的事件, this 为当前点击的菜单

Example:

       uiNumber.on("change",function () {
                                                           // 点击的菜单
                                                           console.log(this);
                                                       });