layui加减按钮控件
时间: 2023-09-03 18:10:00 浏览: 264
layui提供了一个基于jQuery的加减按钮控件,可以通过以下方式进行使用:
1. 引入layui和jQuery的库文件。
2. 在HTML页面中添加如下代码:
```html
<div class="layui-btn-group">
<button class="layui-btn layui-btn-primary layui-btn-disabled">-</button>
<input type="text" value="1" autocomplete="off" class="layui-input">
<button class="layui-btn layui-btn-primary">+</button>
</div>
```
3. 在JavaScript代码中,调用layui的form模块,使用如下代码:
```javascript
layui.use(['form'], function(){
var form = layui.form;
// 给加减按钮添加事件
$('.layui-btn-group button').on('click', function(){
var $input = $(this).siblings('input[type="text"]');
var val = parseInt($input.val());
if($(this).hasClass('layui-btn-disabled')) return;
if($(this).hasClass('layui-btn-primary')){
$input.val(val+1);
}else{
if(val > 1){
$input.val(val-1);
}else{
$(this).addClass('layui-btn-disabled');
}
}
form.render();
});
});
```
这样,就可以实现一个简单的加减按钮控件了。
阅读全文