layui的快速使用

2025-10-21 16:29:14

1、官网下载layui的源码文件,可以在百度搜索下载,下载完成后解压文件:如图文件目录格式,可以直接将js和css文件引入项目中使用,

layui的快速使用

2、实例:引入layui的核心文件,

<script src="layui/layui/layui.js"></script>

<link href="layui/layui/css/layui.css">

如何在hbuilder中引入layui的核心文件,zhi'xu只需要引入核心文件即可,其他的在使用过程中会自动引入,

layui的快速使用

3、页面加载完成直接运行弹出hello world。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script src="layui/layui/layui.js"></script>

<link href="layui/layui/css/layui.css">

</head>

<body>

<body>

<script>

//一般直接写在一个js文件中

layui.use(['layer', 'form'], function(){

  var layer = layui.layer;

  layer.msg('Hello World');

});

</script> 

</body>

</html>

layui的快速使用

4、layui.use(['layer', 'form'], function(){

  var layer = layui.layer;

  layer.msg('Hello World');

});

官网首页的实例:layui.use为固定格式,[layer,form]分别为自动引入的layer.js和form.js文件,为框架自动引入

layui的快速使用

5、如果你想采用非模块化方式(即所有模块一次性加载,尽管我们并不推荐你这么做),你也可以按照下面的方式使用:

<script>

;!function(){

  var layer = layui.layer

  layer.msg('Hello World');

}();

</script> 

layui的快速使用

6、注意<script></script>中的格式;!是不能够丢的,在最后还有()这是layui的固定格式,也是必须有的

layui的快速使用

7、Layui在解析HTML元素时,必须充分确保其结构是被支持的。需要遵循layui的解析格式。具体参照官网;

layui的快速使用

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢