Get Layui
You can download the latest version of Layui on the official website homepage, or you can go through GitHub gets the open source package for Layui. Currently, only these two resource channels are maintained simultaneously. Generally, if you are using it for actual projects, it is recommended that you download it directly from the official website. The structure of layui after construction (that is, the package you obtained)
├─css //css目录
│ └─modules //模块css目录（一般如果模块相对较大，我们会单独提取）
│ ├─laydate
│ ├─layer
│ │ └─default
│ └─layim
│ └─skin
├─font //字体图标目录
├─images //图片资源目录（一些表情等）
│ └─face
└─lay //JS目录
│ ├─dest //经过合并的完整模块
│ └─modules //各模块/组件
└─layui.jsGet started quickly
After obtaining layui, deploy it completely to your project directory (or Static resource server), you only need to introduce the following two files:
./layui/css/layui.css ./layui/layui.js
Yes, you don’t need to worry about any other files. Because they (such as each module) are automatically loaded when they are finally used. This is a basic introductory page:
<!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>Standardized usage (recommended)
If you want to use Layui components quickly, you can still introduce the script tag as usual Your js file, and then use layui's components in your js file. But we recommend that you follow Layui's module specifications and create your own module as the entrance:
<script>
layui.config({
base: '/res/js/modules/' //你的模块目录
}).use('index'); //加载入口
</script>The above index is the index.js in your /res/js/modules/ directory, and its content should be As follows:
<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>Simple and rough usage
If you think Layui’s modularity is still a bit verbose, it doesn’t matter. Layui takes into account the apes like you. We package and merge layui.js and all modules separately into a complete js file. You can directly import this file when using it. When you adopt this method, you no longer need to load the module through layui.use, you can use it directly, such as:
<script src="../layui/lay/dest/layui.all.js"></script>
<script>
;!function(){
//当使用了 layui.all.js，无需再执行layui.use()方法
var from = layui.form()
,layer = layui.layer;
//…
}();
</script>But you must know that this method of use means that the modularity of Layui has been lost. its meaning. But it is undeniable that it is simpler than anything else.
For more layui knowledge, please pay attention to the layui usage tutorial column.
The above is the detailed content of Summary of getting started with layui. For more information, please follow other related articles on the PHP Chinese website!
How do I use Layui's flow module for infinite scrolling?Mar 18, 2025 pm 01:01 PMThe article discusses using Layui's flow module for infinite scrolling, covering setup, best practices, performance optimization, and customization for enhanced user experience.
How do I use Layui's element module to create tabs, accordions, and progress bars?Mar 18, 2025 pm 01:00 PMThe article details how to use Layui's element module to create and customize UI elements like tabs, accordions, and progress bars, highlighting HTML structures, initialization, and common pitfalls to avoid.Character count: 159
How do I customize the appearance and behavior of Layui's carousel module?Mar 18, 2025 pm 12:59 PMThe article discusses customizing Layui's carousel module, focusing on CSS and JavaScript modifications for appearance and behavior, including transition effects, autoplay settings, and adding custom navigation controls.
How do I use Layui's carousel module to create image sliders?Mar 18, 2025 pm 12:58 PMThe article guides on using Layui's carousel module for image sliders, detailing steps for setup, customization options, implementing autoplay and navigation, and performance optimization strategies.
How do I configure Layui's upload module to restrict file types and sizes?Mar 18, 2025 pm 12:57 PMThe article discusses configuring Layui's upload module to restrict file types and sizes using accept, exts, and size properties, and customizing error messages for violations.
How do I use Layui's layer module to create modal windows and dialog boxes?Mar 18, 2025 pm 12:46 PMThe article explains how to use Layui's layer module to create modal windows and dialog boxes, detailing setup, types, customization, and common pitfalls to avoid.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
