介紹
由國人開發(fā)赡勘，16年出廠的框架，其主要提供了很多好看捞镰、方便的樣式闸与，并且基本拿來即用，和Bootstrap有些相似岸售，但個人認為該框架有個極大的好處就是定義了很多前后端交互的樣式接口践樱，如分頁表格，只需在前端配置好接口凸丸，后端則按照定義好的接口規(guī)則返回數(shù)據(jù)拷邢，即可完成頁面的展示，極大減少了后端人員的開發(fā)成本屎慢。
說白了瞭稼，該框架就是為了方便后端人員開發(fā)前端而使用的忽洛。
官方文檔：https://www.layui.com/doc/
Layui、Easyui和Bootstrap對比
https://www.cnblogs.com/helingjuan/p/9352191.html
個人總結（三個框架依次順序）：美且輕环肘、強但丑欲虚、簡且穩(wěn)
環(huán)境導入
// 本地導入：
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
// 導入CSS文件
<script src="./layui/layui.js"></script>
// 導入JS文件
// CDN導入：
<link rel="stylesheet" media="all">
<script src="https://www.layuicdn.com/layui-v2.5.4/layui.js"></script>
<!-- 該CDN引入字體會出現(xiàn)跨域情況，因此一些空間的樣式顯示會出現(xiàn)異常 -->
注：
若將Layui下載到本地進行導入時悔雹，記得在將layui.css和layui.js導入的同時复哆，將其中的字體等也一同導入，以免顯示的結果有異常
使用CDN導入時腌零，提供的CDN鏈接由于配置文件寂恬，在導入字體文件等時會出現(xiàn)跨域請求的問題，所以字體等可能無法正常顯示莱没，因此不推薦初肉，不過這里還是附上CDN鏈接：CDN鏈接
好看的字體圖標
參考文檔：https://www.layui.com/doc/element/icon.html#table
好用的內置模塊
layer彈層
這個是該框架的代表作，常用于一些公告饰躲、提示框牙咏、輪播相冊等場景，舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>彈層使用</title>
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-btn layui-btn-primary layer-demolist" id="test1">我下面會出現(xiàn)一個彈層</div>
</body>
<script src="./layui/layui.js"></script>
<script>
layui.use('layer', function () {
var layer = layui.layer;
layer.tips('上', '#test1', { // 表示在id=test1的地方顯示彈層
tips: 3, // 1/2/3/4分別表示從：上/右/下/左顯示彈層
time: 0, // 設置為0表示不消失
});
});
</script>
</html>
結果圖：
彈層示例圖
多個彈層示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>彈層使用</title>
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body>
<button id="show" class="layui-btn layui-btn-primary">顯示彈層</button>
<button class="layui-btn del">刪除彈層1</button>
<button class="layui-btn layui-btn-normal del">刪除彈層2</button>
<button class="layui-btn layui-btn-warm del">刪除彈層3</button>
<button class="layui-btn layui-btn-danger del">刪除彈層4</button>
<br><br><br>
<center>
<div class="layui-btn layui-btn-primary layer-demolist" id="test1">我上面會出現(xiàn)一個彈層</div>
<div class="layui-btn layui-btn-primary layer-demolist" id="test2">我右面會出現(xiàn)一個彈層</div>
<br>
<div class="layui-btn layui-btn-primary layer-demolist" id="test3">我下面會出現(xiàn)一個彈層</div>
<div class="layui-btn layui-btn-primary layer-demolist" id="test4">我左面會出現(xiàn)一個彈層</div>
</center>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="./layui/layui.js"></script>
<script>
layui.use('layer', function () {
$('#show').click(function () {
for (i = 1; i <= 4; i++) {
layui.layer.tips(i, '#test' + i, { // 表示在id=test1的地方顯示彈層
tips: i, // 1/2/3/4分別表示從：上/右/下/左顯示彈層
// area: ['200px', '20px'], // 設置長高
time: 0, // 設置為0表示不消失
tipsMore: true, //支持多個彈層
success: function (layero, index) {
// console.log(layero, index);
layero.addClass(i + "-error"); // 添加一個class
layero.children().eq(0).removeAttr("style");
layero.children().eq(0).css("line-height", "20px"); // 設置行高
// 給當前的標簽設置id及樣式
}
});
}
});
$('.del').click(function () {
current = $(this).index();
$("." + current + '-error').remove();
// 刪除按鈕對應彈層嘹裂，這里沒有使用官方提供的close方法
// 因為close方法是根據(jù)彈層的索引來進行刪除
// 但是每點擊依次顯示彈層妄壶，就會多4個彈層，那么其將無法把你希望的彈層都刪除
})
});
</script>
</html>
結果圖：
多個彈層示例
樣式參考文檔：https://www.layui.com/demo/layer.html
更多使用示例：http://layer.layui.com/
日歷控件示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layDate快速使用</title>
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-inline"> <!-- 注意：這一層元素并不是必須的 -->
<input type="text" class="layui-input" id="test1">
</div>
<script src="./layui/layui.js"></script>
<script>
layui.use('laydate', function () {
var laydate = layui.laydate;
//執(zhí)行一個laydate實例
laydate.render({
elem: '#test1', //指定元素
type: 'datetime'
});
});
</script>
</body>
</html>
結果圖：
日歷示例
前后端結合完整示例-Flask+Layui實現(xiàn)分頁表格
后端代碼
# -*- coding: utf-8 -*-
from flask import Flask, make_response, request
app = Flask(__name__)
@app.route("/aaaaa")
def xxx():
page = int(request.args["page"])
limit = int(request.args["limit"])
aaa = {"code":0,"msg":"","data":[{"id":10000,"username":"user-0","sex":"女","city":"城市-0", "sign":"簽名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"簽名-1","experience":884,"logins":58,"wealth":64928690,"classify":"詞人","score":27},{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"簽名-2","experience":650,"logins":77,"wealth":6298078,"classify":"醬油","score":31},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"簽名-3","experience":362,"logins":157,"wealth":37117017,"classify":"詩人","score":68},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"簽名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6},{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"簽名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87},{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"簽名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34},{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"簽名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28},{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"簽名-8","experience":951,"logins":133,"wealth":16503371,"classify":"詞人","score":14},{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"簽名-9","experience":484,"logins":25,"wealth":86801934,"classify":"詞人","score":75},{"id":10010,"username":"user-10","sex":"女","city":"城市-10","sign":"簽名-10","experience":1016,"logins":182,"wealth":71294671,"classify":"詩人","score":34},{"id":10011,"username":"user-11","sex":"女","city":"城市-11","sign":"簽名-11","experience":492,"logins":107,"wealth":8062783,"classify":"詩人","score":6},{"id":10012,"username":"user-12","sex":"女","city":"城市-12","sign":"簽名-12","experience":106,"logins":176,"wealth":42622704,"classify":"詞人","score":54},{"id":10013,"username":"user-13","sex":"男","city":"城市-13","sign":"簽名-13","experience":1047,"logins":94,"wealth":59508583,"classify":"詩人","score":63},{"id":10014,"username":"user-14","sex":"男","city":"城市-14","sign":"簽名-14","experience":873,"logins":116,"wealth":72549912,"classify":"詞人","score":8},{"id":10015,"username":"user-15","sex":"女","city":"城市-15","sign":"簽名-15","experience":1068,"logins":27,"wealth":52737025,"classify":"作家","score":28},{"id":10016,"username":"user-16","sex":"女","city":"城市-16","sign":"簽名-16","experience":862,"logins":168,"wealth":37069775,"classify":"醬油","score":86},{"id":10017,"username":"user-17","sex":"女","city":"城市-17","sign":"簽名-17","experience":1060,"logins":187,"wealth":66099525,"classify":"作家","score":69},{"id":10018,"username":"user-18","sex":"女","city":"城市-18","sign":"簽名-18","experience":866,"logins":88,"wealth":81722326,"classify":"詞人","score":74},{"id":10019,"username":"user-19","sex":"女","city":"城市-19","sign":"簽名-19","experience":682,"logins":106,"wealth":68647362,"classify":"詞人","score":51},{"id":10020,"username":"user-20","sex":"男","city":"城市-20","sign":"簽名-20","experience":770,"logins":24,"wealth":92420248,"classify":"詩人","score":87},{"id":10021,"username":"user-21","sex":"男","city":"城市-21","sign":"簽名-21","experience":184,"logins":131,"wealth":71566045,"classify":"詞人","score":99},{"id":10022,"username":"user-22","sex":"男","city":"城市-22","sign":"簽名-22","experience":739,"logins":152,"wealth":60907929,"classify":"作家","score":18},{"id":10023,"username":"user-23","sex":"女","city":"城市-23","sign":"簽名-23","experience":127,"logins":82,"wealth":14765943,"classify":"作家","score":30},{"id":10024,"username":"user-24","sex":"女","city":"城市-24","sign":"簽名-24","experience":212,"logins":133,"wealth":59011052,"classify":"詞人","score":76},{"id":10025,"username":"user-25","sex":"女","city":"城市-25","sign":"簽名-25","experience":938,"logins":182,"wealth":91183097,"classify":"作家","score":69},{"id":10026,"username":"user-26","sex":"男","city":"城市-26","sign":"簽名-26","experience":978,"logins":7,"wealth":48008413,"classify":"作家","score":65},{"id":10027,"username":"user-27","sex":"女","city":"城市-27","sign":"簽名-27","experience":371,"logins":44,"wealth":64419691,"classify":"詩人","score":60},{"id":10028,"username":"user-28","sex":"女","city":"城市-28","sign":"簽名-28","experience":977,"logins":21,"wealth":75935022,"classify":"作家","score":37},{"id":10029,"username":"user-29","sex":"男","city":"城市-29","sign":"簽名-29","experience":647,"logins":107,"wealth":97450636,"classify":"醬油","score":27}]}
aaa["count"] = len(aaa["data"])
aaa["data"] = aaa["data"][(page-1)*10: (page-1)*10 + limit]
import json
rst = make_response(json.dumps(aaa))
rst.headers['Access-Control-Allow-Origin'] = '*'
return rst
if __name__ == '__main__':
app.run()
前端代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layPage快速使用</title>
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body>
<table id="demo" lay-filter="test"></table>
<div id="test1"></div>
<script src="./layui/layui.js"></script>
<script>
layui.use('table', function () {
var table = layui.table;
//第一個實例
table.render({
elem: '#demo'
, height: 500
, url: 'http://127.0.0.1:5000/aaaaa' //數(shù)據(jù)接口
, page: true //開啟分頁
, limit: 10 //數(shù)據(jù)總數(shù)寄狼，從服務端得到
, loading: false
, LAY_CHECKED: true
, cols: [[ //表頭
{field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
, {field: 'username', title: '用戶名', width: 80}
, {field: 'sex', title: '性別', width: 80, sort: true}
, {field: 'city', title: '城市', width: 80}
, {field: 'sign', title: '簽名', width: 177}
, {field: 'experience', title: '積分', width: 80, sort: true}
, {field: 'score', title: '評分', width: 80, sort: true}
, {field: 'classify', title: '職業(yè)', width: 80}
, {field: 'wealth', title: '財富', width: 135, sort: true}
]]
});
});
</script>
</body>
</html>
結果圖：
分頁表格示例
文件上傳
支持異步上傳丁寄，無需與其他表單共存
參考：https://www.layui.com/doc/modules/upload.html
樹形圖
圖片示例：
樹形圖示例
參考：https://www.layui.com/doc/modules/tree.html
顏色選擇器
圖片示例：
顏色選擇器示例
參考：https://www.layui.com/doc/modules/colorpicker.html
分頁導航欄
圖片示例：
分頁導航欄示例
參考：https://www.layui.com/doc/modules/element.html
評分組件
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>評分使用</title>
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body>
<div id="test1"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="./layui/layui.js"></script>
<script>
layui.use('rate', function () {
var rate = layui.rate;
var ins1 = rate.render({
elem: '#test1', //綁定元素
value: 3, // 默認三顆星
choose: function (value) {
console.log(value); // 點擊輸出評分
}
});
});
</script>
</html>
結果圖：
評分組件示例
參考：https://www.layui.com/doc/modules/rate.html
工具集
固定塊
可以固定一個圖框在網(wǎng)頁的某個位置（有點像IPhone里固定在屏幕的灰色圈圈），點擊后實現(xiàn)某個功能泊愧，舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定塊使用</title>
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body>
</body>
<script src="./layui/layui.js"></script>
<script>
layui.use('util', function () {
var util = layui.util;
util.fixbar({
bar1: true
, css: {left: 0, top: 300}
, click: function (type) {
console.log(type);
if (type === 'bar1') {
alert('點擊了bar1')
}
}
});
});
</script>
</html>
結果圖：
固定塊示例
更多參考文檔：https://www.layui.com/doc/modules/util.html
代碼塊
即讓代碼顯示出來伊磺，舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>代碼塊使用</title>
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body>
<div id="test1" class="layui-code">print("hello world!")<br>
exit()
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="./layui/layui.js"></script>
<script>
layui.use('code', function () { //加載code模塊
layui.code(); //引用code方法
});
</script>
</html>
結果圖：
代碼塊示例
輪播圖
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>輪播圖使用</title>
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-carousel" id="test1">
<div carousel-item>
<div style="background: red;">條目1</div>
<div style="background: green;">條目2</div>
<div style="background: blue;">條目3</div>
<div style="background: yellow;">條目4</div>
<div style="background: purple;">條目5</div>
</div>
</div>
</body>
<script src="./layui/layui.js"></script>
<script>
layui.use('carousel', function () {
var carousel = layui.carousel;
//建造實例
carousel.render({
elem: '#test1'
, width: '100%' //設置容器寬度
, arrow: 'always' //始終顯示箭頭
});
});
</script>
</html>
結果圖：
輪播圖示例
Layui踩坑記錄
使用彈層時第一次的效果不對，之后又沒問題
原因：第一次執(zhí)行時資源沒有加載完畢
解決辦法：把彈層功能放在layer.ready中執(zhí)行删咱，舉例：
layui.use('layer', function () {
let layer = layui.layer;
layer.ready(function () {
// 將內容放在ready方法里
layer.msg("測試", {
time: 0,
area: ['300px', '150px'],
shade: [0.6, '#000', true],
icon: 7,
shadeClose: true,
btn: ['關閉']
});
})
});
