Amount 计步器
简介
在购物商城中可常见到对商品数量+1和-1操作，我们将之定义为amount。
使用方法
插件运行方式有两种：
- ax*属性：对ax-amount标签使用
axAmount属性即可按默认参数运行插件。 - js实例：通过
new axAmount('#ID')方式创建实例运行。
整体用ax-amount样式包裹，默认宽度是150px，减少按钮用decrease属性表示，增加按钮用increase属性表示。基本格式如下：
注意要将input放在增加和减少按钮的前方！
<div class="ax-amount" axAmount>
<input name="username" placeholder="数量" value="2" type="text">
<a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a>
<a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
</div>
完全禁用
有两种方式使用完全禁用功能：
- 1、对axAmount元素使用data-disabled="true"属性表示完全禁止。
- 2、在new实例时，使用disabled参数。
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">完全禁止：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-amount" axAmount>
<input name="username" placeholder="数量" value="2" type="text" disabled>
<a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a>
<a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
</div>
</div>
</div>
</div>
</div>
禁用增加或减少
有两种方式使用禁止增加或减少功能：
- 1、对axAmount元素使用data-increase="false"或data-decrease="false"表示单向禁止。
- 2、在new实例时，使用increase和decrease参数。
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">数量：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-amount" axAmount>
<input name="username" placeholder="数量" value="2" type="text">
<a href="###" decrease disabled><i class="ax-iconfont ax-icon-minus"></i></a>
<a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
</div>
</div>
</div>
</div>
</div>
自定义宽度
对ax-amount元素写上style样式即可。
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">400px：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-amount" axAmount style="width: 400px;">
<input name="username" placeholder="数量" value="2" type="text">
<a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a>
<a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">100%：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-amount" axAmount style="width: 100%;">
<input name="username" placeholder="数量" value="2" type="text">
<a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a>
<a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
</div>
</div>
</div>
<span class="ax-form-txt ax-color-ignore">单位(个)</span>
</div>
</div>
其他布局
默认是左右布局，通过使用ax-array-left和ax-array-right来重新排版。ax-amount ax-array-left表示按钮在左侧；ax-amount ax-array-right表示按钮在右侧。当然按钮的图标是可根据需要替换的。
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">按钮风格：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-amount" axAmount>
<input name="username" placeholder="数量" value="1" type="text">
<a href="###" decrease><i class="ax-iconfont ax-icon-left"></i></a>
<a href="###" increase><i class="ax-iconfont ax-icon-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">居右：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-amount ax-array-right" axAmount>
<input name="username" placeholder="数量" value="1" type="text">
<a href="###" decrease><i class="ax-iconfont ax-icon-down"></i></a>
<a href="###" increase><i class="ax-iconfont ax-icon-up"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">居右：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-amount ax-array-right" axAmount>
<input name="username" placeholder="数量" value="1" type="text">
<a href="###" decrease><i class="ax-iconfont ax-icon-triangle-down-f"></i></a>
<a href="###" increase><i class="ax-iconfont ax-icon-triangle-up-f"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">居左：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-amount ax-array-left" axAmount>
<input name="username" placeholder="数量" value="1" type="text">
<a href="###" decrease><i class="ax-iconfont ax-icon-down"></i></a>
<a href="###" increase><i class="ax-iconfont ax-icon-up"></i></a>
</div>
</div>
</div>
</div>
</div>
不同尺寸
本框架计步器支持四种尺寸，分别是ax-xs(高22px)、ax-sm(高28px)、ax-md(高38px默认)和ax-lg(高48px)。
<div class="ax-form-group ax-xs">
<div class="ax-flex-row">
<div class="ax-form-label">特小尺寸：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-amount ax-xs" axAmount>
<input name="username" placeholder="数量" value="1" type="text">
<a href="###" decrease><i class="ax-iconfont ax-icon-left"></i></a>
<a href="###" increase><i class="ax-iconfont ax-icon-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group ax-sm">
<div class="ax-flex-row">
<div class="ax-form-label">小型尺寸：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-amount ax-sm" axAmount>
<input name="username" placeholder="数量" value="1" type="text">
<a href="###" decrease><i class="ax-iconfont ax-icon-left"></i></a>
<a href="###" increase><i class="ax-iconfont ax-icon-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">中型尺寸：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-amount" axAmount>
<input name="username" placeholder="数量" value="1" type="text">
<a href="###" decrease><i class="ax-iconfont ax-icon-left"></i></a>
<a href="###" increase><i class="ax-iconfont ax-icon-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group ax-lg">
<div class="ax-flex-row">
<div class="ax-form-label">大型尺寸：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-amount ax-lg" axAmount>
<input name="username" placeholder="数量" value="1" type="text">
<a href="###" decrease><i class="ax-iconfont ax-icon-left"></i></a>
<a href="###" increase><i class="ax-iconfont ax-icon-right"></i></a>
</div>
</div>
</div>
</div>
</div>
限制范围
插件常用的参数是min、max和step，即允许的最大值，允许的最小值和步进值，默认没有最大值和最小值，默认步进值是1。可根据情况需要设定不通的参数。
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">数量：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-amount" axAmount data-min="2" data-max="12" data-step="2">
<input name="username" placeholder="数量" value="4" type="text">
<a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a>
<a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
</div>
</div>
</div>
</div>
</div>
默认格式
可通过rule参数设定默认规则，也就是设置默认的最小值、最大值、步进和小数位数。本插件内置了几个规则：
- 货币currency：min = 0.00，max = null，step = 0.01，precision = 2
- 品质quantity：min = 1，.max = 999，step = 1，precision = 0
- 百分比percent：min = 0，.max = 100，step = 1，precision = 0
- 月份month：min = 1，.max = 14，step = 1，precision = 0
- 日期day：min = 1，.max = 31，step = 1，precision = 0
- 小时hour：min = 0，.max = 24，step = 1，precision = 0
- 分钟minute：min = 0，.max = 59，step = 1，precision = 0
- 秒数second：min = 0，.max = 59，step = 1，precision = 0
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">货币：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-amount" axAmount data-rule="currency">
<input name="username" placeholder="数量" value="4" type="text">
<a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a>
<a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">品质：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-amount" axAmount data-rule="quantity">
<input name="username" placeholder="数量" value="4" type="text">
<a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a>
<a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">月份：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-amount" axAmount data-rule="month">
<input name="username" placeholder="数量" value="4" type="text">
<a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a>
<a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
</div>
</div>
</div>
</div>
</div>
使用cookie
设定cookie参数为当页唯一的值即可使用cookie，使用cookie后刷新页面值保持不变。
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">数量：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-amount" axAmount data-cookie="cookie001">
<input name="username" placeholder="数量" value="2" type="text">
<a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a>
<a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a>
</div>
</div>
</div>
</div>
</div>
摧毁实例
通过使用destroy方法更新摧毁实例，有回调函数但无参数。摧毁
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">数量：</div> <div class="ax-form-con"> <div class="ax-form-input"> <div class="ax-amount" id="destroy"> <input name="username" placeholder="数量" value="2" type="text"> <a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a> <a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a> </div> </div> </div> </div> </div> -
let btnDestroy = document.querySelector('#btnDestroy'); let instanceDestroy = new axAmount('#destroy'); btnDestroy.onclick = function () { instanceDestroy.destroy(function () { alert('摧毁了！'); }); }
更新参数
通过使用update方法更新插件参数。该方法有两个参数：
- setting：将要更新的参数，格式：{name:value}
- callback：回调函数，可不填
举例说明：更新min=0，max=20，step=2。更新
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">数量：</div> <div class="ax-form-con"> <div class="ax-form-input"> <div class="ax-amount" id="update"> <input name="username" placeholder="数量" value="2" type="text"> <a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a> <a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a> </div> </div> </div> </div> </div> -
let btnUpdate = document.querySelector('#btnUpdate'); let instanceUpdate = new axAmount('#update'); btnUpdate.onclick = function () { instanceUpdate.update({ min: 0, max: 20, step: 2, }, function () { alert('更新了！'); }); }
监听事件
借鉴jQuery的写法，本插件有若干监听方法，基本写法是：instance.on('event',function(){})；具体事件说明如下：
changed点击后值改变执行，支持参数oldVal和newValmined点击后达到最小值执行maxed点击后达到最大值执行
请用F12打开浏览器控制台查看监听结果。
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">数量：</div> <div class="ax-form-con"> <div class="ax-form-input"> <div class="ax-amount" id="on"> <input name="username" placeholder="数量" value="2" type="text"> <a href="###" decrease><i class="ax-iconfont ax-icon-minus"></i></a> <a href="###" increase><i class="ax-iconfont ax-icon-plus"></i></a> </div> </div> </div> </div> </div> -
let instanceOn = new axAmount('#on',{ min:0, max:10, }); instanceOn.on('changed',function(oldVal,newVal){ console.log('已经更新了，从'+oldVal+'变成了'+newVal); }).on('mined',function(){ console.log('已经到了最小值'); }).on('maxed',function(){ console.log('已经到了最大值'); });
参数选项
| 名称 | 说明 | 类型 | 默认值 | data属性 |
|---|---|---|---|---|
| value | 设置默认值，默认为空，如果为空则自动使用input的值 | number | '' | 支持 |
| min | 设置最小值，默认为空（可无限小） | number | '' | 支持 |
| max | 设置最大值，默认为空（可无限大） | number | '' | 支持 |
| step | 步进 | number | 1 | 支持 |
| precision | 设置小数点精确位数 | number | 0 | 支持 |
| rule | 步进格则，可填：currency|quantity|percent|month|day|hour|minute|second | string | '' | 支持 |
| disabled | 设置是否禁止使用 | boolean | false | 支持 |
| increase | 设置是否使用增加 | boolean | true | 支持 |
| decrease | 设置是否使用减少 | boolean | true | 支持 |
| cookie | 是否开启cookie，如果需要刷新页面保持原数值，请填写当页唯一的cookie名称 | string | '' | 支持 |
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new axAmount({
value: '',
min: '',
max: '',
step: 1,
precision: 0,
rule: '',
disabled: false,
increase: true,
decrease: true,
cookie: '',
});
});
1、如果同时设置了index和cookie，那么会自动取消cookie设定。
2、本插件支持data-*属性方式使用参数。如果在插件元素上通过data-*属性方式使用参数，参数层级使用短横区分，比如要设置student：{name:'',school:''}中的name参数，那么在插件元素的data属性中应该这样书写：data-student-name="Lily"。
操作方法
| 名称 | 说明 | 参数说明 | 回调函数 |
|---|---|---|---|
| init() | 初始化 | 无参数 | 无回调函数 |
| update(setting, callback) | 更新所有参数 | setting是用户自定义参数，是一个对象；callback是回调函数，可不填 | function(){} 无参数 |
| destroy(callback) | 销毁实例 | callback是回调函数，可不填 | function(){} 无参数 |
| on(type, handler) | 添加监听事件 | type是监听事件，事件类型可看前文的：监听方法；handler是回调函数 | function(oldVal,newVal){} oldVal：改变之前的值，可不填；newVal：改变之后的值，可不填 |
| off(type, handler) | 取消监听事件 | type是监听事件，事件类型可看前文的：监听方法；handler是回调函数 | function(){} 无参数 |
| axInstance(axAmounts, name) | 获取实例并重新设定参数 | axAmounts是当页创建的所有实例；name是指插件元素axAmount属性的name值 | 无回调函数 |
在回调函数中this均指向实例本身，所以在回调函数中可默认使用如下变量：
- this：实例本身
- this.targetDom：实例的Dom
- this.options：实例的参数