你的位置:首页 > 软件开发 > Java > web组件新学

web组件新学

发布时间:2016-06-16 14:00:09
在之前项目后台管理界面开发中,不知道有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”进行全局定义

web组件新学

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

web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。