在之前项目后台管理界面开发中,不知道有layer这样好用的组件,我的内心是这样的的。。。呀!这个框架有弹框,哈哈哈,好开心,不用自己写遮罩层,不用自己写弹框,好开森。。当知道有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}
原标题:web组件新学
关键词:web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。