Layui的一点小理解（上）
Posted 程先生哈
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
如果你还嫌麻烦，那么请下载我的百度网盘，直接下载解压，然后再浏览器直接查看效果就可以了！
密码：wza4
以上是关于Layui的一点小理解（上）的主要内容，如果未能解决你的问题，请参考以下文章