layui 中open、 table等配置--jquery事件绑定方式
基本配置
当content为一个 dom元素的时候，弹出框出现异常
解决办法： 将type设置为 1,内容就正常了
* 登录弹框
* */
$('.loginFn').click(function () {
layer.open({
title: false,
type: 1,
content: $('#login-dial'),
closeBtn: 0,
success: function (layero, index) {
$("a.layui-layer-btn0").hide()
},
});
// 修改弹窗样式
$('#login-dial').css('padding', '21px')
})
调整layui的弹出框msg的字体大小以及其他样式
//文本里面可以加html标签
let sure = layer.msg('<span style="font-size:20px">确定喜欢她吗？</span>', {
time: 0 //0表示不自动关闭 ,time自动关闭所需毫秒 ,单位是毫秒（1秒=1000毫秒）
, btn: ['<span style="font-size:20px">确定</span>', '<span style="font-size:20px">取消</span>'],
//success指的是 修改按钮的样式 三种样式left center right
success: function(layero){
layero.find('.layui-layer-btn').css('text-align', 'center')
}
, yes: function (index) {
点击确定触发事件
}
});
//sure指的是上面的msg弹出层，定义msg弹出层的样式
layer.style(sure,{
width:10px,
height:10px
});
layui的弹出框open常用的两种功能
let html = "这里面写任何html内容";
比如:let html ='<div class="nav_upload">\n' +
' <input type="text" value="我是html"/>\n' +
'</div>\n' +
'<script>\n' +
'这里写交互功能'+
'</script>';
layer.open({
type: 1 //Page层类型
,area: ['720px', '500px']//弹出层页面比例,类型：String/Array,默认：'auto',在默认状态下，layer是宽高都自适应的,但当你只想定义宽度时，你可以area: '500px'，高度仍然是自适应的。当你宽高都要定义时，你可以area: ['500px', '300px']
,offset:'auto'// 坐标 类型：String/Array 默认：垂直水平居中 offset默认情况下不用设置,
// ,title: '照片上传'//title默认显示在左边，能拖动了
,title: ['照片上传','text-align:center']//传一个数组，第一个参数标题，第二个参数可以写任何css样式，能拖动
// ,title: false//不显示title，但是不能拖动了
,shade: 0.6 //遮罩透明度 类型：String/Array/Boolean 弹层外区域。默认是0.3透明度的黑色背景（'#000'）。如果你想定义别的颜色，可以shade: [0.8, '#393D49']；如果你不想显示遮罩，可以shade: 0
,maxmin: true //允许全屏最小化
,anim: 1 //0-6的动画形式，-1不开启
, content: html//在这里面输入任何合法的js语句
});
layer.open({
type: 2 //2类型，解析url iframe层
,closeBtn: 1 //关闭按钮是否显示 1显示0不显示
,title: "我是标题"//页面标题
,shadeClose: true //点击遮罩区域是否关闭页面
,shade: 0.8 //遮罩透明度 类型：String/Array/Boolean 弹层外区域。默认是0.3透明度的黑色背景（'#000'）。如果你想定义别的颜色，可以shade: [0.8, '#393D49']；如果你不想显示遮罩，可以shade: 0
,area: ['600px', '600px'] //弹出层页面比例
,content: 'XXX.html'//弹出层的url,//这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['XXX.html', 'no']
});
jquery绑定事件建议这种形式
/*
* 注册弹框user_register
* */
$(document).on("click", "#user_register", function () {
layer.open({
title:'账户注册',
type: 2,
content: './register',
// content: ['./register','no'],
area: ['760px','690px'],
shadeClose: true, //点击遮罩区域是否关闭页面
});
// // 修改弹窗样式
// $('#register-dial').css('width', '800px')
// $('#register-dial').css('height', '800px')
})
避免：
/*
* 登录弹框user_SignIn
* */
$('#user_SignIn').click(function () {
layer.open({
title: false,
type: 1,
content: $('#login-dial'),
closeBtn: 0,
shadeClose: true, //点击遮罩区域是否关闭页面
success: function (layero, index) {
$("a.layui-layer-btn0").hide()
},
});
// 修改弹窗样式
$('#login-dial').css('padding', '21px')
})
layui-open不同页面之间的传参
传参方—
/***************裁剪上传begin*****************/
$(document).on("click","#logoTrigger",function(){
console.log(src,333)
var url = "/system/app/companyLogo?src='"+ src +"'";
// var url = '/system/app/companyLogo';
layer.open({
type: 2,
content: [url, 'no'],
area: ['1200px', '800px'],
fix: false,
//不固定
maxmin: true,
shade: 0.3,
title: "修改企业logo",
btn: ['确定', '关闭'],
// 弹层外区域关闭
shadeClose: true,
yes: function(index, layero) {
console.log(index, layero,77777)
var iframeWin = layero.find('iframe')[0];
iframeWin.contentWindow.submitHandler(index, layero);
},
cancel: function(index) {
return true;
}
});
});
接收方：
$(window).load(function() {
getUrlParam('src');
console.log(getUrlParam('src'))
function getUrlParam(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r!=null) return unescape(r[2]); return null; //返回参数值
}
}）
decodeURI
方法二
//传参
layer.open({
type: 2,
title: "补单",
shade: 0.1,
area: ['800px', '100%'],
content: MODULE_PATH + '/myOrderMakeUp/' + orderId + '/' + id + '?status=1' //要传的参数status
,success: function(layero, index){
$(':focus').blur();
}
});
//接参
// //URL中的值
var urlStatus = getQueryString('status');
//查询URL参数值
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) {//decodeURIComponent
return decodeURI(r[2]);
}
}
确定关闭弹窗
layer.open({
type: 2,
content: [url, 'no'],
area: ['800px', '560px'],
fix: false,
//不固定
maxmin: true,
shade: 0.3,
title: "用户端配色",
btn: ['确定', '取消'],
// 弹层外区域关闭
shadeClose: true,
yes: function(index, layero) {
// console.log(index, layero,'index, layero')
var iframeWin = layero.find('iframe')[0];
iframeWin.contentWindow.submitHandler(index, layero);
$(".layui-layer-close1").trigger('click');
},
cancel: function(index) {
return true;
}
});
layui 全局调用layer
var layer;
layui.use(['layer',], function () {
layer = layui.layer;
$("[data-skin]").on('click', function (e) {
var skin = $(this).data('skin');
//点击配色图片加上红色边框
var f = this;
$('#change-bg li a').each(function () {
this.className = this == f ? 'active clearfix full-opacity-hover' : 'clearfix full-opacity-hover'
})
storage.set('skin', skin);
});
})
function submitHandler() {
var skin=storage.get('skin');
console.log(skin,'skin,col,color')
var data=JSON.stringify({"color":skin})
$.ajax({
url: 'UpdateUserData',
data: data,
type: "post",
contentType: 'application/json;charset=UTF-8',
success: function(result) {
console.log(result,888)
if(result.code==0){
layer.msg('用户端配色成功',{icon:1,time:1000});
}else {
layer.msg('用户端配色失败',{icon:2,time:1000});
}
}
})
}
确定按钮隐藏：
// , btn: ['确定', '取消']
$("a.layui-layer-btn0").hide()
设置单选框类型为radio 的值，刷新layui-open弹窗radio的值
//iNav为要设置的值
$("#radio"+iNav).prop("checked",true);
//下面的方法也可
//$("input[name='navs'][value='iNav']").prop("checked",true);
//刷新表单
//第二个参数：为 class="layui-form" 所在元素的 lay-filter="" 的值
form.render("radio","test1");
解决layer.open的出现【object object】的问题
layer.open({
title: false,
type:1, //重点在这里，设置type为1可以解决 [object Object] 的问题
closeBtn: 0,
content: $('#id')
});
弹窗调整样式
layer.open({
type: 2,
content: [url, 'no'],
// area: ['1200px', '800px'],
area: ['1057px', '657px'],
fix: false,
//不固定
maxmin: true,
shade: 0.3,
title: "修改企业logo",
btn: ['确定', '关闭'],
// 弹层外区域关闭
shadeClose: true
,success:function(){
//弹窗确定取消样式
$('.layui-layer-btn').css('paddingTop', '0px')
}
,yes: function(index, layero) {
var iframeWin = layero.find('iframe')[0];
iframeWin.contentWindow.submitHandler();
},
cancel: function(index) {
return true;
}
});
layer.open() 引用另一个页面，及引用同一页面的div(以class或者id形式)
引用另一个页面1，另一个页面功能写全即可
/*
* 注册弹框user_register
* */
$(document).on("click", "#user_register", function () {
layer.open({
title:'账户注册',
type: 2,
content: ['./register','no'],
area: ['400px','690px'],
shadeClose: true, //点击遮罩区域是否关闭页面
});
})
引用另一个页面2
var iColor=$("#change-bg").attr('iColor').split("|")[0]
var url = "/system/app/color?col='"+iColor+"'";
// var url = "/system/app/color";
layer.open({
type: 2,
content: [url, 'no'],
area: ['800px', '560px'],
fix: false,
//不固定
maxmin: true,
shade: 0.3,
title: "用户端配色",
btn: ['确定', '取消'],
// 弹层外区域关闭
shadeClose: true
,success:function(){
}
,yes: function(index, layero) {
var iframeWin = layero.find('iframe')[0];
iframeWin.contentWindow.submitHandler();
// setTimeout(function () {
// layer.close(index);
// },1000)
},
cancel: function(index) {
return true;
}
});
引用同一页面，功能已经写在本页面
//登录弹窗
$('#user_SignIn').click(function () {
layer.open({
title: false,
type: 1,
content: $('#login-dial'),
area: ['400px','410px'],
closeBtn: 0,
shadeClose: true, //点击遮罩区域是否关闭页面
success: function (layero, index) {
$("a.layui-layer-btn0").hide()
},
});
//修改弹窗样式
$('#login-dial').css('padding', '21px')
})
layui弹窗引用本页面的《div》,确定和取消在div中自定义。
setTimeout(function(){
layer.closeAll();
},2000)
弹窗引用：
layer.open({
title: '修改企业信息'
, type: 1
, shadeClose: true
, scrollbar: false
, content: $('#qyDialog')
, area: '900px'
, shade: 0.3
, maxmin: true
, success: function () {
var companyName = data.data.companyName;
var provincePop = data.data.address.split(",")[0]; //省
var cityPop = data.data.address.split(",")[1]; //市
var areaPop = data.data.address.split(",")[2] || ''; //区
var companyAddress = data.data.companyAddress; //详细地址
var industry = data.data.industry;
var userName = data.data.userName;
var email = data.data.email;
var phonenumber = data.data.phonenumber;
$('#companyName').val(companyName)
$("#provincePopup").attr("data-value", provincePop); //所在区域
$("#cityPopup").attr("data-value", cityPop);
$("#areaPopup").attr("data-value", areaPop);
$('#companyAddress').val(companyAddress) //详细地址
$('#industry').val(industry)
$('#userName').val(userName)
$('#email').val(email)
$('#phonenumber').val(phonenumber)
//地区初始化
layarea.render({
elem: '#area-picker',
change: function (res) {
//选择结果
console.log(res, 666666);
}
});
form.render("select", 'test1')
}
});
弹窗中内容提交：
//注册修改企业账户--表单提交
form.on('submit(formDemo)', function (data) {
var codes = $("input[name='code']").val();
var code = $.trim(codes)
var paramsForm = {};
paramsForm.companyName = data.field.companyName
............
if(paramsForm.companyName==''){
layer.msg("请输入企业名称！", {icon: 2, time: 1500});
return false;
}
if(data.field.province_name==''){
layer.msg("请输入企业所在地省！", {icon: 2, time: 1500});
return false;
}
if(data.field.city_name==''){
layer.msg("请输入企业所在地市！", {icon: 2, time: 1500});
return false;
}
if(paramsForm.companyAddress==''){
layer.msg("请输入企业详细地址！", {icon: 2, time: 1500});
return false;
}
if(paramsForm.industry==''){
layer.msg("请输入企业所属行业！", {icon: 2, time: 1500});
return false;
}
if(paramsForm.userName==''){
layer.msg("请输入管理员姓名！", {icon: 2, time: 1500});
return false;
}
if(paramsForm.email==''){
layer.msg("请输入管理员邮箱号！", {icon: 2, time: 1500});
return false;
}
if(paramsForm.phonenumber==''){
layer.msg("请输入管理员手机号！", {icon: 2, time: 1500});
return false;
}
if(paramsForm.code==''){
layer.msg("请输入管理员手机验证码！", {icon: 2, time: 1500});
return false;
}
var url = ctx + 'system/user/profile/saveOrUpDateCompanyInfo';
$.ajax({
type: 'post',
url: url,
contentType: "application/json; charset=UTF-8",
data: JSON.stringify(paramsForm),
async: true,
success: function (data) {
if (data.code == 0) {
layer.msg('企业账户开通/修改成功', {icon: 1, time: 1500});
} else {
layer.msg(data.msg, {icon: 2, time: 1500});
}
setTimeout(function(){
layer.closeAll();
},2000)
}
});
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
layui中table表头自定义图标
{
field: 'type',
title: '类型<i class="question-img" title=""> </i>',
width: '16%',
align: 'center',
},
//css
.question-img{
width: 16px;
height: 16px;
background-image: url('../../images/configure/question.png');
background-repeat: no-repeat;
background-size: 16px 16px;
}
7058
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
