1.给<img />标签赋值:
$("#img").attr('src', dataStr.coverUrl);
2.标签可读,不可读操作:
$("#id").attr("readonly",false); $("#id").attr("readonly",true);
3.模拟下拉框点击:
$("#city").parent().find("dd[lay-value=" +city + "]").click(); layui.form.render('select'); 每次模拟 再次渲染下拉框
4.放大图片方法:
$(document).on('click', '.imgclass', function () { var logo = $(this).attr("src"); var img_infor = '<img width=\'500px\' height=\'600px\' src="' + logo + '" />'; layer.open({ type: 1, id:"img_xq", closeBtn: 1, shade: 0.8, title: false, //不显示标题 shadeClose: true, area: ['auto', 'auto'], //宽高 content: img_infor }); });
5.layerui 扩展组件的使用
6.判断空值:
a== undefined || a == null || a== '' " 判断数字:NAN
7.layui 自带的验证: 必须是在form submit的情况下才生效
8.layer表格:加载完后控制显示的字段:
table.render({ elem: '#' ,url: , format:'YYYY-MM-DD HH:mm:ss' //日期格式 ,headers: {"Authorization": token} ,cols: [[ {checkbox:'true',fixed:'true' } ,{field:'title', title: '课程标题', width:180,align:'left'} ]] ,id: '' ,page: true ,height: 'auto' ,done:function (res) { //隐藏某列 $("[data-field='title']").css('display','none'); //关键代码 } });
9.父页面向子页面传值:
layer.open({ type: 2, title: "标题", shadeClose: true, shade: 0.8, area: ['99%', '99%'], content: "xxx.html", success: function (layero,index) { var iframe = window['layui-layer-iframe' + index]; iframe.getData(xxx); } });
10:重新加载表格
layui.table.reload('testReload',{});
11:相册功能:
himl代码:
<div class="layui-form-item"> <label class="layui-form-label">场地相册:<span style="color: red;">*</span></label> <div class="layui-input-block"> <div class="layui-upload"> <button type="button" class="layui-btn" id="test2">上传图片</button> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%"> 预览图: <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list"> </div> </blockquote> </div> </div> </div>
js代码:
upload.render({ elem: '#test2' , url: baseUrl + '/basic/uploadFile' ,multiple: true ,before: function(obj){ layer.msg('图片上传中...', { icon: 16, shade: 0.01, time: 0 }) } ,done: function(res){ layer.close(layer.msg());//关闭上传提示窗口 //上传完毕 $('#uploader-list').append( '<div id="" class="file-iteme">' + '<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>' + '<img style="width: 100px;height: 100px;" class="album" src='+ res.id +'>' + '</div>' ); } });$(document).on("mouseenter mouseleave", ".file-iteme", function(event){ if(event.type === "mouseenter"){ //鼠标悬浮 $(this).children(".info").fadeIn("fast"); $(this).children(".handle").fadeIn("fast"); }else if(event.type === "mouseleave") { //鼠标离开 $(this).children(".info").hide(); $(this).children(".handle").hide(); } }); // 删除图片 $(document).on("click", ".file-iteme .handle", function(event){ $(this).parent().remove(); });
效果: