適合后端開發者的前端樣式框架LayUI筆記-有解無憂

1. 圖示

layui 的所有圖示全部采用字體形式，取材于阿里巴巴矢量圖示庫（iconfont），因此你可以把一個 icon 看作是一個普通的文字，這意味著你直接用 css 控制文字屬性，如 color、font-size，就可以改變圖示的顏色和大小，你可以通過 font-class 或 unicode 來定義不同的圖示，

LayUi官網圖示檔案：https://www.layui.com/doc/element/icon.html

方法1：字符物體

<!-- 方法1：字符物體(必須在容器標簽內) -->
<div class="layui-icon" style="color: red;">&#xe68f;</div>

方法2：使用樣式

<!-- 方法2：使用樣式 -->
<i class="layui-icon layui-icon-heart-fill" style="color: green;"></i>

2. 按鈕

向任意HTML元素設定class=“layui-btn”，建立一個基礎按鈕，通過追加格式為*layui-btn-{type}*的class來定義其它按鈕風格，內置的按鈕class可以進行任意組合，從而形成更多種按鈕風格，

LayUi官網按鈕檔案：https://www.layui.com/doc/element/button.html

在這里插入圖片描述

顏色樣式：

<button type="button" type="button" class="layui-btn layui-btn-primary">原始按鈕</button>

<button type="button" type="button" class="layui-btn">默認按鈕</button>

<button type="button" type="button" class="layui-btn layui-btn-normal">百搭按鈕</button>

<button type="button" type="button" class="layui-btn layui-btn-warm">暖色按鈕</button>

<button type="button" type="button" class="layui-btn layui-btn-danger">警告按鈕</button>

<button type="button" type="button" class="layui-btn layui-btn-disabled">禁用按鈕</button>

按鈕尺寸：

<button type="button" type="button" class="layui-btn layui-btn-lg">大型按鈕</button>
    
<button type="button" type="button" class="layui-btn">默認按鈕</button>
    
<button type="button" type="button" class="layui-btn layui-btn-sm">小型按鈕</button>
    
<button type="button" type="button" class="layui-btn layui-btn-xs">迷你按鈕</button>

圖示按鈕：

<button type="button" class="layui-btn"><i class="layui-icon">&#xe608;</i> 添加</button>

<button type="button" class="layui-btn"><i class="layui-icon">&#x1002;</i></button>

圓角按鈕：

<button type="button" class="layui-btn layui-btn-radius layui-btn-primary">原始按鈕</button>
    
<button type="button" class="layui-btn layui-btn-radius">默認按鈕</button>
    
<button type="button" class="layui-btn layui-btn-radius layui-btn-normal">百搭按鈕</button>
    
<button type="button" class="layui-btn layui-btn-radius layui-btn-warm">暖色按鈕</button>
    
<button type="button" class="layui-btn layui-btn-radius layui-btn-danger">警告按鈕</button>
    
<button type="button" class="layui-btn layui-btn-radius layui-btn-disabled">禁用按鈕</button>

按鈕組：

<div class="layui-btn-group">
    <button type="button" class="layui-btn">增加</button>
    <button type="button" class="layui-btn">編輯</button>
    <button type="button" class="layui-btn">洗掉</button>
</div>
<div class="layui-btn-group">
    <button type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon">&#xe654;</i>
    </button>
    <button type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon">&#xe642;</i>
    </button>
    <button type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon">&#xe640;</i>
    </button>
    <button type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon">&#xe602;</i>
    </button>
</div>
<div class="layui-btn-group">
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon">&#xe654;</i>
    </button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon">&#xe642;</i>
    </button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon">&#xe640;</i>
    </button>
</div>

3. 導航欄選單

導航一般指頁面引導性頻道集合，多以選單的形式呈現，可應用于頭部和側邊，是整個網頁畫龍點晴般的存在，面包屑結構簡單，支持自定義分隔符，千萬不要忘了加載 element模塊，雖然大部分行為都是在加載完該模塊后自動完成的，但一些互動操作，如呼出二級選單等，需借助element模塊才能使用，你可以移步檔案左側【內置模塊 - 常用元素操作 element】了解詳情

LayUi官網導航檔案：https://www.layui.com/doc/element/nav.html

在這里插入圖片描述

導航欄方向(水平)：

默認水平

<!-- 水平導航 -->
<ul class="layui-nav" lay-filter="">
    <li class="layui-nav-item"><a href="">最新活動</a></li>
    <li class="layui-nav-item layui-this"><a href="">產品</a></li>
    <li class="layui-nav-item"><a href="">大資料</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">解決方案</a>
        <dl class="layui-nav-child">
            <!-- 二級選單 -->
            <dd><a href="">移動模塊</a></dd>
            <dd><a href="">后臺模版</a></dd>
            <dd><a href="">電商平臺</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">社區</a></li>
    <!-- 頭像選單項 -->
    <li class="layui-nav-item" style="float: right;">
        <a href=""><img src="https://t.cn/RCzsdCq" class="layui-nav-img">我</a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;">修改資訊</a></dd>
          <dd><a href="javascript:;">安全管理</a></dd>
          <dd><a href="javascript:;">退了</a></dd>
        </dl>
     </li>
</ul>

導航欄方向(垂直):

layui-nav-tree

<!-- 垂直導航 -->
<ul class="layui-nav layui-nav-tree" lay-filter="">
    <li class="layui-nav-item"><a href="">最新活動</a></li>
    <li class="layui-nav-item layui-this"><a href="">產品</a></li>
    <li class="layui-nav-item"><a href="">大資料</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">解決方案</a>
        <dl class="layui-nav-child">
            <!-- 二級選單 -->
            <dd><a href="">移動模塊</a></dd>
            <dd><a href="">后臺模版</a></dd>
            <dd><a href="">電商平臺</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">社區</a></li>
</ul>

<script src="../layui/layui.js"></script>
<script>
    //注意：導航 依賴 element 模塊，否則無法進行功能性操作
    layui.use('element', function () {
        var element = layui.element;

        //…
    });
</script>

導航欄內容：

layui-nav：表示導航欄選單
- layui-nav-item：表示導航選單的一個子項
  - layui-nav-child：表示子項的子項
- layui-this：表示當前選中的選單項

4. 選項卡

導航選單可應用于頭部和側邊，Tab選項卡提供多套風格，支持回應式，支持洗掉選項卡等功能，面包屑結構簡單，支持自定義分隔符，

依賴加載組件：element （請注意：必須加載element模塊，相關功能才能正常使用，詳見：內置組件 - 常用元素操作）

LayUI官網選項卡檔案：https://www.layui.com/doc/element/tab.html

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-pVJGDL4h-1603016498708)(D:\Note\筆記\前端\LayUI筆記.assets\image-20201015144141259.png)]

默認風格：

layui-tab

<!-- 默認風格 -->
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">網站設定</li>
        <li>用戶管理</li>
        <li>權限分配</li>
        <li>商品管理</li>
        <li>訂單管理</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">內容1</div>
        <div class="layui-tab-item">內容2</div>
        <div class="layui-tab-item">內容3</div>
        <div class="layui-tab-item">內容4</div>
        <div class="layui-tab-item">內容5</div>
    </div>
</div>

<script src="../layui/layui.js"></script>
<script>
    //注意：選項卡 依賴 element 模塊，否則無法進行功能性操作
    layui.use('element', function () {
        var element = layui.element;

        //…
    });
</script>

簡介風格：

layui-tab layui-tab-brief

<!-- 簡潔風格 -->
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">網站設定</li>
        <li>用戶管理</li>
        <li>權限分配</li>
        <li>商品管理</li>
        <li>訂單管理</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">內容1</div>
        <div class="layui-tab-item">內容2</div>
        <div class="layui-tab-item">內容3</div>
        <div class="layui-tab-item">內容4</div>
        <div class="layui-tab-item">內容5</div>
    </div>
</div>

<script src="../layui/layui.js"></script>
<script>
    //注意：選項卡 依賴 element 模塊，否則無法進行功能性操作
    layui.use('element', function () {
        var element = layui.element;

        //…
    });
</script>

卡片風格：

layui-tab layui-tab-card

<!-- 卡片風格 -->
<!-- lay-allowclose="true":卡片選項可關閉 -->
<div class="layui-tab layui-tab-card" lay-allowclose="true">
    <ul class="layui-tab-title">
      <li class="layui-this">網站設定</li>
      <li>用戶管理</li>
      <li>權限分配</li>
      <li>商品管理</li>
      <li>訂單管理</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
      <div class="layui-tab-item layui-show">1</div>
      <div class="layui-tab-item">2</div>
      <div class="layui-tab-item">3</div>
      <div class="layui-tab-item">4</div>
      <div class="layui-tab-item">5</div>
      <div class="layui-tab-item">6</div>
    </div>
</div>

<script src="../layui/layui.js"></script>
<script>
    //注意：選項卡 依賴 element 模塊，否則無法進行功能性操作
    layui.use('element', function () {
        var element = layui.element;

        //…
    });
</script>

選項卡內容：

layui-tab：代表一個選項卡
- layui-tab-title：代表選項卡標題
  - layui-this：代表選中當前標題
  - layui-tab-content：代表選項卡中的內容
    - layui-tab-item：代表選項卡對應標題下的內容
    - layui-show：顯示選中標題下的內容

選項卡特殊屬性：

<!-- lay-allowclose="true":卡片選項可關閉 -->
<div class="layui-tab layui-tab-card" lay-allowclose="true">

5. 進度條(略)

6. 面板 + 布局(重點)

一般的面板通常是指一個獨立的容器，而折疊面板則能有效地節省頁面的可視面積，非常適合應用于：QA說明、幫助檔案等，

layui 的柵格系統采用業界比較常見的 12 等分規則，內置移動設備、平板、桌面中等和大型螢屏的多終端適配處理，最低能支持到ie8，

依賴加載組件：element

LayUI官網面板檔案：https://www.layui.com/doc/element/tab.html

LayUI官網布局檔案：https://www.layui.com/doc/element/layout.html

在這里插入圖片描述

面板：

卡片面板

layui-card：代表一個卡片面板
- layui-card-header：代表卡片面板頭部
- layui-card-body：代表卡片面板內容

折疊面板(默認)

layui-collapse：代表一個折疊面板
- layui-colla-item：代表一個折疊面板的內容項
  - layui-colla-title：代表內容項的標題
  - layui-colla-content：代表內容項的內容
  - layui-show：代表內容項默認展開

手風琴面板

在普通折疊面板的基礎上加上lay-accordion 屬，

手風琴和普通折疊面板的區別是，前者一次只能打開一個面板，后者可以打開多個面板

布局：

布局屬性

layui-row
- layui-col-space15 代表列之間的間距，距離范圍： space0-space30
  - layui-col-md6 代表一列 md1-md12 代表當前列占整行的x/12
    - layui-col-md-offset3 代表列的偏移

列可以同時出現最多四種不同的組合，分別是：xs（超小螢屏，如手機）、sm（小螢屏，如平板）、md（桌面中等螢屏）、lg（桌面大型螢屏），以呈現更加動態靈活的布局，

例如：

<div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
	移動：6/12 | 平板：6/12 | 桌面：4/12
</div>

實體：

<div class="layui-row layui-col-space30">
    <div class="layui-col-md6" style="background-color: ghostwhite;">
        <!-- 卡片面板 -->
        <div class="layui-card">
            <div class="layui-card-header">卡片面板</div>
            <div class="layui-card-body">
                卡片式面板面板通常用于非白色背景色的主體內<br>
                從而映襯出邊框投影
            </div>
        </div>
    </div>
    <div class="layui-col-md6" style="background-color: ghostwhite;">
        <!-- 卡片面板 -->
        <div class="layui-card">
            <div class="layui-card-header">卡片面板</div>
            <div class="layui-card-body">
                卡片式面板面板通常用于非白色背景色的主體內<br>
                從而映襯出邊框投影
            </div>
        </div>
    </div>
    <div class="layui-col-md12" style="background-color: ghostwhite;">
        <!-- 卡片面板 -->
        <div class="layui-card">
            <div class="layui-card-header">卡片面板</div>
            <div class="layui-card-body">
                卡片式面板面板通常用于非白色背景色的主體內<br>
                從而映襯出邊框投影
            </div>
        </div>
    </div>
    <div class="layui-col-md12" style="background-color: ghostwhite;">
        <!-- 折疊面板 -->
        <div class="layui-collapse">
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">杜甫</h2>
              <div class="layui-colla-content">內容區域</div>
            </div>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">李清照</h2>
              <div class="layui-colla-content">內容區域</div>
            </div>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">魯迅</h2>
              <div class="layui-colla-content layui-show">內容區域</div>
            </div>
          </div>
    </div>
    <div class="layui-col-md12" style="background-color: ghostwhite;">
        <!-- 手風琴面板 -->
        <div class="layui-collapse" lay-accordion>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">杜甫</h2>
              <div class="layui-colla-content">內容區域</div>
            </div>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">李清照</h2>
              <div class="layui-colla-content">內容區域</div>
            </div>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">魯迅</h2>
              <div class="layui-colla-content layui-show">內容區域</div>
            </div>
          </div>
    </div>
</div>

<script src="../layui/layui.js"></script>
<script>
    //注意：選項卡 依賴 element 模塊，否則無法進行功能性操作
    layui.use('element', function () {
        var element = layui.element;

        //…
    });
</script>

7. 徽章(略)

8.時間線(直接看demo)

在這里插入圖片描述

<ul class="layui-timeline">
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月18日</h3>
      <p>
        layui 2.0 的一切準備作業似乎都已到位，發布之弦，一觸即發，
        <br>不枉近百個日日夜夜與之為伴，因小而大，因弱而強，
        <br>無論它能走多遠，抑或如何支撐？至少我曾傾注全心，無怨無悔 <i class="layui-icon"></i>
      </p>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月16日</h3>
      <p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君堯舜上，再使風俗淳</em>”的宏偉抱負，個人最愛的名篇有：</p>
      <ul>
        <li>《登高》</li>
        <li>《茅屋為秋風所破歌》</li>
      </ul>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月15日</h3>
      <p>
        中國人民抗日戰爭勝利72周年
        <br>常常在想，盡管對這個國家有這樣那樣的抱怨，但我們的確生在了最好的時代
        <br>銘記、感恩
        <br>所有為中華民族浴血奮戰的英雄將士
        <br>永垂不朽
      </p>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <div class="layui-timeline-title">過去</div>
    </div>
  </li>
</ul>

在這里插入圖片描述

9.影片(略)

layui 的影片全部采用 CSS3，因此不支持ie8和部分不支持ie9（即ie8/9無影片）

LayUI官網影片檔案：https://www.layui.com/doc/element/anim.html
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圖示01</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
  <link rel="stylesheet" href="../layui/css/layui.global.css">
  <style>
    .site-doc-icon li {
      width: 222px;
    }

    .site-doc-icon li .layui-anim {
      width: 150px;
      height: 150px;
      line-height: 150px;
      margin: 0 auto 10px;
      text-align: center;
      background-color: #009688;
      cursor: pointer;
      color: #fff;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <br>
  <br>
  <br>
  <ul class="site-doc-icon site-doc-anim">
    <li>
      <div class="layui-anim" data-anim="layui-anim-up">從最底部往上滑入</div>
      <div class="code">layui-anim-up</div>
    </li>
    <li>
      <div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
      <div class="code">layui-anim-upbit</div>
    </li>
    <li>
      <div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
      <div class="code">layui-anim-scale</div>
    </li>
    <li>
      <div class="layui-anim" data-anim="layui-anim-scaleSpring">彈簧式放大</div>
      <div class="code">layui-anim-scaleSpring</div>
    </li>
  </ul>
  <ul class="site-doc-icon site-doc-anim">
    <li>
      <div class="layui-anim" data-anim="layui-anim-fadein">漸現</div>
      <div class="code">layui-anim-fadein</div>
    </li>
    <li>
      <div class="layui-anim" data-anim="layui-anim-fadeout">漸隱</div>
      <div class="code">layui-anim-fadeout</div>
    </li>
    <li>
      <div class="layui-anim" data-anim="layui-anim-rotate">360度旋轉</div>
      <div class="code">layui-anim-rotate</div>
    </li>
    <li>
      <div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">回圈影片</div>
      <div class="code">追加：layui-anim-loop</div>
    </li>
  </ul>
</body>
</html>
<script src="../layui/layui.js"></script>
<script>
  layui.use('jquery', function () {
    var $ = layui.$;

    //演示影片
    $('.site-doc-icon .layui-anim').on('click', function () {
      var othis = $(this), anim = othis.data('anim');

      //停止回圈
      if (othis.hasClass('layui-anim-loop')) {
        return othis.removeClass(anim);
      }

      othis.removeClass(anim);

      setTimeout(function () {
        othis.addClass(anim);
      });
      //恢復漸隱
      if (anim === 'layui-anim-fadeout') {
        setTimeout(function () {
          othis.removeClass(anim);
        }, 1300);
      }
    });
  });
</script>

10. 顏色選擇器(略)

官網案例地址：https://www.layui.com/demo/colorpicker.html

11. 滑塊(略)

官網案例地址：https://www.layui.com/demo/slider.html

12. 評分(略)

官網案例地址：https://www.layui.com/demo/rate.html

13. 輪播

官網案例地址：https://www.layui.com/demo/carousel.html

案例：
在這里插入圖片描述

<body>
    <br>
    <br>
    <br>
    <div class="layui-carousel" id="test" lay-filter="test4" style="">
        <div carousel-item="">
            <div><img src="./images/liberary.png" width="100%" height="100%"></div>
            <div><img src="./images/liberary.png" width="100%" height="100%"></div>
            <div><img src="./images/liberary.png" width="100%" height="100%"></div>
            <div><img src="./images/liberary.png" width="100%" height="100%"></div>
            <div><img src="./images/liberary.png" width="100%" height="100%"></div>
        </div>
    </div>
    <br>
    <br>
</body>

</html>
<script src="../layui/layui.js"></script>
<script>
    layui.use(['element', 'jquery', 'carousel'], function () {
        var $ = layui.jquery;
        var carousel = layui.carousel;
        var element = layui.element;
        //圖片輪播
        carousel.render({
            elem: '#test'
            , width: '100%'
            , height: '400px'
            , interval: 3000
        });
    });
</script>

14. 代碼修飾器(略)

15. 時間和日期選擇器(略)

16. 表單及其元素 (from/input/select)

官網demo：https://www.layui.com/demo/form.html

直接看demo 就能上手，

17. 彈出層(重點)

LayUI官方檔案：https://www.layui.com/doc/modules/layer.html

彈框：

layer.alert()
提示框(可加圖示)
layer.confirm()
確認框
layer.prompt()
輸入框
layer.tab()
選項卡彈框
layer.photos(options)
相冊層彈框
layer.msg
弱弱的提示框
layer.tips
吸附提示框(可控制上下左右方位，前提必須外邊框足夠大)
layer.open(options)
原始彈框的核心方法

示例：
在這里插入圖片描述

 <br>
 <button type="button" id="btn1" class="layui-btn">alert</button>
 <button type="button" id="btn2" class="layui-btn">confirm</button>
 <button type="button" id="btn3" class="layui-btn">prompt</button>
 <button type="button" id="btn4" class="layui-btn">tab</button>
 <button type="button" id="btn5" class="layui-btn">photos</button>
 <button type="button" id="btn6" class="layui-btn">msg</button>
 <br><br><br>
 <div style="width: 200px;height: 200px;">
     <button type="button" id="btn7" class="layui-btn">tips</button>
 </div>
 <br>

<script src="../layui/layui.js"></script>
<script>
    layui.use(['element', 'jquery', 'carousel', 'layer'], function () {
        var $ = layui.jquery;
        var carousel = layui.carousel;
        var element = layui.element;
        var layer = layui.layer;

        //alert
        $("#btn1").click(function () {
            layer.alert("只是簡單的提示框！");
            layer.alert("加個圖示的提示框", { icon: 6 });
            // 圖示分為1-7
            // 如果還想執行yes回呼,可以放第三個引數
        })

        //confirm
        $("#btn2").click(function () {
            layer.confirm("你確定要退出嗎？", { icon: 3, title: '提示' }, function (index) {
                alert("你選擇了確定")
                layui.close(index);
            });
        })

        //prompt
        $("#btn3").click(function () {
            layer.prompt({
                formType: 2,
                value: '初始值',
                title: '請輸入值',
                area: ['200px', '100px'] //自定義文本域寬高
            }, function (value, index, elem) {
                alert(value); //得到value
                layer.close(index);
            });
        })

        //tab
        $("#btn4").click(function () {
            layer.tab({
                area: ['600px', '300px'],
                tab: [{
                    title: 'TAB1',
                    content: '內容1'
                }, {
                    title: 'TAB2',
                    content: '內容2'
                }, {
                    title: 'TAB3',
                    content: '內容3'
                }]
            });
        })

        //photos
        $("#btn5").click(function () {
            layer.photos("只是簡單的提示框！");
        })

        //msg
        $("#btn6").click(function () {
            layer.msg("弱弱的提示框！");
            layer.msg("帶圖示的弱弱的提示框！",{icon:6});
        })

        //tips
        $("#btn7").click(function () {
            layer.tips("簡單的吸附提示框！",'#btn7',{tips:1});
        })
    });
</script>

layer.open()基礎引數：

title - 標題：型別：String/Array/Boolean，默認：‘資訊’

title支持三種型別的值，若你傳入的是普通的字串，如title :‘我是標題’，那么只會改變標題文本；若你還需要自定義標題區域樣式，那么你可以title: [‘文本’, ‘font-size:18px;’]，陣列第二項可以寫任意css樣式；如果你不想顯示標題欄，你可以title: false

content - 內容：型別：String/DOM/Array，默認：’’

content可傳入的值是靈活多變的，不僅可以傳入普通的html內容，還可以指定DOM，更可以隨著type的不同而不同，譬如：

/!*
 如果是頁面層
 */
layer.open({
  type: 1, 
  content: '傳入任意的文本或html' //這里content是一個普通的String
});
layer.open({
  type: 1,
  content: $('#id') //這里content是一個DOM，注意：最好該元素要存放在body最外層，否則可能被其它的相對元素所影響
});
//Ajax獲取
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: str //注意，如果str是object，那么需要字符拼接，
  });
});
/!*
 如果是iframe層
 */
layer.open({
  type: 2, 
  content: 'http://sentsin.com' //這里content是一個URL，如果你不想讓iframe出現滾動條，你還可以content: ['http://sentsin.com', 'no']
}); 
/!*
 如果是用layer.open執行tips層
 */
layer.open({
  type: 4,
  content: ['內容', '#id'] //陣列第二項即吸附元素選擇器或者DOM
});

skin - 樣式類名：型別：String，默認：’’

skin不僅允許你傳入layer內置的樣式class名，還可以傳入您自定義的class名，這是一個很好的切入點，意味著你可以借助skin輕松完成不同的風格定制，目前layer內置的skin有：layui-layer-lan**layui-layer-molv，未來我們還會選擇性地內置更多，但更推薦您自己來定義，以下是一個自定義風格的簡單例子

//單個使用
layer.open({
  skin: 'demo-class'
});
//全域使用，即所有彈出層都默認采用，但是單個配置skin的優先級更高
layer.config({
  skin: 'demo-class'
})
//CSS 
body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
body .demo-class .layui-layer-btn a{background:#333;}
body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
…
加上body是為了保證優先級，你可以借助Chrome除錯工具，定義更多樣式控制層更多的區域，

area - 寬高：型別：String/Array，默認：‘auto’

在默認狀態下，layer是寬高都自適應的，但當你只想定義寬度時，你可以area: ‘500px’，高度仍然是自適應的，當你寬高都要定義時，你可以area: [‘500px’, ‘300px’]

offset - 坐標：

型別：String/Array，默認：垂直水平居中

offset默認情況下不用設定，但如果你不想垂直水平居中，你還可以進行以下賦值：

值	備注
offset: ‘auto’	默認坐標，即垂直水平居中
offset: ‘100px’	只定義top坐標，水平保持居中
offset: [‘100px’, ‘50px’]	同時定義top、left坐標
offset: ‘t’	快捷設定頂部坐標
offset: ‘r’	快捷設定右邊緣坐標
offset: ‘b’	快捷設定底部坐標
offset: ‘l’	快捷設定左邊緣坐標
offset: ‘lt’	快捷設定左上角
offset: ‘lb’	快捷設定左下角
offset: ‘rt’	快捷設定右上角
offset: ‘rb’	快捷設定右下角

icon - 圖示：資訊框和加載層的私有引數

型別：Number，默認：-1（資訊框）/0（加載層）

資訊框默認不顯示圖示，當你想顯示圖示時，默認皮膚可以傳入0-6如果是加載層，可以傳入0-2，如：
```
//eg1
layer.alert('酷斃了', {icon: 1});
//eg2
layer.msg('不開心，，', {icon: 5});
//eg3
layer.load(1); //風格1的加載
```
time - 自動關閉所需毫秒：型別：Number，默認：0

默認不會自動關閉，當你想自動關閉時，可以time: 5000，即代表5秒后自動關閉，注意單位是毫秒（1秒=1000毫秒）
anim - 彈出影片：型別：Number，默認：0

我們的出場影片全部采用CSS3，這意味著除了ie6-9，其它所有瀏覽器都是支持的，目前anim可支持的影片型別有0-6 如果不想顯示影片，設定 anim: -1 即可，另外需要注意的是，3.0之前的版本用的是 shift 引數

值備注
anim: 0 平滑放大，默認
anim: 1 從上掉落
anim: 2 從最底部往上滑入
anim: 3 從左滑入
anim: 4 從左翻滾
anim: 5 漸顯
anim: 6 抖動
type - 基本層型別：型別：Number，默認：0

layer提供了5種層型別，可傳入的值有：0（資訊框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層），若你采用*layer.open({type: 1})*方式呼叫，則type為必填項（資訊框除外）

值	備注
anim: 0	平滑放大，默認
anim: 1	從上掉落
anim: 2	從最底部往上滑入
anim: 3	從左滑入
anim: 4	從左翻滾
anim: 5	漸顯
anim: 6	抖動

注意彈框也可以用來做表單提交，類似于bootstrap的模態框，其有專門的請求提交型別method:‘post’ 以及回呼函式success:function(),這里可以看下面這篇博客自行了解：

LayUI彈出層表單提交參考demo

18. 資料表格(重點)

LayUI的資料表格可以通過拿到后端回呼的json字串，直接渲染到表格中，并自帶分頁功能，從而節約了后端分頁的負擔！
為方便測驗，這里我采用LayUI 官方提供的json串介面：
https://www.layui.com/demo/table/user/
在這里插入圖片描述
接下來進行表格資料渲染：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>資料表格</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>

<body>
    <br>
    <br>
    <table class="layui-table" id="userTable" lay-filter="userTable"></table>
</body>

</html>
<script src="../layui/layui.js"></script>
<script>
    layui.use(['table'], function () {
        var $ = layui.jquery;
        var table = layui.table;

        // 渲染資料表格
        table.render({
            elem: '#userTable'
            // 請求的json回傳介面，因為直接訪問存在跨域問題
            // 這里我建議在后端配置跨域或者自定義提供json串的介面
            , url: 'http://www.layui.com/demo/table/user/'
            // ,title:"用戶資料表"//匯出資料表格時的標題
            , cols: [[// 資料表格中的內容
                { field: 'id', width: 80, title: 'ID', sort: true }
                , { field: 'username', width: 80, title: '用戶名' }
                , { field: 'sex', width: 80, title: '性別', sort: true }
                , { field: 'city', width: 80, title: '城市' }
                , { field: 'sign', title: '簽名', minWidth: 150 }
                , { field: 'experience', width: 80, title: '積分', sort: true }
                , { field: 'score', width: 80, title: '評分', sort: true }
                , { field: 'classify', width: 80, title: '職業' }
                , { field: 'wealth', width: 135, title: '財富', sort: true }
            ]]
            , page: true// 分頁開啟
        });
    });
</script>

效果展示：
(自帶分頁真的很方便，比我每次花時間寫后端的分頁邏輯便捷多了，與其用mybatisPlus的分頁插件pageHelper不如直接在前端處理分頁，強烈建議根據官網檔案自學一下！)
官網demo鏈接：https://www.layui.com/demo/table.html
官網檔案鏈接：https://www.layui.com/doc/modules/table.html
在這里插入圖片描述

20. 檔案上傳

LayUI 檔案上傳可以單檔案上傳也可以多檔案上傳，對于有springboot基礎的小伙伴，可以閱讀下面這篇博客詳細了解，這里不再贅述，對于沒有檔案上傳下載經驗的小伙伴，建議去學習一下后端如何寫檔案上傳下載介面，在自己親自嘗試！

springboot+LayUI 檔案上傳(單檔案多檔案)

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/182880.html

標籤：python

上一篇：【快手一面二面實習offer面試總結】

下一篇：Day28SSM之CRUD開發版本2的部門增刪改查