首页 > 代码库 > Layui的一点小理解(上)

Layui的一点小理解(上)

  首先声明这是个人的一点理解,如有不对之处请指正,以下的例子有在官网上看到的,有的是自己写的。还是老规矩最后会附上官网的,如有不明白之处,请查看文档或留言。

  既然说Layui,当然要简单的介绍以下什么是layui啊!下面是官方的解释:

Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui还很年轻,首个版本发布于2016年金秋,她区别于那些基于MVVM底层的UI框架,却并非逆道而行,而是信奉返璞归真之道,准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互、从这里信手拈来。

技术分享

Layui兼容除IE6/7以外的全部浏览器,并且多数结构支持响应式

其实说的简单点就是他是国产的,极其简单的一个框架。下面将会介绍几个简单的功能。及自己的心得。

  他的引用是非常简单的,我选择的是在页面中直接引用下载下来的文件,只要引用CSS文件和JS文件即可。

1 <link rel="stylesheet" href="./css/layui.css" media="all">
2 <script src="./layui.js"></script>

路径请自行更改。其中引用的js需要说明一下,我现在引用的是全部的JS,也就是各个模块都有,不用单独的去选择。在官网下载的文件中有个JS的文件夹,里面有各个模块的JS,如果你只是应用了layui 的一个或少数几个模块,可以自己单独引入!请看一下代码:

<script><!--这个script需要写在你用layui的js之后-->
layui.use([layer, laypage, element], function() {//这里面layui.use()是必须的,你要调用人家的东西,一定要遵守人家的规则;其中有两个参数,第一个是你要调用的模块,其中你调用的模块必须是你上面引用
                                //js中有的,如果你很懒,就和我一样,直接调用全部封装好的JS });
</script>

可以看到我总共调用了三个模块,所以我要把它写在数组中,如果你仅仅是调用了一个模块,那么你可以不用数组,直接用引号引起来就可以了。而后咱们要写的代码就要写在function里面了。

layui.use([‘layer‘, ‘laypage‘, ‘element‘], function() {
    var layer = layui.layer,
        laypage = layui.laypage,
        element = layui.element();
         //向世界问个好
        layer.msg(‘Hello World‘);
        //监听Tab切换
        element.on(‘tab(demo)‘, function(data) {
            layer.msg(‘切换了:‘ + this.innerHTML);
        });
        //分页
        laypage({
            cont: ‘pageDemo‘ //分页容器的id
                        ,
            pages: 12 //总页数
                        ,
            skin: ‘#008cee‘ //自定义选中色值
                        ,
            skip: true //开启跳页
                        ,
            jump: function(obj, first) {
                if(!first) {
                   layer.msg(JSON.stringify(obj.curr));
                }
            }
         });  
});                             

这里主要是实现的三个功能,一个是弹窗提示,另外两个是监听tab切换和分页功能!其中的参数的作用在代码中已经标注,这里就不做详细的介绍了。

  还有就是一个alert功能的弹窗,我把它封装成了一个函数。

 1 function alert1() {
 2                     layer.open({
 3                          skin: ‘demo-class‘,
 4                          type:1,//加上这句话才能点击多次的时候有效,否则第二次点击的时候不能正确的弹出
 5                          area: ["300px","200px"],//弹窗的大小
 6                         content: $(‘#img‘),
 7                         //btnAlign: ‘c‘//控制下面两个按钮显示的位置
 8                         title: "这是弹出框的标题",
 9                         //btn: [‘确定‘, ‘取消‘],//这是弹出框的按钮
10                         shadeClose:true,//点击遮罩层同样能关闭弹窗
11                         yes: function(index, layero) {
12                             //按钮【按钮一】的回调
13 
14                             console.log(JSON.stringify(layero))
15                             layer.close(index);//点击确定之后,需要这句话才能关闭
16                         },
17                         btn2: function(index, layero) {
18                             //按钮【按钮二】的回调
19                             console.log(JSON.stringify(layero))
20 
21                             //return false 开启该代码可禁止点击该按钮关闭
22                         },
23                         btn3: function(index, layero) {
24                             //按钮【按钮三】的回调
25 
26                             //return false 开启该代码可禁止点击该按钮关闭
27                         },
28                         cancel: function() {
29                             //右上角关闭回调
30 
31                             //return false 开启该代码可禁止点击该按钮关闭
32                         }
33                     });
34                 }

你需要在你需要的地方调起函数就可以了。

介绍了这么多,发现少了一个地方就是HTML文档,所以就直接把所有的源码直接贴在下面,只要复制到本地,并且修改一下路径就可以了!

技术分享
  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="utf-8">
  6         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7         <title>layui在线调试</title>
  8         <link rel="stylesheet" href="./css/layui.css" media="all">
  9         <style>
 10             body {
 11                 margin: 10px;
 12             }
 13             
 14             body .demo-class .layui-layer-title {
 15                 background: #c00;
 16                 color: #fff;
 17                 border: none;
 18             }
 19             
 20             body .demo-class .layui-layer-btn {
 21                 border-top: 1px solid #E9E7E7
 22             }
 23             
 24             body .demo-class .layui-layer-btn a {
 25                 background: #333;
 26             }
 27             
 28             body .demo-class .layui-layer-btn .layui-layer-btn1 {
 29                 background: #999;
 30             }
 31         </style>
 32     </head>
 33 
 34     <body>
 35         <img id="img" style="display: none;" src="images/face/70.gif">
 36         <blockquote class="layui-elem-quote">
 37             温馨提示:如果最左侧的导航的高度超出了你的屏幕,你可以将鼠标移入导航区域,然后滑动鼠标滚轮即可
 38         </blockquote>
 39 
 40         <div class="layui-tab layui-tab-card" lay-filter="demo" style="height: 300px;">
 41             <ul class="layui-tab-title">
 42                 <li class="layui-this">演示说明</li>
 43                 <li>标题一</li>
 44                 <li>标题二</li>
 45                 <li>标题三</li>
 46             </ul>
 47             <div class="layui-tab-content">
 48                 <div class="layui-tab-item layui-show">
 49                     在这里,你将以最直观的形式体验Layui!在编辑器中可以执行layui相关的一切代码。
 50                     <br>你也可以点击左侧导航针对性地试验我们提供的示例。
 51                 </div>
 52                 <div class="layui-tab-item">内容1</div>
 53                 <div class="layui-tab-item">内容2</div>
 54                 <div class="layui-tab-item">内容3</div>
 55             </div>
 56         </div>
 57         <div id="box_02">box_02</div>
 58         <div id="pageDemo"></div>
 59 
 60         <script src="./layui.js"></script>
 61         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 62         <script>
 63             layui.use([layer, laypage, element], function() {
 64                 var layer = layui.layer,
 65                     laypage = layui.laypage,
 66                     element = layui.element();
 67 
 68                 //向世界问个好
 69                 layer.msg(Hello World);
 70 
 71                 //监听Tab切换
 72                 element.on(tab(demo), function(data) {
 73                     layer.msg(切换了: + this.innerHTML);
 74 
 75                 });
 76 
 77                 //分页
 78                 laypage({
 79                     cont: pageDemo //分页容器的id
 80                         ,
 81                     pages: 12 //总页数
 82                         ,
 83                     skin: #008cee //自定义选中色值
 84                         ,skip: true //开启跳页
 85                         ,
 86                     jump: function(obj, first) {
 87                         if(!first) {
 88                             layer.msg(JSON.stringify(obj.curr));
 89 
 90                             
 91                         }
 92                     }
 93                 });
 94 
 95                 function alert1() {
 96                     layer.open({
 97                          skin: demo-class,
 98                          type:1,//加上这句话才能点击多次的时候有效,否则第二次点击的时候不能正确的弹出
 99                          area: ["300px","200px"],//弹窗的大小
100                         content: $(#img),
101                         //btnAlign: ‘c‘//控制下面两个按钮显示的位置
102                         title: "这是弹出框的标题",
103                         //btn: [‘确定‘, ‘取消‘],//这是弹出框的按钮
104                         shadeClose:true,//点击遮罩层同样能关闭弹窗
105                         yes: function(index, layero) {
106                             //按钮【按钮一】的回调
107 
108                             console.log(JSON.stringify(layero))
109                             layer.close(index);//点击确定之后,需要这句话才能关闭
110                         },
111                         btn2: function(index, layero) {
112                             //按钮【按钮二】的回调
113                             console.log(JSON.stringify(layero))
114 
115                             //return false 开启该代码可禁止点击该按钮关闭
116                         },
117                         btn3: function(index, layero) {
118                             //按钮【按钮三】的回调
119 
120                             //return false 开启该代码可禁止点击该按钮关闭
121                         },
122                         cancel: function() {
123                             //右上角关闭回调
124 
125                             //return false 开启该代码可禁止点击该按钮关闭
126                         }
127                     });
128                 }
129                 $(#box_02).click(function() {
130                     alert1();
131                 })
132             });
133         </script>
134     </body>
135 
136 </html>
View Code

  如果你还嫌麻烦,那么请下载我的百度网盘,直接下载解压,然后再浏览器直接查看效果就可以了!

点这里

密码:wza4

Layui的一点小理解(上)