首頁 >web前端 >Layui教程 >layUI框架下有加減按鈕的數位輸入框

layUI框架下有加減按鈕的數位輸入框

滴~老人卡
滴~老人卡原創
2020-06-08 16:32:2611918瀏覽

        layUI前端框架是現在比較流行的框架,其中內建的許多模組使用起來方便快捷,但是少數應用場景較少的模組沒有內建其中,這個加減按鈕的數位輸入框適用於購物或其他需要使用數字的場景。

        本擴充模組的UI樣式完全基於layUI,可單獨使用,也可擴充至layUI框架的擴充模組。

        想法:開啟layUI的文件後,開頭部分寫了支援擴充自訂模組,內建的其他模組也都可以使用。這樣對於這個擴充來說就不需要從頭寫起了。在原本的輸入框代碼中加入兩個按鈕,然後給兩個按鈕綁定click事件,再判斷每次點擊後的值是否符合條件,這樣加減輸入框就完整了。

        原本的使用方法是透過元素ID再實例化參數來使用,但考慮到一個頁面可能會有多個輸入框,每個都寫一遍實例化程式碼會比較麻煩,所以將綁定過程內建到了方法裡,實例化後一個頁面的所有需要​​使用加減按鈕的輸入框都將渲染完成。

        layUI框架下有加減按鈕的數位輸入框

#                 #效果圖

        使用方法:

        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部分##

<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>
        2.HTML部分

# #: 直接在layUI的form表單輸入框碼區塊外套一層div,類別名稱定義為「plus-minus」

            input標籤增加data屬性:

##  -點選後增加減少的數值,預設為1
##                     

data-maxvalue

#2,預設為最大值,不限制為最大值,不限制##                    data-minvalue
-最小值,預設為false,不限制最小值

layui.define([&#39;layer&#39;], 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);
});
到一個js檔中。

layui.extend({
    common: &#39;{/}/assets/js/common&#39;  //改为上方代码所在文件的路径
}).use([&#39;common&#39;], function(){
    var common = layui.common;
    common.plusminus();
})
        

4.JS使用實例化使用

rrreee
        至此,數位加減模組已完成。動態新增的元素如果想綁定,只需要在新增完以後再重新使用該方法即可,即common.plusminus()。

       總結: layUI經過這麼多年已經發展的很完善,各個模組熟悉以後可以快速開發前端頁面,又不需要寫很多的js程式碼,對於非前端專業的開發人員來說可以設計出相對友善的頁面。
        不論是前端或後端,開發過程中都會遇到很多問題,具體的解決方法不是很重要,但是解決問題的思路一定要培養好。

        則希望這篇文章能幫助更多的朋友。


以上是layUI框架下有加減按鈕的數位輸入框的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn