Numerisches Eingabefeld mit Plus- und Minus-Schaltflächen unter dem LayUI-Framework

Das LayUI-Frontend-Framework ist ein beliebteres Framework, aber einige Module mit weniger Anwendungsszenarien sind nicht darin integriert. Das digitale Eingabefeld mit der Additions- und Subtraktionsschaltfläche eignet sich für Einkäufe oder andere Szenarien, die die Verwendung von Zahlen erfordern.

Der UI-Stil dieses Erweiterungsmoduls basiert vollständig auflayUI. Es kann allein verwendet oder auf das Erweiterungsmodul deslayUI-Frameworks erweitert werden.

Idee: Nach dem Öffnen des LayUI-Dokuments steht am Anfang, dass es erweiterte benutzerdefinierte Module unterstützt und auch andere integrierte Module verwendet werden können. Auf diese Weise ist es nicht erforderlich, diese Erweiterung von Grund auf zu schreiben. Fügen Sie dem ursprünglichen Eingabefeldcode zwei Schaltflächen hinzu, binden Sie dann Klickereignisse an die beiden Schaltflächen und bestimmen Sie dann, ob der Wert nach jedem Klick die Bedingungen erfüllt, sodass die Additions- und Subtraktionseingabefelder vollständig sind.

Die ursprüngliche Verwendungsmethode besteht darin, die Element-ID zu verwenden und dann die Parameter zu instanziieren. Da eine Seite jedoch mehrere Eingabefelder haben kann, wäre es mühsam, den Instanziierungscode für jedes einzelne zu schreiben wird bind Der Prozess ist in die Methode integriert. Nach der Instanziierung werden alle Eingabefelder auf einer Seite gerendert, die die Verwendung von Plus- und Minus-Schaltflächen erfordern.

Rendering

Verwendung:

 1.CSS-Teil:

Fügen Sie diese Zeilen CSS-Code in die öffentliche Stildatei ein

.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 Teil

: Eine div-Ebene direkt in den Codeblock des Formulareingabefelds vonlayUI einschließen, und der Klassenname wird als „Plus-Minus“ definiert.

                         "

——Der Wert, der sich erhöht oder nimmt nach dem Klicken ab, der Standardwert ist 1
       

data-maxvalue

——Der Maximalwert, der Standardwert ist falsch, keine Begrenzung des Maximalwerts
                                                                                                                                                                                                              in eine JS-Datei.

<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-Instanziierung mit

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);
});

Zu diesem Zeitpunkt ist das digitale Additions- und Subtraktionsmodul abgeschlossen. Wenn Sie dynamisch hinzugefügte Elemente binden möchten, müssen Sie diese Methode erst nach dem Hinzufügen erneut verwenden, nämlich common.plusminus ().

Zusammenfassung: LayUI hat sich im Laufe der Jahre sehr gut entwickelt. Sobald Sie mit jedem Modul vertraut sind, können Sie schnell Frontend-Seiten entwickeln, ohne viel JS-Code schreiben zu müssen. Sie können eine relativ freundliche Seite gestalten.

Unabhängig davon, ob es sich um Front-End oder Back-End handelt, werden Sie während des Entwicklungsprozesses auf viele Probleme stoßen. Die spezifischen Lösungen sind nicht sehr wichtig, aber die Ideen zur Lösung von Problemen müssen gepflegt werden.

Ich hoffe, dieser Artikel kann mehr Freunden helfen.

Das obige ist der detaillierte Inhalt vonNumerisches Eingabefeld mit Plus- und Minus-Schaltflächen unter dem LayUI-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!