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-minusax-plus使用ax-color-forbid样式即可。

数量:

自定义宽度

ax-increase写上style样式即可。

400px:
100%:
单位(个)

其他布局

默认是左右布局,通过使用ax-array-leftax-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/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>