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

YDUI Touch Docs 返回首页

Spinner

1、说明

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

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

2、参数

2.1、包含7个参数:

<script>
$('#content').spinner({
input: '.J_Input', /* 文本框元素 */
add: '.J_Add', /* “加”按钮元素 */
minus: '.J_Del', /* “减”按钮元素 */
unit: 1, /* 累计值(也是最小值),取值:Number 或 Function */
max: 0, /* 最大值,取值:Number 或 Function,设置为0则不限制 */
longpress: true, /* 是否支持长按快速加减,默认true */
callback: null /* 回调函数,返回当前值和当前文本框jQuery对象 */
});
</script>

3、调用方式一(Javascript API)

3.1、每个js组件都是独立的jQuery插件,调用方式跟普通插件一样;

<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 src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="path/build/js/ydui.js"></script>
<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>

3.2、关于累计值unit和最大值max的赋值

3.2.1、给文本框添加data-unitdata-max属性优先级高于其他地方设置的参数,例如:

<span class="m-spinner" id="J_Quantity">
<a href="javascript:;" class="J_Del"></a>
<input type="text" class="J_Input" data-max="12" data-unit="3" 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: 5, /* 累计值将是data-unit的值:3 */
max: 200 /* 最大值将是data-max的值:12 */
});
</script>

4、调用方式二(Data API)

4.1、在容器.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>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="path/build/js/ydui.js"></script>

5、参与讨论

5.1、有任何使用问题,请在评论中留言,也欢迎大家发表意见、建议。感谢您对YDUI的支持。