YDUI Touch Docs 返回首页

Spinner

1、说明

1.1、示例：http://m.ydui.org/html/spinner.html

1.2、常见数字加减插件，支持长按快速加减；借鉴 Bootstrap 先进思想，支持Data API 和 Javascript API方式调用；

2、调用

调用方式一（Javascript API）

给文本框添加 data-unit 和 data-max 属性优先级高于其他地方设置的参数。

<span class="m-spinner" id="J_Quantity">
    <a href="javascript:;" class="J_Del"></a>
    <input type="text" class="J_Input" value="1" placeholder=""/>
    <a href="javascript:;" class="J_Add"></a>
</span>

<script>
    $('#J_Quantity').spinner({
        input: '.J_Input',
        add: '.J_Add',
        minus: '.J_Del',
        unit: function () {
            return 1 + 2;
        },
        max: function () {
            return (1 + 2 + 3 + 4 + 5) * 5;
        },
        callback: function (value, $ele) {
            // $ele 当前文本框[jQuery对象]
            // $ele.css('background', '#FF5E53');
            console.log('值：' + value);
        }
    });
</script>
调用方式二（Data API）

在容器 .m-spinner 上添加 data-ydui-spinner 属性并添加参数即可。

<span class="m-spinner" data-ydui-spinner="{input: '.J_Input', add: '.J_Add', minus: '.J_Del'}"><!-- 添加data-ydui-spinner属性并添加参数即可 -->
    <a href="javascript:;" class="J_Del"></a>
    <input type="text" class="J_Input" placeholder=""/>
    <a href="javascript:;" class="J_Add"></a>
</span>

3、参数

参数说明类型可选值默认值
input 文本框元素 String - .J_Input
add “加”按钮元素 String - .J_Add
minus “减”按钮元素 String - .J_Del
unit 累计值 Number || Function - 1
max 最大值（设置为0则不限制） Number || Function - 0
longpress 是否支持长按快速加减 Boolean - true
callback 回调函数，返回当前值和当前文本框jQuery对象 Function - -