背景

有时候想做一款比较美观的页面或后台框架，自己审美又不够好怎么办？这时候可以使用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); //得到valuelayer.close(index);
});//弹出一个让输入文本的框
layer.prompt({formType: 1, //输入框类型，支持0（文本）默认1（密码）2（多行文本）value: '默认文本', //初始时的值，默认空字符maxlength: 140, //可输入文本的最大长度，默认500title: '这里是title'
},function(value, index, elem){alert("密码是："+value); //得到valuelayer.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();}
});

Layer - 笔记相关推荐

PyTorch中常用Module和Layer的学习笔记~
1 前言今天在学习PyTorch对于VGG网络的官方实现,朱老师在上课的时候也讲了, 不过感觉自己记得还是不是很牢,所以想写个笔记记录一下~ 2 常用Module和Layer nn.Conv2d 这 ...
论文阅读笔记：Layer Normalization
提示:阅读论文时进行相关思想.结构.优缺点,内容进行提炼和记录,论文和相关引用会标明出处. 文章目录前言 Abstract Introduction Background Layer normali ...
计算机网络笔记Part3 数据链路层（Data Link Layer）
本人计算机网络笔记总目录计算机网络笔记Part1 概述计算机网络笔记Part2 物理层(Physical Layer) 计算机网络笔记Part3 数据链路层(Data Link Layer) 计算 ...
NLP经典论文：Layer Normalization 笔记
NLP经典论文:Layer Normalization 笔记论文介绍模型结构 batch normalization 和 layer normalization 的相同点 batch norma ...
JavaScript学习笔记(九）(验证框架,layer弹出层)
JavaScript学习笔记(九) 一.jQuery Validate验证框架 1.引入相关插件路径 2. 修改一些规则 3. 自定义验证规则 4.异步验证整体代码二.layer弹出层 1.引入相 ...
计算机网络笔记Part2 物理层（Physical Layer）
本人计算机网络笔记总目录计算机网络笔记Part1 概述计算机网络笔记Part2 物理层(Physical Layer) 计算机网络笔记Part3 数据链路层(Data Link Layer) 计算 ...
【Unity学习笔记】标签（Tag）和层（Layer）
声明:此篇文章是个人学习笔记,并非教程,所以内容可能不够严谨.可作参考,但不保证绝对正确.如果你发现我的文章有什么错误,非常欢迎指正,谢谢哦. 此篇文章是根据官网手册总结:https://docs.u ...
实验笔记之——基于DWT的octave layer（DWT在pytorch中实现）
之前的博文<论文阅读笔记之--<Multi-level Wavelet-CNN for Image Restoration>及基于pytorch的复现>曾经研究过WMCNN.本 ...
《网络安全工程师笔记》第十七章：物理层（physical layer）
注:本笔记来自温晓飞老师的网络安全课程第十七章:物理层(physical layer) 第一章:虚拟化架构与系统部署第二章:IP地址详解第三章:进制转换第四章:DOS基本命令与批处理第五章: ...

Layer - 笔记

背景

引入

web弹层组件

弹框

Open模式

Layer - 笔记相关推荐

最新文章

热门文章