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.targetDom:实例的Dom
- this.options:实例的参数