jquery数字加减输入框特效插件

jquery数字加减输入框特效插件

这是一款jquery数字加减输入框插件。该插件兼容bootstrap框架,可以将普通的input转换为类似商城购物车中的数量加减器效果。

使用方法
在页面中引入jquery和jquery.input-counter.min.js文件。

1
2
<script src="js/jquery.min.js"></script>
<script src="js/jquery.input-counter.min.js"></script>

HTML结构
该jquery数字加减输入框的基本HTML结构如下。

1
2
3
4
5
6
7
8
9
10
<div class="example">
  <button type="button" class="btn-add">
    +
  </button>
  <input type="text" class="input-counter">
  <button type="button" class="btn-subtract">
    -
  </button>
  </div>
</div>

通过data属性可以设置数字的默认值,最大值和最小值。

1
2
3
4
5
6
<input type="text"
       class="input-counter"
       data-min="10"
       data-max="100"
       data-default="20"
>

初始化插件
在页面DOM元素加完毕之后,通过下面的方法来初始化该插件。

1
$(".example").inputCounter();

你也可以在指定的CSS选择器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(".example").inputCounter({
  selectors: {
    addButtonSelector: '.btn-add',
    subtractButtonSelector: '.btn-subtract',
    inputSelector: '.input-counter',
  }
});
配置参数
$(".example").inputCounter({
  settings: {
 
    // check the valus is within the min and max values
    checkValue: true,
 
    // is read only?
    isReadOnly: true
     
  }
});

checkValue:是否检查数字在指定范围内。

isReadOnly:是否只读。

文件信息:

    2

    发表评论