layui弹出层之应用实例讲解

从酒店管理系统到智能门锁及其现在的资源共享平台，layui框架，我们团队用的比较多的就是这个layui弹出层。

layui弹出层，除了页面iframe层我们比较常用还有就是表单校验和其他相关的友好提示信息。

通常比较常用的方式是layui+jQuery，layui主要引用layui相关的js和css文件，jQuery的话，通常就是两个版本，压缩版和源码版，压缩版就像我们Java没有用maven那样，就是一个一个的jar文件，如果我们想看源码，就必须找到对应的源文件。源文件通常情况下比jar包式的文件要大的多。就好比我们部署web工程，特别是使用maven项目的时候，通过打包，将war项目打成war包，由上百兆变成十几兆。

当然了，使用压缩版，且建议使用压缩版，生产环境一定要使用压缩版，压缩版压缩版，看这词，肯定和源码版相比，体积要小的多。

目前很多企业的软件，很多都包含这么几端，浏览器端，客户端或者电脑端等，无论是浏览器端、客户端、电脑端，它们都要用的一个玩意，换言之遵守一个规则，即HTTP请求的规则。

《高性能网站建设指南》中提出了关于网站性能优化十个点，其中就包括减少Http请求，而且我认识的朋友中，有不少他们公司要么是使用CDN将所有的静态资源放在CDN上，当然了，有的放在CDN上是几个文件的压缩版，比如相关的4到5个css文件，但是很多页面都引用，而且它并没有很多变动，基本不动，这种情况我们使用YUI压缩技术或者其他压缩技术，将其压缩成一个css文件，当然文件体积比较大，但是相对于请求4到5个css静态文件，也就是请求4到5个http请求来说，相对比请求一个，响应时间要少的多，响应时间一少，用户体验也就好了。而且对于web性能方面还是很有帮助的。

当然了，体积大占用的带宽也会比较大，所有这也是建议使用压缩版。体积小，占用带宽少，功能也并无差别。当然了，像个人学习或者测试环境可以使用源码版的。

layui的弹出层也可以帮助我们性能优化，它可以使页面上的html相关的标签减少，从而使整个文件减少，这样一来html文件虽然多，但是并不是全部在一个页面上，要知道很多iframe在一块，真的不利于维护，或者维护起来比较困难，通过layui倒可以将一些比如添加的form表单或者是增加编辑信息之类的抽取出来为一个界面，利于维护，也利于性能。

下面说说，layui我常用的几个弹出层:

首先贴一下layui的官网:http://www.layui.com/

layui的下载和文档上面都有，对于一些公司技术调研方面，通常会比较以下:

(1)社区是否活跃;

(2)文档是否丰富;

(3)风险是否可控;

layui基本满足以上原则，社区很活跃，文档也非常丰富，至于风险，很多开源项目和我认识的朋友们，他们公司也在用这个框架，既然这么多人都在用，那么我想风险方面一定也是可控的。

注意一点:

一定要在layui.use('layer',function(){}函数作用域内加上var layer=layui.layer

就好像你要使用jQuery的ajax那样，加上$.ajax或者$.post、$.get

$相当于是jQuery，只是给它起了个别名

这样说好像有点欠妥，再补充一点，就好比Java或者js,你要使用这个变量并给其赋值，前提是必须有，这个“有”，可以理解为声明。

Java对于变量，流行这样一句，先声明再赋值，边声明边赋值。js同样如此。

再打比方:

比如Java类中，写了多个方法，那么你如果可以调用这个方法呢？出来将方法用static修饰之外，以类名调用方法，还有就是实例化，换言之就是New

layui也是这个道理，你如果想要用它的弹出层相关的一系列方法，就必须要声明赋值才行。不然就无法调用。

代码讲解

1.  layer.msg

 layui.use('layer', function(){
              var layer = layui.layer;
              
              layer.msg('消息001');
            });

这个通常用于消息提示，比如退房推送，比如做酒店系统时，有人退房了，通过它提醒酒店店长及其相关人员，说某某在某时刻退房了，这时收到通知就可以通知对应的清洁人员去打扫，当然了，现在手机发短信的形式非常流行，至于退房推送不必通过layer.msg来提示，不过作为后台系统而言，有人退房的话，经理或者其他的管理人员，需要及时在web界面上看到，这时layer.msg就可以起到作用。

当然了，也可以用于表单校验。

              layer.msg('参数自定义', {
                       time: 1500, //1.5s后自动关闭
                       btn: ['明白了', '知道了', '哦']
                 });

这个可以让人联想到，比如你的好友评论你的文章或者你的好友上线下线，又或者某某个点赞了你的说说等，直接就会弹出来，当然了比如中说的就是事件，当然得触发事件才行。不然的话就成死循环了。

time这个属性在这里的作用是信息时间定义，就是msg显示在屏幕上多长时间，不写默认是2秒。根据自己需求而定。

2.layer.open

 layui.use('layer', function(){
              var layer = layui.layer;

              layer.open({
                    type: 2,
                    title: 'iframe',
                    fix: false,
                    maxmin: true,
                    shadeClose: true,
                    shade: 0.8,
                    area: ['1000px', '700px'],
                    content: 'https://www.baidu.com',
                    end: function () {
                       location.reload();
                    }
                });
            }); 

这个通常的可以用于减少HTML大量的标签，这让我想到了Bootstrap,Bootstrap的响应式，我是没话说，满意+非常满意，但是它的那个模态框我不喜欢，有的时候，我的界面需要好几个模态框这样的，但是如果加上了，即便是有注释，简单的说吧，如果div嵌套的少，那还好说，如果div加上个选项卡，选项卡里面又套div，而且又是好几个，这样就不能使用模态框了，当然bootstrap实现这个也很简单，但是对于页面来说，加入了很多HTML，即便有注释，也会使页面的复杂性增加，不利于维护，这时layui的功效来了，通过layer.open可轻松的将模态框分离为一个界面这样页面不利于维护的问题也就解决了。而且用户体验也非常好。

    layui.use('layer', function(){
              var layer = layui.layer;

              layer.open({
                  type: 1, 
                  area: ['200px', '100px'],
                  content: '<p align="center">消息003</p>' //这里content是一个普通的String
                });
            }); 

layer..open的type有5种类型:

0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层)

我个人用的比较的还是信息框和页面层及其iframe层，当然了加载层也用，至于tips层基本没用过。没用过也不能说没有用。

3.lay.alert

layui.use('layer', function(){
              var layer = layui.layer;

              layer.alert('test', {icon: 1});
            }); 

这个可以说是alert强化版本，alert在原始的js中也就是起到提示信息的作用，比如表单校验就比较常用。

4.layer.prompt

layer.prompt(function(value, index, elem){
              alert(value); //得到value
              layer.close(index);
            });

layer.prompt({
                formType: 2,
                value: '初始值',
                title: '请输入值',
                area: ['800px', '350px'] //自定义文本域宽高
              }, function(value, index, elem){
                alert(value); //得到value
                layer.close(index);
              });

提示用户输入的提示框，和原本的js中的prompt一样。只是功能更强大了。

通常可以应用于用户评论文章

5.layer.tab

layer.tab({
                  area: ['600px', '300px'],
                  tab: [{
                    title: 'TAB1', 
                    content: '内容1'
                  }, {
                    title: 'TAB2', 
                    content: '内容2'
                  }, {
                    title: 'TAB3', 
                    content: '内容3'
                  }]
                });   

选项卡就不说了，之前提到过，layer.tab+layer.open结合起来更强大。

小结:

框架，无论是前端框架或者后端框架，框架的目的只有一个更好更快更方便。

这与奥林匹克的格言:“更快、更高、更强”不谋而合。