layui (homophone: UI-like) is a front-end UI framework written using its own module specifications. It follows the writing and organizational form of native HTML/CSS/JS. The threshold is extremely low and can be used out of the box. Very suitable for rapid development of interfaces.
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 //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.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 entry 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="../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>Note: To use layui, you need to load the module first. The above code is to preload the module! If you use layer directly without loading the module first, an error will be reported at runtime! The layer object cannot be found or the method cannot be found and other problems!
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
});The following is the code example I use:
Calling layui:
<!--layui-->
<link href="/libs/layui/css/layui.css" rel="stylesheet" type="text/css"/>
<script src="/libs/layui/layui.js" type="text/javascript"></script>Preloading:
//layui layer
let layuiLayer;
//layui预先加载
layui.use(['layer'], function () {
layuiLayer = layui.layer;
});Using the layui object:
layuiLayer.open({
title: '提示',
content: '请输入名字！'
})The above is the detailed content 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
SublimeText3 Chinese version
Chinese version, very easy to use
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
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.
Notepad++7.3.1
Easy-to-use and free code editor
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
