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;"></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"></i> 添加</button>
<button type="button" class="layui-btn"><i class="layui-icon">ဂ</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"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
</div>
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon"></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-rowlayui-col-space15代表列之間的間距，距離范圍： space0-space30layui-col-md6代表一列 md1-md12 代表當前列占整行的x/12layui-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"></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"></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"></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"></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為必填項（資訊框除外）
注意彈框也可以用來做表單提交，類似于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/qianduan/180820.html
標籤：其他
上一篇：大三收官之作——考蟲專案答辯