【LayUI】LayUI - 前端UI框架
程序员文章站
2022-03-02 12:15:24
...
LayUI
一、引言
1.1 介绍
官网：https://www.layui.com/
LayUI是一款经典模块化前端UI框架，只需定义简单的HTML、CSS\JS即可实现很复杂的前端效果，使得前端页面的制作变得更加简单。
二、环境搭建
2.1 下载
官网点击立即下载即可
2.2 导入依赖
解压LayUI，将其中的layui目录导入到webapp中
<!-- 导入js和css -->
<script src="layui/layui.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" >
三、页面元素
3.1 布局
响应式栅格布局，每行分12等分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局</title>
<!-- 导入js和css -->
<script src="layui/layui.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" >
</head>
<body>
<div class="layui-container">
常规布局（以中型屏幕桌面为例）：
<div class="layui-row">
<div class="layui-col-md9">
你的内容 9/12
</div>
<div class="layui-col-md3">
你的内容 3/12
</div>
</div>
移动设备、平板、桌面端的不同表现：
<div class="layui-row">
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
移动：6/12 | 平板：6/12 | 桌面：4/12
</div>
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
移动：6/12 | 平板：6/12 | 桌面：4/12
</div>
<div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
移动：4/12 | 平板：12/12 | 桌面：4/12
</div>
<div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
移动：4/12 | 平板：7/12 | 桌面：8/12
</div>
<div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
移动：4/12 | 平板：5/12 | 桌面：4/12
</div>
</div>
</div>
</body>
</html>
3.2 字体图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体</title>
<!-- 导入js和css -->
<script src="layui/layui.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" >
</head>
<body>
<i class="layui-icon layui-icon-face-smile"></i>
<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>
</body>
</html>
3.3 按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮</title>
<!-- 导入js和css -->
<script src="layui/layui.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" >
</head>
<body>
<div class="layui-btn-group">
<button type="button" class="layui-btn">增加</button>
<button type="button" class="layui-btn">编辑</button>
<button type="button" class="layui-btn">删除</button>
</div>
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
</div>
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon"></i>
</button>
</div>
</body>
</html>
3.4 表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
<!-- 导入js和css -->
<script src="layui/layui.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" >
</head>
<body>
<form class="layui-form" action="demo01.html">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">辅助文字</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select name="city" lay-verify="required">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读" checked>
<input type="checkbox" name="like[dai]" title="发呆">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="switch" lay-skin="switch">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-block">
<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<script>
//必须要导入form模板，才能保证表单正常渲染
layui.use('form', function(){
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function(data){//data就是表单中的所有数据
layer.msg(JSON.stringify(data.field));
return true;//true表示跳转到action的对应路径，false表示不跳转
});
});
</script>
</body>
</html>
3.5 数据表格
3.5.1 动态表格
<script>
// 必须要导入 table模块 layui.use('table',...)
layui.use('table', function(){
var table = layui.table;
// 为表格填充数据
table.render({
elem: '#demo'
,height: 312
,url: 'data' //获取数据
,page: true//开启分页
,cols: [[ //表头
{field:'id', width:80, title: 'ID', sort: true}
,{field:'username', width:80, title: '用户名'}
,{field:'sex', width:80, title: '性别', sort: true}
,{field:'city', title: '城市'} //没定义宽度则占满剩余所有宽度，都不定义则所有列均分
,{field:'score',width:80, title: '评分', sort: true}
]]
});
});
</script>
数据格式如下：
- 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 分页参数
分页条细节定制
<script>
// 必须要导入 table模块 layui.use('table',...)
layui.use('table', function(){
var table = layui.table;
// 为表格填充数据
table.render({
elem: '#demo'
,height: 312
,url: 'data' //获取数据
,page: {limit:5//每页显示1条(向后台传值，每页显示条数)
,limits:[1,2,3] //可选每页条数
,first: '首页' //首页显示文字，默认显示页号
,last: '尾页'
,prev: '<em>←</em>' //上一页显示内容，默认显示 > <
,next: '<i class="layui-icon layui-icon-next"></i>'
,layout:['prev', 'page', 'next','count','limit','skip','refresh'] //自定义分页布局
} //开启分页
,cols: [[ //表头
{field:'id', width:80, title: 'ID', sort: true}
,{field:'username', width:80, title: '用户名'}
,{field:'sex', width:80, title: '性别', sort: true}
,{field:'city', title: '城市'} //没定义宽度则占满剩余所有宽度，都不定义则所有列均分
,{field:'score',width:80, title: '评分', sort: true}
]]
});
});
</script>
3.5.3 显示工具栏
右上角工具按钮 toolbar:true
<script>
// 必须要导入 table模块 layui.use('table',...)
layui.use('table', function(){
var table = layui.table;
// 为表格填充数据
table.render({
elem: '#demo'
, toolbar:true
,height: 312
,url: 'data' //获取数据
,page: {limit:5//每页显示1条(向后台传值，每页显示条数)
,limits:[1,2,3] //可选每页条数
,first: '首页' //首页显示文字，默认显示页号
,last: '尾页'
,prev: '<em>←</em>' //上一页显示内容，默认显示 > <
,next: '<i class="layui-icon layui-icon-next"></i>'
,layout:['prev', 'page', 'next','count','limit','skip','refresh'] //自定义分页布局
} //开启分页
,cols: [[ //表头
{field:'id', width:80, title: 'ID', sort: true}
,{field:'username', width:80, title: '用户名'}
,{field:'sex', width:80, title: '性别', sort: true}
,{field:'city', title: '城市'} //没定义宽度则占满剩余所有宽度，都不定义则所有列均分
,{field:'score',width:80, title: '评分', sort: true}
]]
});
</script>
3.5.4 操作按钮
为每行增加操作按钮
<script>
// 必须要导入 table模块 layui.use('table',...)
layui.use('table', function(){
var table = layui.table;
// 为表格填充数据
table.render({
elem: '#demo'
, toolbar:true
,height: 312
,url: 'data' //获取数据
,page: {limit:5//每页显示1条(向后台传值，每页显示条数)
,limits:[1,2,3] //可选每页条数
,first: '首页' //首页显示文字，默认显示页号
,last: '尾页'
,prev: '<em>←</em>' //上一页显示内容，默认显示 > <
,next: '<i class="layui-icon layui-icon-next"></i>'
,layout:['prev', 'page', 'next','count','limit','skip','refresh'] //自定义分页布局
} //开启分页
,cols: [[ //表头
{field:'id', width:80, title: 'ID', sort: true}
,{field:'username', width:80, title: '用户名'}
,{field:'sex', width:80, title: '性别', sort: true}
,{field:'city', title: '城市'} //没定义宽度则占满剩余所有宽度，都不定义则所有列均分
,{field:'score',width:80, title: '评分', sort: true}
,{field:"right",title:"操作",toolbar: '#barDemo'}
]]
});
</script>
<!-- 如下script可以定义在页面的任何位置 -->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
3.5.5 操作按钮回调
按钮的单击事件
<script>
//注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
table.on('tool(test)', function(obj){
var data = obj.data; //获得当前行数据
//获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var layEvent = obj.event;
var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
if(layEvent === 'del'){ //删除
layer.confirm('真的删除行么', function(index){
// 向服务端发送删除请求
// $.ajax(
// url:"deleteUser"
// ...
// )
// 此处可以发送ajax
obj.del(); //删除对应行（tr）的DOM结构
layer.close(index);
});
} else if(layEvent === 'edit'){ //编辑
// 向服务端发送更新请求
// 同步更新缓存对应的值
obj.update({
username: 'shine001',
city: '北京',
sex:'女',
score:99});
}
});
});
</script>
3.6 导航
水平导航条：class=“layui-nav”
垂直导航需要追加class：layui-nav-tree
侧边导航需要追加class：layui-nav-tree layui-nav-side
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航</title>
</head>
<!-- 导入js和css -->
<script src="layui/layui.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" >
<body>
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child"> <!-- 二级菜单 -->
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
//…
});
</script>
</body>
</html>
3.7 动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
</head>
<!-- 导入css和js -->
<script src="layui/layui.js"></script>
<link rel="stylesheet" href="layui/css/layui.css">
<body>
<!-- 整个div会在页面显示时，以特定动画显示出来 -->
<div class="layui-anim layui-anim-up" style="height: 100px">aa</div>
<!-- 额外添加样式类：layui-anim-loop 使得动画循环运行 -->
<div class="layui-anim layui-anim-rotate layui-anim-loop"
style="text-align:center;line-height: 100px;margin-left:50px;height: 100px;width:100px">bb</div>
</body>
</html>
四、内置模块
4.1 layer
4.1.1 弹窗方法
弹窗方法 msg()、alert()、confirm()
<script>
// 导入 layer模块
layui.use(["layer"],function(){
var layer = layui.layer;
layer.msg("hello world!!");
layer.msg("确定吗？",{btn:["确定！","放弃！"],
yes:function(i){layer.close(i);layer.msg("yes!!!")},
btn2:function(i){layer.close(i);layer.msg("no!!!")},}
);
});
</script>
<script>
// 导入 layer模块
layui.use(["layer"],function(){
var layer = layui.layer;
//0-6 7种图标 0:warning 1:success 2:error 3:question 4:lock 5:哭脸 6：笑脸
layer.alert("alert弹框蓝",
{title:'alert',icon:6 },
function(){//点击“确定”按钮时的回调
layer.msg("好滴");
}
);
});
</script>
<script>
// 导入 layer模块
layui.use(["layer"],function(){
var layer = layui.layer;
layer.confirm("hello world~",
{shade:false,icon:3,btn:["好滴","不行"]},
function(){layer.msg("好滴！");},
function(){layer.msg("不行！")}
);
});
</script>
4.1.2 弹窗属性
- type 弹窗类型，可选值0-4
- title 弹窗标题，可选值text/array
- content 弹窗内容，可选值text/html/dom
<script>
layui.use(["layer"],function(){
layer = layui.layer;
// layer.open({
// type:1,// 消息框，没有确定按钮
// title:["hello","padding-left:5px"], // 标题，及标题样式
// content:layui.$("#testmain"), // dom格式
// offset:'rb',//可以在右下角显示
// shade:true //是否遮罩
// });
layer.open({
type:2,// iframe加载，需要一个url
content:"demo01.html"
});
});
</script>
4.2 layDate
日期框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>日期格式</title>
</head>
<!-- 导入css和js -->
<script src="layui/layui.js"></script>
<link rel="stylesheet" href="layui/css/layui.css">
<body>
<form class="layui-form layui-form-pane" action="" method="post">
<!-- layui-form-item 一个输入项-->
<div class="layui-form-item">
<label class="layui-form-label">生日</label>
<!-- layui-input-block 输入框会占满除文字外的整行 -->
<div class="layui-input-block">
<input readonly id="birth" type="text" name="birth" placeholder="请选择生日日期" autocomplete="off" class="layui-input">
</div>
</div>
</form>
</body>
<script>
layui.use(["laydate","form"],function(){
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#birth', //指定元素
format:'yyyy/MM/dd',
//value:'2012/12/12' //默认值
value:new Date() //默认值
});
});
</script>
</html>
4.3 upload
上传按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件或图片上传</title>
</head>
<!-- 导入css和js -->
<script src="layui/layui.js"></script>
<link rel="stylesheet" href="layui/css/layui.css">
<body>
<form class="layui-form layui-form-pane" action="" method="post">
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="layui-btn" id="test1">
<i class="layui-icon"></i>上传图片
</button>
</div>
</div>
</form>
</body>
<script>
layui.use(['upload','layer'], function(){
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#test1' //绑定元素
,url: 'upload' //上传接口
,accept:'images' // file代表所有文件，默认是images代表图片
,size:100 // 文件最大100kb
,done: function(res){
//上传完毕回调
layui.layer.msg("ok");
}
,error: function(){
//请求异常回调
layui.layer.msg("error");
}
});
});
</script>
</html>
@RequestMapping("upload")
public Map<String,Object> 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<String, Object> map = new HashMap<>();
map.put("msg","ok");
map.put("code","1");
return map;
}
4.4 carousel
轮播图
<body>
<div class="layui-carousel" id="test1">
<div carousel-item>
<div>条目1</div>
<div>条目2</div>
<div>条目3</div>
<div>条目4</div>
<div>条目5</div>
</div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
<script src="/static/build/layui.js"></script>
<script>
layui.use('carousel', function(){
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1'
,width: '100%' //设置容器宽度
,arrow: 'always' //始终显示箭头
//,anim: 'updown' //切换动画方式
});
});
</script>
</body>
上一篇： EL表达式向select中赋值
下一篇： EL表达式,char类型?
推荐阅读
-
2016年最全的移动WEB前端UI框架_html/css_WEB-ITnose
-
layui前段框架日期控件使用方法详解
-
2016年最全的移动WEB前端UI框架_html/css_WEB-ITnose
-
浅谈layui框架自带分页和表格重载的接口解析问题
-
Semantic UI ? 完全语义化的前端界面开发框架_html/css_WEB-ITnose
-
vue前端框架—Mint UI详解（更适用于移动端）
-
详解如何在vue项目中使用layui框架及采坑
-
vue前端框架—Mint UI详解（更适用于移动端）
-
详解如何在vue项目中使用layui框架及采坑
-
layUI框架中文件上传前后端交互及遇到的相关问题