layUI前端框架是現在比較流行的框架,其中內建的許多模組使用起來方便快捷,但是少數應用場景較少的模組沒有內建其中,這個加減按鈕的數位輸入框適用於購物或其他需要使用數字的場景。
本擴充模組的UI樣式完全基於layUI,可單獨使用,也可擴充至layUI框架的擴充模組。
想法:開啟layUI的文件後,開頭部分寫了支援擴充自訂模組,內建的其他模組也都可以使用。這樣對於這個擴充來說就不需要從頭寫起了。在原本的輸入框代碼中加入兩個按鈕,然後給兩個按鈕綁定click事件,再判斷每次點擊後的值是否符合條件,這樣加減輸入框就完整了。
原本的使用方法是透過元素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部分##
<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
##
#2,預設為最大值,不限制為最大值,不限制## data-minvalue
-最小值,預設為false,不限制最小值
layui.define(['layer'], function(exports){ var $ = layui.$ var obj = { //数字加减函数(基本参数对象,最大值返回函数,最小值返回函数) plusminus : function (){ $(".plus-minus").each(function(){ //定义按钮HTML var plusminusbutton = '<button type="button" class="layui-btn layui-btn-sm layui-btn-normal vk-minus"><i class="fa fa-minus"></i></button>' +'<button type="button" class="layui-btn layui-btn-sm layui-btn-normal vk-plus"><i class="fa fa-plus"></i></button>'; var data = new Object; data.step = $(this).find('input').data('step'); data.maxvalue = $(this).find('input').data('maxvalue'); data.minvalue = $(this).find('input').data('minvalue'); //定义默认参数,合并参数 options = $.extend({ step: 1, //每次点击加减的值 maxvalue: false, //最大值,默认false,不限制 minvalue: false, //最小值,默认false,不限制 },data); var elem = $(this).find('input'), 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('change'); 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('change'); return; }); }); } }; exports('common',obj); });到一個js檔中。
layui.extend({
common: '{/}/assets/js/common' //改为上方代码所在文件的路径
}).use(['common'], function(){
var common = layui.common;
common.plusminus();
})
rrreee
至此,數位加減模組已完成。動態新增的元素如果想綁定,只需要在新增完以後再重新使用該方法即可,即common.plusminus()。
總結: layUI經過這麼多年已經發展的很完善,各個模組熟悉以後可以快速開發前端頁面,又不需要寫很多的js程式碼,對於非前端專業的開發人員來說可以設計出相對友善的頁面。
不論是前端或後端,開發過程中都會遇到很多問題,具體的解決方法不是很重要,但是解決問題的思路一定要培養好。
以上是layUI框架下有加減按鈕的數位輸入框的詳細內容。更多資訊請關注PHP中文網其他相關文章!