layui快速上手

Posted 2021-01-17 yagamilight

第一步当然是下载 并引入layui的文件 layui.css   ayui.js  官网中还有一个layui.all.js  等会再看它的用处

引用好了之后可以来看一个基本页面

<link href="layui/css/layui.css" rel="stylesheet" />
<script src="layui/layui.js"></script>
<script>
layui.use([‘layer‘, ‘form‘], function () {
var layer = layui.layer
, form = layui.form;
layer.msg(‘Hello World‘);
});
</script>

如你所见 这个页面跟alert()的功能差不多 实现一个带有样式的弹窗 到这里layui的第一步已经实现了

模块化的用法：下面介绍的是第一种用法模块化，也是官网所推荐的 如

layui.use([‘layer‘, ‘form‘], function () {
var layer = layui.layer
, form = layui.form;
layer.msg(‘Hello World‘);
});

在这一段代码中  就引入了两个模块  layer模块 和form模块 引入多个模块就用数组  单个就 采用单个的写法 ：layui.use(‘form‘, function(){}）

当你在你的 页面引入layui.all.js  时就代表你希望一开始就加载所有的模块 后面就不必再去声明他们了（这种方法省事）

如下的用法 

<script>
; !function () {
var layer = layui.layer
, form = layui.form;

layer.msg(‘Hello World‘);
}();
</script>