web组件新学--layer
在之前项目后台管理界面开发中,不知道有layer这样好用的组件,我的内心是这样的的。。。呀!这个框架有弹框,哈哈哈,好开心,不用自己写遮罩层,不用自己写弹框,好开森。。
当知道有layer之后。。。。。这么方便,这么人性化,好漂亮,哇哦,好简单。。。
或许我这人看到新鲜的东西都叫好吧,不好的暂时没发现,第一次写博客,欢迎广大园友来喷我。。O(∩_∩)O
主要使用的基础参数:
1、type:类型。类型呢,这里我就从官网http://layer.layui.com/api.html#type粘过来了
-
类型:Number,默认:0
layer提供了5种层类型。可传入的值有:
0
(信息框,默认)1
(页面层)2
(iframe层)3
(加载层)4
(tips层)。 若你采用layer.open({type: 1})
方式调用,则type为必填项(信息框除外)这里我用了默认型0和页面层1.
2、title:标题。我们可以重定义title样式以及文字。样式主要是对一个叫.layui-layer-title的class进行重定义,注意颜色要用!import提高优先级。文字则是title:['转发日志']。当然,也可以不要title,title:false.
css代码如下:.layui-layer-title{font-size:18px;background-color: #147ed6 !important;color: #ffffff !important;}当然这里颜色你们可以自定义也可以用默认的。
当然,你也可以直接title:['转发日志','font-size:18px;background-color: #147ed6 !important;color: #ffffff !important;']。
但争对于该页弹层不止一个,建议采用css样式对“.layui-layer-title”进行全局定义
3、closeBtn:关闭弹层按钮。官网提供两种样式,可对参数配置1(嵌套在弹框内)或2(弹框外部右上角)来实现,如果不需要则配置0。在这里我选择的是closeBtn:1.
但是这里呢,我对关闭按钮进行了重定义,原官网提供默认的是一张黑色的图片,这里呢我把改成了一个大写"X",因为我需要白色,又不想找图片。
怎么改的呢?
对承载样式的class进行了重新定义:
.layui-layer-ico,.layui-layer-close,.layui-layer-close1{color: #ffffff;font-size: 20px !important;background: none !important;margin-top: -4px}
.layui-layer-ico,.layui-layer-close,.layui-layer-close1:hover{color: #ffffff;font-size: 20px;background: none !important;margin-top: -4px}
4、 content:弹框内容自定义,这里就与平时大家用js封装html没什么区别,如下:
content: '<div style="text-align:center;height:50px;margin-top: 50px";font-size: 16px>' +
'<label for="receive" style="color: #666666;">转发给:</label>' +
'<input type="text" class="emailReceive" id="receive" placeholder="请输入收件人" style="border-radius:2px;border: 1px solid #c3c3c3;width: 310px;height: 35px;padding-left: 10px;color:#333">' +
'</div>' +
'<input type="button" value="发送" id="sendEmail" class="sendEmail" >'
5、area:弹框的宽高。不设置就是自适应宽高,我们也可以设置,如此案例就是area: ['490px', '280px']
6、time:显示时间。像提示性的弹框我们经常遇到,弹出一定时间后自动消失,time参数能实现弹框的消失。time:1000,弹出后1秒消失。
7、btn:按钮。layer提供了按钮参数,能快速增加“确定”和“取消”按钮。具体详见官网,这里就是btn:["确定","取消"],
具体实现js案列如下:
var index = layer.open({
type: 0,//默认值
title:false,//不显示title
area: ['490px', '204px'],
shadeClose: false, //点击遮罩关闭
closeBtn:0,//不要关闭按钮
btn:["确定","取消"],//新建确定和取消按钮
yes:function(){
del.parent().parent().parent().remove();
layer.close(index);
},//确定按钮点击事件
content: '<div style="text-align:center;line-height:120px;font-size:20px">确定要删除吗?</div>' //内容更改
});
声明:参考资源来自于layer官网:http://layer.layui.com;
纯属个人总结,如有雷同,纯属巧合;
个人漏言,请勿抄袭。