Layer - 笔记

背景

有时候想做一款比较美观的页面或后台框架，自己审美又不够好怎么办？这时候可以使用Layer框架，来拯救页面的美观性。

layer官方手册：https://www.layui.com/doc/

引入

需提前引入jquery.js

有时间在整理

web弹层组件

弹框

常规模式

layer.alert //弹出信息提示层
layer.msg //信息提示层
layer.confirm //对话询问层
layer.load //信息加载层
layer.tips //信息提示
layer.propmt //弹框输入层
layer.tab //选项卡

alert

layer.alert('内容文本', {
  icon: 1, //0是黄色感叹号、1是绿色对勾、2是红色叉号、3黄色问号、4、灰色锁子、红色难过、6绿色笑脸
  time:300 //3秒自动关闭，一般alert不建议这样做
})
 
layer.alert('内容文本', {
  icon: 1, //0是黄色感叹号、1是绿色对勾、2是红色叉号、3黄色问号、4、灰色锁子、红色难过、6绿色笑脸
},function (){
	//关闭后想做点什么，
	alert('adf')
})
 
layer.alert('内容文本', function(index){
    //关闭下标为index的alert弹框
    layer.close(index);
});

msg

//抖动的msg
layer.msg('内容文本',function (){
	//执行完做点什么
	alert('adf')
})
 
layer.msg('内容文本', {
  icon: 1, //0是黄色感叹号、1是绿色对勾、2是红色叉号、3黄色问号、4、灰色锁子、红色难过、6绿色笑脸
  time:3000 //3秒自动关闭
})
 
layer.msg('内容文本', {
  icon: 1, //0是黄色感叹号、1是绿色对勾、2是红色叉号、3黄色问号、4、灰色锁子、红色难过、6绿色笑脸
},function (){
	//关闭后想做点什么，
	alert('adf')
})
 
layer.msg('内容文本', function(index){
    //关闭下标为index的alert弹框
    layer.close(index);
});

confirm

layer.confirm('是否关闭？',{
	icon: 1, //0是黄色感叹号、1是绿色对勾、2是红色叉号、3黄色问号、4、灰色锁子、红色难过、6绿色笑脸
	title:'标题：温馨提示', //标题
},function(index){
    //点击确定后做点什么
});
 
layer.confirm('是否关闭？',{
	icon: 1, //0是黄色感叹号、1是绿色对勾、2是红色叉号、3黄色问号、4、灰色锁子、红色难过、6绿色笑脸
	title:'标题：温馨提示',
},function(index){
	layer.msg('已关闭')
    //关闭下标为index的alert弹框
    layer.close(index);
});

prompt

//弹出一个让输入文本的框
layer.prompt(function(value, index, elem){
    alert("密码是："+value); //得到value
    layer.close(index);
});
 
 
//弹出一个让输入文本的框
layer.prompt({
	formType: 1, //输入框类型，支持0（文本）默认1（密码）2（多行文本）
	value: '默认文本', //初始时的值，默认空字符
    maxlength: 140, //可输入文本的最大长度，默认500
    title: '这里是title'
},function(value, index, elem){
    alert("密码是："+value); //得到value
    layer.close(index);
});

load

//打开加载层
var index = layer.load()
 
//第二个风格
var index = layer.load(1);
//第三个风格
var index = layer.load(2);
 
//又换了种风格，并且设定最长等待10秒 
var index = layer.load(2, {time: 10*1000}); 
 
//关闭加载层
layer.close(index);

tab

layer.tab({
	area: ['600px', '300px'],
	tab: [{
		title: 'TAB1', 
		content: '内容1'
	}, {
		title: 'TAB2', 
		content: '内容2'
	}, {
		title: 'TAB3', 
		content: '内容3'
	}]
}); 

Open模式

弹出一个页面

 
//打开一个简单的页面弹窗
layer.open({
	type: 2, //Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
	content: 'https://www.baidu.com', //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
	//content: ['https://www.baidu.com','no'], //左右上下没有滚动条
	area : ['90%', '90%'], //页面缩放比例
	shade: 0.4,
}); 
 
//获取一个dom元素的弹出层
layer.open({
	type: 1, //Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
	title: '我是标题', //标题
	area: ['90%', '90%'], //弹出页面大小比例
	content: $(".container-fluid"), //获取DOM元素
}); 
 
layer.open({
	type: 2, //Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
	title: '我是标题', //标题
	area: ['90%', '90%'], //弹出页面大小比例
	content: 'https://www.baidu.com', //支持获取DOM元素，如$("#main")
	scrollbar: false, //屏蔽浏览器滚动条
}); 
 
layer.open({
	type: 1, //Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
	title: '我是标题', //标题
	area: ['90%', '90%'], //弹出页面大小比例
	shade: 0.4, //背景黑色遮罩透明度
	content: 'http://www.baidu.com', //支持获取DOM元素
	btn: ['确定', '取消'], //按钮
	scrollbar: false, //屏蔽浏览器滚动条
	yes: function(index){
		//确定后做点什么
	    layer.msg('yes');
	    layer.close(index);
	},
	btn2: function(){
		//取消后做点什么
	    layer.msg('bbb');
	    //layer.closeAll();
	}
});