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();
	}
}); 

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇