LayUi的簡單使用

二代鹹魚發表於2020-11-15
UI

LayUi

LayUI 的特點
（1）layui屬於輕量級框架，簡單美觀。適⽤於開發後端模式，它在服務端⻚⾯上有⾮常好的效果。
（2）layui是提供給後端開發⼈員的ui框架，基於DOM驅動。

1.基本的⼊⻔⻚⾯

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-
scale=1">
<title>開始使⽤layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<!-- 你的HTML程式碼 -->
<script src="layui/layui.js"></script>
<script>
// 模組和回撥函式
// ⼀般直接寫在⼀個js⽂件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
});
</script>
</body>
</html>

其中<link rel="stylesheet" href="layui/css/layui.css">是必須引入的，script是呼叫模組和回撥函式的，讓樣式有更多的功能。

初學者在

<script>
</script>

中使用下面的模組，就能直接看出效果

<script>
// 注意：導航 依賴 element 模組，否則⽆法進⾏功能性操作
layui.use('element', function(){
var element = layui.element;
//…
});
</script>

具體的各種方法：
layui官網

相關文章