Numeric input box with plus and minus buttons under layUI framework

Layui front -end framework is a more popular framework now. Many of the built -in modules are convenient and fast to use, but a few modules with fewer application scenarios are not built in it. The digital input box with the addition and subtraction button is suitable for shopping or Other scenarios that require the use of numbers.

The UI style of this extension module is completely based on layUI. It can be used alone or extended to the extension module of the layUI framework.

: After opening Layui's document, the beginning part wrote a supporting expansion custom module, and other modules built -in can also be used. In this way, there is no need to write this extension from scratch. Add two buttons to the original input box code, then bind click events to the two buttons, and then determine whether the value after each click meets the conditions, so that the addition and subtraction input boxes are complete.

The original method of use is to use the element ID and then instantiate the parameters. However, considering that a page may have multiple input boxes, it would be troublesome to write the instantiation code for each one, so the binding The process is built into the method. After instantiation, all input boxes on a page that require the use of plus and minus buttons will be rendered.

                                                                                                                                

            1.CSS part:

Put these lines of css code into the public style file

.plus-minus .layui-input-block{position: relative;}
.plus-minus input{position: absolute;top: 0px;left: 0px;text-align: center;}
.plus-minus button:nth-of-type(1){position: absolute;top: 0px;left: 0px;height: 100%;}
.plus-minus button:last-child{position: absolute;top: 0px;right: 0px;height: 100%;}

                2.HTML part  ： Directly wrap a layer of div in the form input box code block of layUI, and the class name is defined as "plus-minus"
                                                                                                                                                                                                                                                          but    

——The value that increases or decreases after clicking, the default is 1

    ##                                                                                                                                                                                        into a js file.

<div class="plus-minus">
    <div class="layui-form-item">
        <label class="layui-form-label">数量</label>
        <div class="layui-input-block">
            <input type="number" name="num" data-step="1" data-maxvalue="20" data-minvalue="1" lay-verify="required" autocomplete="off" class="layui-input num">
        </div>
    </div>
</div>

4.js instantiated use

#

layui.define(['layer'], function(exports){
    var $ = layui.$
    var obj = {
        //数字加减函数（基本参数对象，最大值返回函数，最小值返回函数）
        plusminus : function (){
            $(".plus-minus").each(function(){
                //定义按钮HTML
                var plusminusbutton = &#39;<button type="button" class="layui-btn layui-btn-sm layui-btn-normal vk-minus"><i class="fa fa-minus"></i></button>&#39;
                                    +&#39;<button type="button" class="layui-btn layui-btn-sm layui-btn-normal vk-plus"><i class="fa fa-plus"></i></button>&#39;;
                var data = new Object;
                data.step = $(this).find(&#39;input&#39;).data(&#39;step&#39;);
                data.maxvalue = $(this).find(&#39;input&#39;).data(&#39;maxvalue&#39;);
                data.minvalue = $(this).find(&#39;input&#39;).data(&#39;minvalue&#39;);
				
                //定义默认参数，合并参数
                options = $.extend({
                    step: 1, //每次点击加减的值
                    maxvalue: false, //最大值，默认false，不限制
                    minvalue: false, //最小值，默认false，不限制
                },data);
		
                var elem = $(this).find(&#39;input&#39;),
                step = parseInt(options.step),
                maxvalue = options.maxvalue,
                minvalue = options.minvalue;
                //参数不规范则返回
                if(elem == null || elem == undefined){return};
                if(step == 0 || step == undefined){return};
                //加入按钮HTML
                $(elem).after(plusminusbutton);
				
                //点击增加
                $(elem).parent().on("click", ".vk-plus", function(){
                    var nowinput = $(this).siblings("input"), //当前输入框元素
                    nowbutton = $(this).siblings("button"), //当前按钮元素
                    oldval = $(nowinput).val(), //点击前的值
                    newval = parseInt(oldval) + step; //点击后的值
					
                    if(newval < maxvalue && newval > minvalue)
                    {
                        $(nowbutton).removeClass("layui-btn-disabled");
                    }
                    //判断条件。是否最大值
                    if(maxvalue == false)
                    {
                        $(nowinput).val(parseInt(oldval)+step);
                    }
                    if(maxvalue != 0 && newval < maxvalue)
                    {
                        $(nowinput).val(parseInt(oldval)+step);
                    }
                    if(maxvalue != 0 && newval >= maxvalue)
                    {
                        $(nowinput).val(maxvalue);
                        $(this).addClass("layui-btn-disabled");
                    }
                    //模拟change事件
                    $(nowinput).trigger(&#39;change&#39;);

                    return;
                });
                //点击减少（同上）
                $(elem).parent().on("click", ".vk-minus", function(){
                    var nowinput = $(this).siblings("input"),
                    nowbutton = $(this).siblings("button"), //当前按钮元素
                    oldval = $(elem).val(),
                    newval = parseInt(oldval) - step;
					
                    if(newval < maxvalue && newval > minvalue)
                    {
                        $(nowbutton).removeClass("layui-btn-disabled");
                    }
                    if(minvalue == false)
                    {
                        $(nowinput).val(parseInt(oldval)-step);
                    }
                    if(minvalue != 0 && newval > minvalue)
                    {
                        $(nowinput).val(parseInt(oldval)-step);
                    }
                    if(minvalue != 0 && newval <= minvalue)
                    {
                        $(nowinput).val(minvalue);
                        $(this).addClass("layui-btn-disabled");
                    }
                    //模拟change事件
                    $(nowinput).trigger(&#39;change&#39;);
                    
                    return;
                });
            });
        }
    };
    exports(&#39;common&#39;,obj);
});

At this point, the digital addition and subtraction module has been completed. If you want to bind dynamically added elements, you only need to use this method again after adding them, that is, common.plusminus().

Summary: layUI has developed very well over the years. Once you are familiar with each module, you can quickly develop front-end pages without writing a lot of js code. For non-front-end professional developers, you can design relatively Friendly page.

Whether it is front-end or back-end, you will encounter many problems during the development process. The specific solutions are not very important, but the ideas for solving problems must be cultivated.

I hope this article can help more friends.

The above is the detailed content of Numeric input box with plus and minus buttons under layUI framework. For more information, please follow other related articles on the PHP Chinese website!