layUI フレームワークの下にプラスとマイナスのボタンがある数値入力ボックス

Layui フロントエンド フレームワークは現在、より人気のあるフレームワークです。組み込みモジュールの多くは便利で高速に使用できますが、アプリケーション シナリオが少ないいくつかのモジュールは組み込まれていません。追加されたデジタル入力ボックス減算ボタンは、ショッピングや数字の使用が必要なその他のシナリオに適しています。

この拡張モジュールの UI スタイルは完全にlayUI に基づいており、単独で使用することも、layUI フレームワークの拡張モジュールに拡張することもできます。

: Layui のドキュメントを開くと、最初の部分にはサポート拡張カスタム モジュールが記述されており、他の組み込みモジュールも使用できます。この方法では、この拡張機能を最初から作成する必要はありません。元の入力ボックス コードに 2 つのボタンを追加し、クリック イベントを 2 つのボタンにバインドして、各クリック後の値が条件を満たすかどうかを判断して、加算および減算の入力ボックスが完成します。

本来の使い方は要素IDを利用してパラメータをインスタンス化するのですが、ページ内に複数の入力ボックスがあることを考えると、それぞれにインスタンス化のコードを書くのは面倒なので、バインディング プロセスはメソッドに組み込まれており、インスタンス化後、プラス ボタンとマイナス ボタンの使用を必要とするページ上のすべての入力ボックスがレンダリングされます。

1.CSS パート:

これらの CSS コード行をパブリック スタイル ファイル

.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パート##＃：layuiのフォーム入力ボックスコードブロックにdivのレイヤーを直接ラップすると、クラス名は「プラスマイナス」##ですが
- - クリック後に増減する値。デフォルトは 1

# .

<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 インスタンス化使用

#

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

この時点で、デジタル加減算モジュールが完成しました。動的に追加された要素をバインドする場合は、追加後にこのメソッド (common.plusminus()) を再度使用するだけで済みます。

概要:layUI は長年にわたって非常によく開発されてきました。各モジュールに慣れてしまえば、大量の JS コードを書かずにフロントエンド ページを迅速に開発できます。フロントエンドのプロ以外の開発者にとっては、比較的親しみやすいページデザインが可能です。

フロントエンド、バックエンドを問わず、開発プロセスではさまざまな問題に遭遇しますが、具体的な解決策はそれほど重要ではありませんが、問題を解決するためのアイデアを培う必要があります。

この記事がより多くの友人に役立つことを願っています。

以上がlayUI フレームワークの下にプラスとマイナスのボタンがある数値入力ボックスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。