【LayUI】LayUI - 前端UI框架
LayUI
- 一、引言
- 1.1 介绍
- 二、环境搭建
- 2.1 下载
- 2.2 导入依赖
- 三、页面元素
- 3.1 布局
- 3.2 字体图标
- 3.3 按钮
- 3.4 表单
- 3.5 数据表格
- 3.5.1 动态表格
- 3.5.2 分页参数
- 3.5.3 显示工具栏
- 3.5.4 操作按钮
- 3.5.5 操作按钮回调
- 3.6 导航
- 3.7 动画
- 四、内置模块
- 4.1 layer
- 4.1.1 弹窗方法
- 4.1.2 弹窗属性
- 4.2 layDate
- 4.3 upload
- 4.4 carousel
一、引言
1.1 介绍
官网：https://www.layui.com/
LayUI是一款经典模块化前端UI框架，只需定义简单的HTML、CSS、JS即可实现很复杂的前端效果，使得前端页面的制作变得更加简单。
二、环境搭建
2.1 下载
官网点击立即下载即可
2.2 导入依赖
解压LayUI，将其中的layui目录导入到webapp中
三、页面元素
3.1 布局
响应式栅格布局，每行分12等分
布局
常规布局（以中型屏幕桌面为例）：
你的内容 9/12
你的内容 3/12
移动设备、平板、桌面端的不同表现：
移动：6/12 | 平板：6/12 | 桌面：4/12
移动：6/12 | 平板：6/12 | 桌面：4/12
移动：4/12 | 平板：12/12 | 桌面：4/12
移动：4/12 | 平板：7/12 | 桌面：8/12
移动：4/12 | 平板：5/12 | 桌面：4/12
3.2 字体图标
字体
3.3 按钮
按钮
3.4 表单
表单
3.5 数据表格
3.5.1 动态表格
数据格式如下：
- code:0 代表查询成功，为1时，会显示msg中的内容
- count是为分页准备的··，共有多少天数据
{\"msg\":\"no data\",\n" +
"\"code\":0,\n" +
"\"data\":[{\"id\":1,\"username\":\"shine1\",\"sex\":\"男\",\"city\":\"保定\",\"score\":100},\n" +
"{\"id\":2,\"username\":\"shine2\",\"sex\":\"女\",\"city\":\"石家庄\",\"score\":100},\n" +
"{\"id\":3,\"username\":\"shine3\",\"sex\":\"男\",\"city\":\"邢台\",\"score\":100}],\n" +
"\"count\":100}
3.5.2 分页参数
分页条细节定制
3.5.3 显示工具栏
右上角工具按钮 toolbar:true
3.5.4 操作按钮
为每行增加操作按钮
3.5.5 操作按钮回调
按钮的单击事件
3.6 导航
水平导航条：class=“layui-nav”
垂直导航需要追加class：layui-nav-tree
侧边导航需要追加class：layui-nav-tree layui-nav-side
导航
3.7 动画
动画
aa
bb
四、内置模块
4.1 layer
4.1.1 弹窗方法
弹窗方法 msg()、alert()、confirm()
4.1.2 弹窗属性
- type 弹窗类型，可选值0-4
- title 弹窗标题，可选值text/array
- content 弹窗内容，可选值text/html/dom
4.2 layDate
日期框
日期格式
4.3 upload
上传按钮
文件或图片上传
@RequestMapping("upload")
public Map upload(@RequestParam("file") MultipartFile photo, Model model, HttpServletRequest request)throws Exception{
//获取上传文件的名称
String filename = photo.getOriginalFilename();
filename = new String(filename.getBytes("iso-8859-1"),"utf-8");
model.addAttribute("filename",filename);
System.out.println(filename);
//修改上传文件的名称
//filename+= UUID.randomUUID().toString().replace("-","");
//上传
//设置上传路径
String path = "D:\\Downloads\\install\\Learning Software\\Tomcat\\apache-tomcat-8.5.53-windows-x64-file\\apache-tomcat-8.5.53\\webapps\\img";
try {
photo.transferTo(new File(path,filename));
} catch (IOException e) {
e.printStackTrace();
}
HashMap map = new HashMap<>();
map.put("msg","ok");
map.put("code","1");
return map;
}
4.4 carousel
轮播图
条目1
条目2
条目3
条目4
条目5