首先聲明這是個人的一點理解，如有不對之處請指正，以下的例子有在官網上看到的，有的是自己寫的。還是老規矩最后會附上官網的，如有不明白之處，請查看文檔或留言。
既然說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