layui入门（java后生必须掌握的一个后台前端UI框架）

本文转载自查看原文 2020-04-09 10:40 1431

下载完成后，解压将文件夹放入一个springboot项目中

每一个模块具有相应的功能，这个后面自己在细看。接下来来个入门程序

./layui/css/layui.css
./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js（引入以下俩个就能使用了）

<!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">//如果引用的是这个layui.js 调用哪个模块就要在下面重新定义一下
</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>

　　如果引用./layui/layui.all.js

<!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.all.js"></script>
<script>
//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
;!function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
}();
</script> 
</body>
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 Java程序员必备后台前端框架--Layui【从入门到实战】（一） Java程序员必备后台前端框架--Layui【从入门到实战】（二）前端UI框架之layUI学习 Blazor Hero 一个Blazor 后台前后端分离框架，基于 MudBlazor 组件库排名前10的vue前端UI框架框架值得你掌握 layui经典模块化前端UI框架初识手把手教你使用VUE+SpringMVC+Spring+Mybatis+Maven构建属于你自己的电商系统之vue后台前端框架搭建——猿实战01 layui后台框架的搭建用layui搭建的后台框架 layui后台框架的搭建