jquery数字加减输入框插件

当前位置:主页 > jQuery库 > 表单 > jquery数字加减输入框插件
jquery数字加减输入框插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-08-21
    阅读:
简要教程

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

使用方法

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

<script src="js/jquery.min.js"></script>
<script src="js/jquery.input-counter.min.js"></script>                    
                
HTML结构

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

<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属性可以设置数字的默认值,最大值和最小值。

<input type="text" 
       class="input-counter" 
       data-min="10" 
       data-max="100" 
       data-default="20"
>
                
初始化插件

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

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

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

$(".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:是否只读。

该jquery数字加减输入框插件的github地址为:https://github.com/lk-code/jquery-input-counter