嗞嗞嗞~ 你的浏览器仿佛在对我微笑!

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-unitdata-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 - -