初識前端框架:Layui
阿新 • • 發佈：2018-12-26
官方的解釋：
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>