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!
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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Dreamweaver Mac version
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
WebStorm Mac version
Useful JavaScript development tools
Atom editor mac version download
The most popular open source editor
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
