Home >Web Front-end >Layui Tutorial >How to use layui framework
How to use layui framework
- angryTomOriginal
- 2019-08-01 13:15:477529browse
layui (homophone: UI-like) is a front-end UI framework written using its own module specifications, following the writing and organization form of native HTML/CSS/JS , the threshold is extremely low and you can use it right out of the box. But if you want to use it, you must follow his rules. After all, that person has short hands and can do some tricks, which is also within the rules.
If you want to know more about layui, you can click: layui tutorial
Attached is the layui official website : https://www.layui.com/
After downloading, we will unzip it and take out the layui folder. Open the editor and drop it in.
Then start introducing css files and js files into html. What we need here are the two layui core files layui.css and layui.js.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
</head>
<body>
//模块和回调函数
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
});
</script>
</body>
</html>At this point, we also need to declare the modules and callback functions we need to use. Of course, just refer to the official documentation and choose the effect you want! !
For example:
Next we will end with an example
I gave an example in the official document navigation:
You read that right, I just copied it, and then
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
</head>
<body>
<ul lay-filter="">
<li><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this"><a href="">产品</a></li>
<li><a href="">大数据</a></li>
<li>
<a href="javascript:;">解决方案</a>
<dl> <!-- 二级菜单 -->
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li><a href="">社区</a></li>
</ul>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
//…
});
</script>
</body>
</html>There is no more, just like this, the effect is achieved...
The above is the detailed content of How to use layui framework. For more information, please follow other related articles on the PHP Chinese website!