InputNumber 计数器

使用方法

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

                        <div class="ax-increase">
                            <input name="username" placeholder="数量" value="2" type="text">
                            <a href="###" class="ax-minus"><i class="ax-iconfont ax-icon-minus"></i></a>
                            <a href="###" class="ax-plus"><i class="ax-iconfont ax-icon-plus"></i></a>
                        </div>

数量：

禁止录入

对input使用readonly=""属性即可。

数量：

禁止增加或减少

对ax-minus或ax-plus使用ax-color-forbid样式即可。

数量：

自定义宽度

对ax-increase写上style样式即可。

400px：

100%：

单位(个)

其他布局

默认是左右布局，通过使用ax-array-left和ax-array-right来重新排版。ax-increase ax-array-left表示按钮在左侧；ax-increase ax-array-right表示按钮在右侧。当然按钮的图标是可根据需要替换的。

按钮风格：

居右：

居左：

input-spinner 插件 PLUGIN

input-spinner插件在Github上很受欢迎，本框架使用的是v1.0.0。通过data-*属性的方式来激活插件，不改动html结构，非常好用，详细用法见Github主页

数量：

禁止：

<script src="https://src.axui.cn/v1.0/src/plugins/input-spinner/input-spinner.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function () {
    $('[data-trigger="spinner"]').spinner('changing', function(event, newVal, oldVal) {
            $(event.currentTarget).closest('.ax-form-group').find('.ax-form-txt').text('原来 = ' + oldVal + ', 现在 = ' + newVal);
        });
    });
</script>

                                <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"  data-trigger="spinner"><div class="ax-increase"><input name="username" placeholder="数量" value="1" type="text"><a href="###" class="ax-minus" data-spin="down"><i class="ax-iconfont ax-icon-minus"></i></a><a href="###" class="ax-plus" data-spin="up"><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"></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"  data-trigger="spinner"><div class="ax-increase ax-array-right"><input name="username" placeholder="数量" value="1" type="text"><a href="###" class="ax-minus" data-spin="down"><i class="ax-iconfont ax-icon-down"></i></a><a href="###" class="ax-plus" data-spin="up"><i class="ax-iconfont ax-icon-up"></i></a></div></div>
                                        </div>
                                        <span class="ax-form-txt ax-color-ignore"></span>
                                    </div>
                                </div>

                                <div class="ax-break"></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"  data-trigger="spinner"><div class="ax-increase"><input name="username" placeholder="数量" value="1" type="text" disabled><a href="###" class="ax-minus" data-spin="down"><i class="ax-iconfont ax-icon-minus"></i></a><a href="###" class="ax-plus" data-spin="up"><i class="ax-iconfont ax-icon-plus"></i></a></div></div>
                                        </div>
                                        <span class="ax-form-txt ax-color-ignore"></span>
                                    </div>
                                </div>

该插件不适用于IE6~11。

不同尺寸

本框架计数器支持四种尺寸，分别是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-increase ax-xs"><input name="username" placeholder="数量" value="1" type="text"><a href="###" class="ax-minus"><i class="ax-iconfont ax-icon-left"></i></a><a href="###" class="ax-plus" ><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-increase ax-sm"><input name="username" placeholder="数量" value="1" type="text"><a href="###" class="ax-minus"><i class="ax-iconfont ax-icon-left"></i></a><a href="###" class="ax-plus" ><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-increase"><input name="username" placeholder="数量" value="1" type="text"><a href="###" class="ax-minus"><i class="ax-iconfont ax-icon-left"></i></a><a href="###" class="ax-plus" ><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-increase ax-lg"><input name="username" placeholder="数量" value="1" type="text"><a href="###" class="ax-minus"><i class="ax-iconfont ax-icon-left"></i></a><a href="###" class="ax-plus" ><i class="ax-iconfont ax-icon-right"></i></a></div></div>
                                        </div>
                                    </div>
                                </div>