【Layui】01 快速入門
阿新 • • 發佈：2020-07-22
【原生JavaScript與 JQuery】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <button id="btn">一個問題</button> <script type="text/javascript"> document.getElementById("btn").onclick = function () { alert("原始JS事件觸發"); } </script> </body> </html>
效果：
如果使用JQuery：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <button id="btn">一個問題</button> <script type="text/javascript"> $(function () { $("#btn").click(function () { alert("JQuery觸發！"); }); });</script> </body> </html>
效果：
【使用Layui】
首先需要匯入Layui的資源，這是使用CDN連線：
<script src="https://www.layuicdn.com/layui/layui.js"></script> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
然後宣告Layui模組載入：
layui.use('layer', function(){
let layer = layui.layer;
});
使用Layer模組的方法呼叫：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script src="https://www.layuicdn.com/layui/layui.js"></script> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <button id="btn">按鈕</button> <script type="text/javascript"> // 載入Layer模組 layui.use('layer', function(){ let layer = layui.layer; }); $(function () { $("#btn").click(function () { layer.alert("這是layer的警告彈窗"); }); }); </script> </body> </html>
效果：
使用帶有樣式的彈窗：
<button id="btn">按鈕</button> <br> <button id="btn2">按鈕2</button> <script type="text/javascript"> // 載入Layer模組 layui.use('layer', function(){ let layer = layui.layer; }); $(function () { $("#btn").click(function () { layer.alert("這是layer的警告彈窗"); }); //第三方擴充套件面板 $("#btn2").click(function () { layer.alert('內容', { icon: 1, skin: 'layer-ext-moon' //該面板由layer.seaning.com友情擴充套件。關於面板的擴充套件規則，去這裡查閱 }); }); }); </script>
效果：
確認框和訊息框：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script src="https://www.layuicdn.com/layui/layui.js"></script> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <p> <button id="confirm-btn">確認</button> </p> <script type="text/javascript"> layui.use('layer', function(){ let layer = layui.layer; }); $(function () { // 詢問框 / 確認框 $("#confirm-btn").click(function () { layer.confirm('您是如何看待前端開發？', { btn: ['重要','奇葩'] //按鈕 }, function(){ layer.msg('的確很重要', {icon: 1}); // 訊息框在3秒後關閉 }, function(){ layer.msg('也可以這樣', { time: 20000, //20s後自動關閉 btn: ['明白了', '知道了'] }); }); }); }); </script> </body> </html>
整個彈窗一類的案例演示都在這裡：
https://layer.layui.com/
【LayDate】
下載LayDate元件：
https://www.layui.com/laydate/
使用元件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./../Resource/laydate/laydate.js"></script> <!-- 改成你的路徑 --> </head> <body> <input type="text" id="input-date"> <script> //執行一個laydate例項 laydate.render({ elem: '#input-date' //指定元素 }); </script> </body> </html>
甚至不需要宣告模組直接導包使用：
日期與時間的樣式也非常多：
https://www.layui.com/laydate/
【Layui資原始檔引用】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./../Resource/layui-v2.5.6/layui/css/layui.css"> <script type="text/javascript" src="./../Resource/layui-v2.5.6/layui/layui.js"></script> </head> <body> </body> </html>
我們需要宣告使用的模組：
例如開頭使用的這個：
layui.use('layer', function(){
let layer = layui.layer;
});
Layui提供了這些模組：
彈出層 layer
日期與時間選擇 laydate
即時通訊 layim
分頁 laypage
模板引擎 laytpl
資料表格 table
表單 form
檔案上傳 upload
穿梭框 transfer
樹形元件 tree
顏色選擇器 colorpicker
常用元素操作 element
滑塊 slider
評分 rate
輪播 carousel
流載入 flow
工具集 util
程式碼修飾器 code
常用的模組有這些【對後端來說。。。】
彈出層 layer
分頁 laypage
資料表格 table
表單 form
檔案上傳 upload
樹形元件 tree
日期與時間選擇 laydate
宣告的模組變數一一對應
例如我需要使用這些模組：就都寫好一樣的標識：
layui.use(['layer', 'form', 'table'], function () { let layer = layui.layer; let form = layui.form; let table = layui.table; });