Java程式設計師必備後臺前端框架--Layui【從入門到實戰】(一)
layui入門使用及圖示、按鈕的使用
作者 : Stanley 羅昊
【轉載請註明出處和署名,謝謝!】
【程式設計工具:IDEA】
下載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框架,大部分程式碼以及元件都是實現好的,我們只需要在上面更改即可。
&n