本文作者 ： Stanley 羅昊
本文轉自：
https://www.cnblogs.com/StanleyBlogs/p/14480990.html
下載Layui與文件分析
下載直接去官網下載即可
文件分析
下載完成后，解壓會得到一個文件夾，內部有一些文件是可以直接刪除的，比如文檔與示例，更新日志之類的，我們僅僅只要上面那個layui文件夾。
我們直接點進去，開始文件介紹：
css：樣式，使用UI框架以后，基本上不需要我們去寫樣式，這里的css只是對layui的一些支持文件，當然也缺一不可。
font：字體。
imges：圖標，框架內的圖片，點進去后發現只是一些小的表情包，意味著layui自帶了富文本編輯器。
lay：類的話里面是有一些modules，是一些layui封裝好的內置模塊，比如彈出層（詳細可以在官網內置模塊區查看）
layui.all與layui有什么區別呢？
先看大小區別layui.all明顯比layui大；
layui.all包含了所有模塊的js
layui它只是一個框架，如果要用一些模塊功能，那么必須要使用layu.use的方式
當然我們一般都用layui，因為它體積小，另外那個太大了；
不要小看200kb，在網絡上200多kb已經比較大了。
layui的使用方法
首先需要先創建一個JAVAWeb項目，因為我們都知道，web項目就不單單去寫java代碼，邏輯之類的，而是要去全棧，也就是前后端都需要你一個人完成，所以Layui的出世給后端java程序員帶來了福音。
簡單看一下web項目的結構:
一般web項目創建的時候是不會自帶resource文件的，我們需要自己手動創建，這個也是web項目必須要有的文件，要存放所有靜態資源，Layui也不例外，它也屬于靜態資源。
創建一個jsp或者html都行，因為我這里剛好有一個index.jsp我就直接用了；
在jsp頁面中，我們需要引入layui，引用代碼：
<link rel="stylesheet" href="resources/layui/css/layui.css">
<script src="resources/layui/layui.js"></script>
使用layui最終我們就只引用這兩行代碼即可
如何使用圖標
有兩種使用方式：
1.使用字符實體
我們看到在圖標下方有一串字符，我們直接復制這一串字符，在jsp頁面上按照文檔上的規范寫出來查看效果
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2 <html>
3 <head>
4 <title>圖標</title>
5 <link rel="stylesheet" href="resources/layui/css/layui.css">
6 </head>
7 <body>
8 <div class="layui-icon"></div>
9 <script src="resources/layui/layui.js"></script>
10 </body>
11 </html>
2.使用樣式
<div class="layui-icon layui-icon-cellphone"></div>
像這種，前端框架，我們可以只知道基礎即可，如果有那些不會的，隨時可以訪問官方文檔進行學習。
按鈕
在官方文檔處，也有按鈕的相關介紹，我們可以簡單地了解一下按鈕怎么使用；
我們直接切成示例模式，直接復制粘貼一部分按鈕代碼，我們在頁面上直接查看源代碼；
具體操作如下：
按鈕代碼實現：
1 <fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;">
2 <legend>按鈕主題</legend>
3 <div>
4 <button type="button" class="layui-btn layui-btn-primary">原始按鈕</button>
5 <button type="button" class="layui-btn">默認按鈕</button>
6 <button type="button" class="layui-btn layui-btn-normal">百搭按鈕</button>
7 <button type="button" class="layui-btn layui-btn-warm">暖色按鈕</button>
8 <button type="button" class="layui-btn layui-btn-danger">警告按鈕</button>
9 <button type="button" class="layui-btn layui-btn-disabled">禁用按鈕</button>
10 </div>
11 </fieldset>
jsp代碼演示：
代碼分析 （相關樣式）
1.必要樣式：layui-btn，這個樣式就代表一個按鈕，標識這一行type采用layui的樣式中的按鈕樣式
2.主題樣式：既然已經設置了必要樣式，代表它是一個layui的按鈕，那么我們就可以切換你想要的樣式（樣子）；比如在后面加了一個kayui-bth-danger這個就代表是一個警告樣式的按鈕；
<button type="button" class="layui-btn layui-btn-danger">警告按鈕</button>
設置按鈕大小
先看源碼：
<button type="button" class="layui-btn layui-btn-primary layui-btn-lg">大型按鈕</button>
<button type="button" class="layui-btn layui-btn-primary">默認按鈕</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">小型按鈕</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-xs">迷你按鈕</button>
這一項就是單純的可以設置按鈕的尺寸，我們可以直接在原本的按鈕上添加這行代碼比如就像這樣：
<button type="button" class="layui-btn layui-btn-disabled layui-btn-lg">禁用按鈕</button>
僅僅在后面追加了一個layui-btn-lg即可在原來按鈕的樣式基礎上追加這個尺寸樣式。
圖標按鈕
剛剛我們嘗試了常規按鈕樣式的基礎上添加了尺寸，那么我們就可以舉一反三，也在按鈕上添加自己喜歡的圖標，我們直接寫出代碼即可，在文檔上我們可以去挑選自己喜歡的圖標，對應參數即可，在上面也有講到過；
<button type="button" class="layui-btn layui-btn-danger layui-icon layui-icon-rate-half">警告按鈕</button>
效果圖
所以只要靈活運用layui的組件，就可以自行完成拼接，自定義自己喜歡的樣式；
帶文字的圖標按鈕正規寫法
上述我們直接在button之間寫文字即可，但是這樣并不規范而且圖標與文字也不公正對齊，我們正確的寫法：
1 <button type="button" class="layui-btn layui-icon ">
2 <span class="layui-icon"></span>手機按鈕
3 </button>
我們刪掉了前面警告樣式的代碼，所以現在只是一個普通樣式的按鈕：
事件監聽（按鈕）
我們使用按鈕，那么必然要觸發事件，所以，我們該如何判斷監聽事件呢？
加事件的寫法跟Jquery的寫寫法幾乎一模一樣：
首先要給標簽加id，唯一標識調用的時候要對應：
1 <button type="button" class="layui-btn layui-icon " id="add">添加</button>
2 <button type="button" class="layui-btn layui-icon "id="update">編輯</button>
3 <button type="button" class="layui-btn layui-icon "id="delete">刪除</button>
然后引入JS正常寫function（方法）即可：
1 <script src="resources/layui/layui.js"></script>
2 <script type="text/JavaScript">
3 <!--調用監聽add按鈕，點擊后觸發事件-->
4 layui.use(["jquery"],function (){
5 var $=layui.jquery;
6 $("#add").click(function (){
7 alert($(this).html())
8 })
9 })
10 </script>
寫過Js的人應該都發現了，layui的處理事件以及邏輯都依賴于js跟Jquery，當然我們也只是在剖析layui的每個組件，其實我們平時一般都直接下載下來整個layui框架，大部分代碼以及組件都是實現好的，我們只需要在上面更改即可。
