layui 概念入門總結

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
>
<
script 
src="build/layui.js"
>
script
>
<
script
>
//一般直接寫在乙個js檔案中
layui.use([
'layer', 
'form
'], 
function
());
script
>
body
>
html
>

規範化的用法（推薦）如果你想快速使用layui的元件，你還是跟平時一樣script標籤引入你的js檔案，然後在你的js檔案中使用layui的元件。但我們更推薦你遵循layui的模組規範，建立乙個自己的模組作為入口：

<
script
>
layui.config().use(
'index
'); 
//載入入口
script
>

上述的 index 即為你 /res/js/modules/ 目錄下的 index.js，它的內容應該如下：

<
script
>/**
專案js主入口
以依賴layui的layer和form模組為例**/
layui.define([
'layer', 
'form
'], 
function
(exports)); 
//注意，這裡是模組輸出的核心，模組名必須和use時的模組名一致
}); 
script
>

如果你覺得layui的模組化還是有點囉嗦，木有關係的親。layui考慮到了像你一樣的猿群，我們將layui.js及所有模組單獨打包合併成了乙個完整的js檔案，用的時候直接引入這乙個檔案即可。當你採用這樣的方式，你無需再通過layui.use載入模組，直接使用即可，如：

<
script 
src="../layui/lay/dest/layui.all.js"
>
script
>
<
script
>;!
function
()();
script
>

但你必須知道，這種使用方式，意味著layui的模組化已經失去了它的意義。但不可否認，它比什麼都來的簡單。

好了，不管你採用什麼樣的方式，從現在開始，盡情地使用layui吧！

layui是乙個前端框架。layui.layer-是其下的乙個彈層元件：

參考首頁介紹-概念（分類）！

更多關於layui.layer-彈出層元件內容參見：

更多layui元件內容參見：

layui 概念入門總結

layui簡單入門

layui使用總結

從基礎到入門的 LayUI

layui 概念 入門 總結

layui簡單入門

layui使用總結

從基礎到入門 的 LayUI

相關推薦

layui 概念入門總結

從基礎到入門的 LayUI