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中文網其他相關文章！
如何使用Layui的元素模塊來創建選項卡，手風琴和進度條？Mar 18, 2025 pm 01:00 PM本文詳細介紹瞭如何使用Layui的元素模塊來創建和自定義UI元素，例如選項卡，手風琴和進度條，突出顯示HTML結構，初始化和常見的陷阱，以避免。
如何自定義Layui旋轉木製模塊的外觀和行為？Mar 18, 2025 pm 12:59 PM本文討論了自定義Layui的Carousel模塊，重點介紹了外觀和行為的CSS和JavaScript修改，包括過渡效果，自動播放設置以及添加自定義導航控件。
如何使用Layui的旋轉木載模塊來創建圖像滑塊？Mar 18, 2025 pm 12:58 PM該文章指導使用Layui的Carousel模塊用於圖像滑塊，詳細介紹設置的步驟，自定義選項，實現自動播放和導航以及性能優化策略。
如何將Layui的上傳模塊配置為限製文件類型和尺寸？Mar 18, 2025 pm 12:57 PM本文討論了使用Accept，Exts和Size屬性來限制Layui的上傳模塊，以限製文件類型和尺寸，並自定義錯誤消息以違反。
如何使用Layui的圖層模塊來創建模態窗口和對話框？Mar 18, 2025 pm 12:46 PM本文介紹瞭如何使用Layui的圖層模塊創建模態窗口和對話框，詳細設置，類型，自定義和常見的陷阱要避免。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
Dreamweaver Mac版
視覺化網頁開發工具
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
