layUI框架下带加减按钮的数字输入框
1.CSS部分: 将这几行css代码放到公共样式文件
1 .plus-minus .layui-input-block{position: relative;} 2 .plus-minus input{position: absolute;top: 0px;left: 0px;text-align: center;} 3 .plus-minus button:nth-of-type(1){position: absolute;top: 0px;left: 0px;height: 100%;} 4 .plus-minus button:last-child{position: absolute;top: 0px;right: 0px;height: 100%;}
2.HTML部分: 直接在layUI的form表单输入框代码块外套一层div,类名定义为“plus-minus”
input标签增加data属性:
data-step——点击后增加减少的值,默认为1
data-maxvalue——最大值,默认为false,不限制最大值
data-minvalue——最小值,默认为false,不限制最小值
1 <div class="plus-minus"> 2 <div class="layui-form-item"> 3 <label class="layui-form-label">数量</label> 4 <div class="layui-input-block"> 5 <input type="number" name="num" data-step="1" data- 6 maxvalue="20" data-minvalue="1" lay-verify="required" 7 autocomplete="off" class="layui-input num"> 8 </div> 9 </div> 10 </div>
3.JS部分:将以下js代码放到一个js文件中。
1 layui.define(['layer'], function (exports) { 2 var $ = layui.$ 3 var obj = { 4 //数字加减函数(基本参数对象,最大值返回函数,最小值返回函数) 5 plusminus: function () { 6 $(".plus-minus").each(function () { 7 //定义按钮HTML 8 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>' 9 10 var data = new Object; 11 data.step = $(this).find('input').data('step'); 12 data.maxvalue = $(this).find('input').data('maxvalue'); 13 data.minvalue = $(this).find('input').data('minvalue'); 14 15 //定义默认参数,合并参数 16 options = $.extend({ 17 step: 1, //每次点击加减的值 18 maxvalue: false, //最大值,默认false,不限制 19 minvalue: false, //最小值,默认false,不限制 20 }, data); 21 22 var elem = $(this).find('input'), 23 step = parseInt(options.step), 24 maxvalue = options.maxvalue, 25 minvalue = options.minvalue; 26 27 //参数不规范则返回 28 if (elem == null || elem == undefined) { 29 return 30 }; 31 if (step == 0 || step == undefined) { 32 return 33 }; 34 //加入按钮HTML 35 $(elem).after(plusminusbutton); 36 37 //点击增加 38 $(elem).parent().on("click", ".vk-plus", function () { 39 var nowinput = $(this).siblings("input"), //当前输入框元素 40 nowbutton = $(this).siblings("button"), //当前按钮元素 41 oldval = $(nowinput).val(), //点击前的值 42 newval = parseInt(oldval) + step; //点击后的值 43 44 if (newval < maxvalue && newval > minvalue) { 45 $(nowbutton).removeClass("layui-btn-disabled"); 46 } 47 //判断条件。是否最大值 48 if (maxvalue == false) { 49 $(nowinput).val(parseInt(oldval) + step); 50 } 51 52 if (maxvalue != 0 && newval < maxvalue) { 53 $(nowinput).val(parseInt(oldval) + step); 54 } 55 56 if (maxvalue != 0 && newval >= maxvalue) { 57 $(nowinput).val(maxvalue); 58 $(this).addClass("layui-btn-disabled"); 59 } 60 61 //模拟change事件 62 $(nowinput).trigger('change'); 63 64 return; 65 }); 66 67 //点击减少(同上) 68 $(elem).parent().on("click", ".vk-minus", function () { 69 var nowinput = $(this).siblings("input"), 70 nowbutton = $(this).siblings("button"), //当前按钮元素 71 oldval = $(elem).val(), 72 newval = parseInt(oldval) - step; 73 74 if (newval < maxvalue && newval > minvalue) { 75 $(nowbutton).removeClass("layui-btn-disabled"); 76 } 77 78 if (minvalue == false) { 79 $(nowinput).val(parseInt(oldval) - step); 80 } 81 82 if (minvalue != 0 && newval > minvalue) { 83 $(nowinput).val(parseInt(oldval) - step); 84 } 85 86 if (minvalue != 0 && newval <= minvalue) { 87 $(nowinput).val(minvalue); 88 $(this).addClass("layui-btn-disabled"); 89 } 90 91 //模拟change事件 92 $(nowinput).trigger('change'); 93 94 return; 95 }); 96 }); 97 } 98 }; 99 exports('common', obj); 100 });
4.JS实例化使用
1 layui.extend({ 2 common: '{/}/assets/js/common' //改为上方代码所在文件的路径 3 }).use(['common'], function(){ 4 var common = layui.common; common.plusminus(); 5 })
至此,数字加减模块已经完成。动态添加的元素如果想绑定,只需要在添加完以后再重新使用该方法即可,即common.plusminus()。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
2020-03-31 layui实现table加载的示例代码
2020-03-31 layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2020-03-31 jquery判断元素是否隐藏的多种方法