layui(諧音:類UI) 是一款採用自身模組規範編寫的前端 UI 框架,遵循原生 HTML/CSS/JS 的書寫與組織形式,門檻極低,拿來即用。非常適合介面的快速開發。
獲得layui 後,將其完整地部署到你的專案目錄(或靜態資源伺服器),你只需要引入下述兩個檔案:
./layui/css/layui.css ./layui/layui.js //提示:如果是采用非模块化方式(最下面有讲解),此处可换成:./layui/layui.all.js
沒錯,不用去管其它任何文件。因為他們(例如各模組)都是在最終使用的時候才會自動載入。
這是一個基本的入門頁面:
<!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>
註:使用layui需要先載入模組使用,上述程式碼中就是預先載入模組!如果 先不載模組就直接layer. 使用的話運行時是會報錯的!找不到layer該物件或找不到方法等其他問題!
layui.use(['layer', 'form'], function(){ var layer = layui.layer ,form = layui.form; });
下面是我使用的程式碼案例:
呼叫layui:
<!--layui--> <link href="/libs/layui/css/layui.css" rel="stylesheet" type="text/css"/> <script src="/libs/layui/layui.js" type="text/javascript"></script>
預先載入:
//layui layer let layuiLayer; //layui预先加载 layui.use(['layer'], function () { layuiLayer = layui.layer; });
使用layui物件:
layuiLayer.open({ title: '提示', content: '请输入名字!' })
以上是Layui使用入門教程的詳細內容。更多資訊請關注PHP中文網其他相關文章!