Java程序員必備後臺前端框架--Layui【從入門到實戰】（一）

時間 2021-03-05

標籤 javascript css html 前端 java jquery 程序員 web 編程後端欄目 Java 简体版

原文原文鏈接

layui入門使用及圖標、按鈕的使用

做者： Stanley 羅昊javascript

【轉載請註明出處和署名，謝謝！】css

【編程工具：IDEA】html

下載Layui與文件分析

下載直接去官網下載便可前端

文件分析

下載完成後，解壓會獲得一個文件夾，內部有一些文件是能夠直接刪除的，好比文檔與示例，更新日誌之類的，咱們僅僅只要上面那個layui文件夾。java

咱們直接點進去，開始文件介紹：jquery

CSS：樣式，使用UI框架之後，基本上不須要咱們去寫樣式，這裏的css只是對layui的一些支持文件，固然也缺一不可。程序員

font：字體。web

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">&#xe68f;</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">&#xe678;</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>