layui教程:http://www.dosrun.com/layui/
獲得 Layui
你可以在官網首頁下載到 Layui 的最新版,也可以通過 GitHub 得到Layui的開源包。目前只同步維護這兩處資源渠道。一般如果你是用於實際項目,推薦你直接從官網下載。layui構建后的結構(也就是你獲得的包)
├─css //css目錄
│ └─modules //模塊css目錄(一般如果模塊相對較大,我們會單獨提取)
│ ├─laydate
│ ├─layer
│ │ └─default
│ └─layim
│ └─skin
├─font //字體圖標目錄
├─images //圖片資源目錄(一些表情等)
│ └─face
└─lay //JS目錄
│ ├─dest //經過合並的完整模塊
│ └─modules //各模塊/組件
└─layui.js
快速上手
獲得layui后,將其完整地部署到你的項目目錄(或靜態資源服務器),你只需要引入下述兩個文件:
./layui/css/layui.css
./layui/layui.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="build/css/layui.css">
</head>
<!-- 你的HTML代碼 -->
<script src="build/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的組件,你還是跟平時一樣script標簽引入你的js文件,然后在你的js文件中使用layui的組件。但我們更推薦你遵循Layui的模塊規范,建立一個自己的模塊作為入口:
<script> layui.config({ base: '/res/js/modules/' //你的模塊目錄
}).use('index'); //加載入口
</script>
上述的 index 即為你 /res/js/modules/ 目錄下的 index.js,它的內容應該如下:
<script>
/** 項目JS主入口 以依賴Layui的layer和form模塊為例 **/ layui.define(['layer', 'form'], function(exports){ var layer = layui.layer ,form = layui.form(); layer.msg('Hello World'); exports('index', {}); //注意,這里是模塊輸出的核心,模塊名必須和use時的模塊名一致
}); </script>
簡單粗暴用法
如果你覺得Layui的模塊化還是有點啰嗦,木有關系的親。Layui考慮到了像你一樣的猿群,我們將layui.js及所有模塊單獨打包合並成了一個完整的js文件,用的時候直接引入這一個文件即可。當你采用這樣的方式,你無需再通過layui.use加載模塊,直接使用即可,如:
<script src="../layui/lay/dest/layui.all.js"></script>
<script> ;!function(){ //當使用了 layui.all.js,無需再執行layui.use()方法
var from = layui.form() ,layer = layui.layer; //…
}(); </script>
但你必須知道,這種使用方式,意味着Layui的模塊化已經失去了它的意義。但不可否認,它比什么都來的簡單。
好了,不管你采用什么樣的方式,從現在開始,盡情地使用Layui吧!
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
layui是一個前端框架。layui.layer-是其下的一個彈層組件 :參考http://www.dosrun.com/layui/ 首頁介紹-概念(分類)!
更多關於layui.layer-彈出層組件內容參見:http://www.cnblogs.com/xiangru0921/p/6728768.html
更多layui組件內容參見:http://www.dosrun.com/layui/
=========================================================================