首页
核心
实例
资源
关于
v1.0

Amount 计步器

简介

在购物商城中可常见到对商品数量+1和-1操作，我们将之定义为amount。

原生步进

原生的步进input是type=number类型，追加ax-input之后可获得良好的视觉效果。但是其前进和后退按钮受限于浏览器内置样式而无法修改，故建议使用axAmount插件代替原生步进。

数量：
                                <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">
                                <input name="username" value="2" type="number" class="ax-input">
                                </div>
                                </div>
                                </div>
                                </div>

使用方法

插件运行方式有三种：

  • ax*属性：对ax-amount标签使用axAmount属性即可按默认参数运行插件。
  • ax*属性：对input标签使用axAmount属性即可按默认参数运行插件。
  • js实例：通过new axAmount('#ID')方式创建实例运行。

整体用ax-amount样式包裹，默认宽度是150px，减少按钮用decrease属性表示，增加按钮用increase属性表示。基本格式如下：

注意要将input放在增加和减少按钮的前方！

                                <div class="ax-amount" axAmount>
                                <input name="username" 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使用amount：
input使用amount：
js创建amount：
HTML JS 
  •                                         <div class="ax-form-group">
                                            <div class="ax-flex-row">
                                                <div class="ax-form-label">div使用amount：</div>
                                                <div class="ax-form-con">
                                                    <div class="ax-form-input">
                                                        <div class="ax-amount" axAmount>
                                                            <input name="username" 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"></div>
    
                                        <div class="ax-form-group">
                                            <div class="ax-flex-row">
                                                <div class="ax-form-label">input使用amount：</div>
                                                <div class="ax-form-con">
                                                    <div class="ax-form-input">
                                                        <input name="username" axAmount type="text">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
    
                                        <div class="ax-break"></div>
    
                                        <div class="ax-form-group">
                                            <div class="ax-flex-row">
                                                <div class="ax-form-label">js创建amount：</div>
                                                <div class="ax-form-con">
                                                    <div class="ax-form-input">
                                                        <div class="ax-amount" id="js">
                                                            <input name="username" 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>
    
                                        
  •                                             new axAmount('#js');

初始化

初始化有两种方式，一是直接通过options.value设置值；二是给input添加value参数并赋值

需要注意的是，如果设置了min值并且初始值小于参数min值，那么初始值将等于min；如果设置了max值并且初始值大于max值，那么初始值将等于max。

value参数赋值：
input的value：
                            <div class="ax-form-group">
                                <div class="ax-flex-row">
                                    <div class="ax-form-label">value参数赋值：</div>
                                    <div class="ax-form-con">
                                        <div class="ax-form-input">
                                            <input axAmount="value:2" type="text">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="ax-break"></div>

                            <div class="ax-form-group">
                                <div class="ax-flex-row">
                                    <div class="ax-form-label">input的value：</div>
                                    <div class="ax-form-con">
                                        <div class="ax-form-input">
                                            <input axAmount value="2" type="text">
                                        </div>
                                    </div>
                                </div>
                            </div>

完全禁用

有两种方式使用完全禁用功能：

  • 1、对axAmount元素使用disabled:true属性表示完全禁止。
  • 2、在new实例时，使用disabled参数。
完全禁止：
new禁用：
                                    <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" 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>

                                    <div class="ax-break"></div>

                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">new禁用：</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <input axAmount="disabled:true,value:2" type="text">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

禁用增加或减少

有两种方式使用禁止增加或减少功能：

  • 1、对axAmount元素使用increase:false或decrease:false表示单向禁止。
  • 2、在new实例时，使用increase和decrease参数。
数量：
new禁用：
                                    <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" 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>

                                    <div class="ax-break"></div>

                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">new禁用：</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <input axAmount="decrease:false,value:2" type="text">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

自定义宽度

自定义宽度有两种方法，一是直接对ax-amount元素写上style样式；二是对参数width设置具体长度值，比如width:'100%'。

400px：
100%：
单位(个)
new100%：
                            <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" 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" 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>

                            <div class="ax-break-md"></div>

                            <div class="ax-form-group">
                                <div class="ax-flex-row">
                                    <div class="ax-form-label">new100%：</div>
                                    <div class="ax-form-con">
                                        <div class="ax-form-input">
                                            <input axAmount='value:"2",width:"100%"' type="text">
                                        </div>
                                    </div>
                                </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" 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" 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" 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" 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" 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" 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" 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" 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='min:2,max:12,step:2'>
                                <input name="username" 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 = ''，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='rule:"currency"'>
                                <input name="username" 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='rule:"quantity"'>
                                <input name="username" 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='rule:"month"'>
                                <input name="username" 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='cookie:"cookie001"'>
                                <input name="username" 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>

更新参数

通过使用update方法更新插件参数。该方法有两个参数：

  • setting：将要更新的参数，格式：{name:value}
  • callback：回调函数，可不填

举例说明：更新min=0，max=20，step=2。更新

数量：
HTML JS 
  •                                             <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" 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('更新了！');
                                            });
                                            }

设置值

通过使用set方法可重新设置值。该方法有两个参数：

  • value：将要设置的值，整数或浮点值
  • callback：回调函数，支持一个参数，即当前值

举例说明：更新value=8。设置新值

数量：
如果设置了min和max值，如果将要设置value值小于min或大于max将对value进行修正。小于min，则value=min；大于max，则value=max。
HTML JS 
  •                                     <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">
                                                    <input name="username" id="set" value="2" type="text">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                        
  •                                             let btnSet = document.querySelector('#btnSet'),
                                                instanceSet = new axAmount('#set');
                                            btnSet.onclick = function () {
                                                instanceSet.set(8, function (value) {
                                                    alert('更新了新值：'+value);
                                                });
                                            }

重置值

如果设置了初始值，通过频繁操作之后，input中的值将不同于初始值，可通过使用reset方法将值恢复为初始值。该方法有一个参数：

  • callback：回调函数，支持一个参数，即初始值

举例说明：恢复初始值

数量：
HTML JS 
  •                                     <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">
                                                    <input name="username" id="set" value="2" type="text">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                        
  •                                             let btnSet = document.querySelector('#btnSet'),
                                                instanceSet = new axAmount('#set');
                                            btnSet.onclick = function () {
                                                instanceSet.set(8, function () {
                                                    alert('更新了新值！');
                                                });
                                            }

内置变量

实例运行中会产生若干内置变量，说明如下：

  • this.value 实例当前值，默认为0
  • this.rawValue 初始值（初次加载），来自this.value
  • this.activeIn 递增按钮当前状态，默认true
  • this.activeDe 递减按钮当前状态，默认true
  • this.field 文本域节点
  • this.increase 递增按钮节点
  • this.decrease 递减按钮节点
  • this.parent 包裹按钮和文本域的父节点

监听事件

本插件有若干监听方法，以on为关键字，实例后监听和在参数中监听效果相同。基本写法是：instance.on('event',function(){})；具体事件说明如下：

  • onInit 初始化后执行
  • onChanged/changed 点击后值改变执行，支持参数oldVal和newVal
  • onMined/mined 点击后达到最小值执行
  • onMaxed/maxed 点击后达到最大值执行
  • onUpdated/updated 更新参数后执行

请用F12打开浏览器控制台查看监听结果。

数量：
HTML JS 
  •                                             <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" 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,
                                                onInit: () => {
                                                    console.log('初始化完成！');
                                                }
                                            });
                                            instanceOn.on('changed', function (oldVal, newVal) {
                                                console.log('已经更新了，从' + oldVal + '变成了' + newVal);
                                            }).on('mined', function () {
                                                console.log('已经到了最小值！');
                                            }).on('maxed', function () {
                                                console.log('已经到了最大值！');
                                            });

参数选项

document.addEventListener("DOMContentLoaded", function() {
      var demo1 = new axAmount('#id',{
        placeholder: '输入数量',//没有初始值时候input的提示文字
        value: '',//设置默认值，数值类型，默认为空，如果为空则自动使用input的值
        min: '',//设置最小值，数值类型，默认为空（可无限小）
        max: '',//设置最大值，数值类型，默认为空（可无限大）
        step: 1,//步进，数值类型，默认是1
        precision: 0,//设置小数点精确位数，数值类型，默认是整数，可填1或2
        rule: '',//步进格则，默认为空。可填：currency|quantity|percent|month|day|hour|minute|second
        disabled: false,//设置是否禁止使用，默认为false不禁用，可选择true禁用
        increase: true,//设置是否启用增加，默认true启用，可选择false禁用
        decrease: true,//设置是否启用减少，默认true启用，可选择false禁用
        cookie: '',//设置保存cookie，默认为空不保存；如果需要刷新页面保持原数值，请填写当页唯一的cookie名称
        onInit:'',//回调函数，初始化后执行，无参数
        onMined:'',//回调函数，超过最小值后执行，无参数
        onMaxed:'',//回调函数，超过最大值执行，无参数
        onUpdated:'',//回调函数，更新参数后执行，无参数
        onChanged:'',//回调函数，值发生变化后执行，支持两个参数即旧值和新值
      });
});
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"