小汤学编程之JavaEE学习day06——LayUI
一、LayUI简介
1.下载 2.入门案例
二、栅格布局
三、图标
四、按钮
1.按钮类型 2.主题 3.尺寸 4.圆角 5.按钮组
五、后台布局
六、表格数据
1.前台页面 2.后台Servlet
七、弹出层
1.独立版 2.内嵌式
八、表单
1.代码案例 2.事件监听 3.表单赋值
九、新增
1.打开新增页面
十、删除与修改功能
一、LayUI简介
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式。
下载
官网:https://www.layui.com/
下载后的目录结构如下:
├─css //css目录
│ │─modules //模块css目录
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情)
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件
入门案例
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layui-demo</title><!-- 引入layui的样式 -->
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body><!-- 使用layUI的按钮样式-->
<button type="button" class="layui-btn">一个标准的按钮</button><script src="layui/layui.js"></script>
<script>/* 使用layUI的弹出层模块 */layui.use(['layer'], function(){var layer = layui.layer; /* 弹出hello world提示 */layer.msg('Hello World');});</script>
</body>
</html>
二、栅格布局
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layui-demo</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<!-- <div class="layui-fluid"> : 铺满 -->
<div class="layui-container"> 常规布局(以中型屏幕桌面为例):<div class="layui-row"><div class="layui-col-md9 layui-col-lg6 layui-bg-blue">你的内容 9/12</div><div class="layui-col-md3 layui-col-lg6 layui-bg-red">你的内容 3/12</div></div></div>
</body>
</html>
- 采用 layui-row 来定义行,如:
<div class="layui-row"></div>
- 列可以同时出现最多四种不同的组合,分别是:xs(超小屏幕,如手机)、sm(小屏幕,如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕),以呈现更加动态灵活的布局。
三、图标
- 方式一:
<i class="layui-icon layui-icon-face-smile" ></i>
- 方式二:
<i class="layui-icon"></i>
通过对一个内联元素(一般推荐用 i标签)设定
class="layui-icon"
,来定义一个图标,然后对元素加上图标对应的 font-class(注意:layui 2.3.0 之前只支持采用 unicode 字符),即可显示出你想要的图标。
四、按钮
向任意HTML元素设定class="layui-btn"
,建立一个基础按钮。通过追加格式为layui-btn-{type}
的class来定义其它按钮风格。内置的按钮class可以进行任意组合,从而形成更多种按钮风格。还可以与字体图标一起用,构成图标按钮。
1.按钮类型
<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.bailiban.com" class="layui-btn">一个可跳转的按钮</a>
2.主题
主题 | 类型 |
---|---|
class=“layui-btn layui-btn-primary” | 原始按钮 |
class="layui-btn | 默认按钮 |
class=“layui-btn layui-btn-normal” | 百搭按钮 |
class=“layui-btn layui-btn-warm” | 暖色按钮 |
class=“layui-btn layui-btn-danger” | 警告按钮 |
class=“layui-btn layui-btn-disabled” | 禁用按钮 |
3.尺寸
尺寸 | 类型 |
---|---|
class=“layui-btn layui-btn-lg” | 大型按钮 |
class="layui-btn " | 默认按钮 |
class=“layui-btn layui-btn-sm” | 小型按钮 |
class=“layui-btn layui-btn-xs” | 迷你按钮 |
class=“layui-btn layui-btn-fluid” | 流体按钮(最大化适应) |
4.圆角
class="... layui-btn-radius ..."
5.按钮组
<div class="layui-btn-group"></div>
五、后台布局
LayUI提供了一套布局的模板,可以直接拿来用作后台的页面布局。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>layout 后台大布局 - Layui</title><link rel="stylesheet" href="../src/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo">layui 后台布局</div><!-- 头部区域(可配合layui已有的水平导航) --><ul class="layui-nav layui-layout-left"><li class="layui-nav-item"><a href="">控制台</a></li><li class="layui-nav-item"><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></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item"><a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img">贤心</a><dl class="layui-nav-child"><dd><a href="">基本资料</a></dd><dd><a href="">安全设置</a></dd></dl></li><li class="layui-nav-item"><a href="">退了</a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域(可配合layui已有的垂直导航) --><ul class="layui-nav layui-nav-tree" lay-filter="test"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">所有商品</a><dl class="layui-nav-child"><dd><a href="javascript:;">列表一</a></dd><dd><a href="javascript:;">列表二</a></dd><dd><a href="javascript:;">列表三</a></dd><dd><a href="">超链接</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">解决方案</a><dl class="layui-nav-child"><dd><a href="javascript:;">列表一</a></dd><dd><a href="javascript:;">列表二</a></dd><dd><a href="">超链接</a></dd></dl></li><li class="layui-nav-item"><a href="">云市场</a></li><li class="layui-nav-item"><a href="">发布商品</a></li></ul></div></div><div class="layui-body"><!-- 内容主体区域 --><div style="padding: 15px;">内容主体区域</div></div><div class="layui-footer"><!-- 底部固定区域 -->© layui.com - 底部固定区域</div>
</div>
<script src="../src/layui.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){var element = layui.element;
});
</script>
</body>
</html>
六、表格数据
LayUI的数据表格可以将数据库查询出的集合通过转换为json传输给前台页面的一套固定模板,从而快速实现表格的渲染。
前台页面
<script>layui.use(['table'], function () { // 引入LayUIvar table = layui.table;//第一个实例table.render({elem: '#demo' //指定原始 table 容器的选择器或 DOM,方法渲染方式必填, toolbar: true // 是否显示工具条, url: '${path}/TableDataServlet?m=userTableData' //数据接口, page: true //开启分页, cols: [[ //表头,里面的name必须保证返回的json数组的bean的属性名为name,titile为页面表头显示的字段名{type:'checkbox'},{field: 'userId', title: 'ID', align: 'center', width: '25%', sort: true}, {field: 'userName', title: '姓名', align: 'center', width: '15%', sort: true}, {field: 'userPwd', title: '密码', align: 'center', width: '25%'}, {field: 'userType', title: '用户类型', align: 'center', width: '15%'}]]});});
</script>
后台servlet
//用户维护
public void userTableData(HttpServletRequest req, HttpServletResponse res) throws IOException {//获取前端传递需要的页号跟每页显示数量List<User> pageList = tableDataService.pagingUser(Integer.parseInt(pageNum), Integer.parseInt(limit));List<User> userList = tableDataService.allUser();doJSON(pageList,userList,res);
}
// 转化为Json格式
public static <T> void doJSON(List<T> pageList,List<T> userList,HttpServletResponse res){try {JSONObject data = new JSONObject();data.put("code", 0);data.put("msg", "no data."); // 无数据显示的内容data.put("count", userList.size());JSONArray array = JSONArray.parseArray(JSON.toJSONString(pageList));data.put("data", array);res.getWriter().write(data.toString());} catch (IOException e) {e.printStackTrace();}
}
七、弹出层
独立版
官网:https://layer.layui.com/
使用:
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="layer/layer.js"></script><script type="text/javascript">layer.msg('hello');
</script>
独立版 layer 需要去layer独立版官网下载组件包,且要先引入jQuery1.8以上版本,再引入layer.js。
内嵌版
使用:
<script>layui.use('layer', function(){var layer = layui.layer;layer.msg('hello');// 或者layer.open({type: 1});});
</script>
- 内嵌版layer继承在layUI中,只需要引入layui.css和layui.js后即可使用。
- layer还有许多参数和样式可以设置,详情可查阅官网。
八、表单
代码案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui.form小例子</title>
<link rel="stylesheet" href="layui.css" media="all">
</head>
<body>
<form class="layui-form"> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 --><div class="layui-form-item"><label class="layui-form-label">输入框</label><div class="layui-input-block"><input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">下拉选择框</label><div class="layui-input-block"><select name="interest" lay-filter="aihao"><option value="0">写作</option><option value="1">阅读</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="阅读"></div></div><div class="layui-form-item"><label class="layui-form-label">开关关</label><div class="layui-input-block"><input type="checkbox" lay-skin="switch"></div></div><div class="layui-form-item"><label class="layui-form-label">开关开</label><div class="layui-input-block"><input type="checkbox" checked 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="0" title="男"><input type="radio" name="sex" value="1" title="女" checked></div></div><div class="layui-form-item layui-form-text"><label class="layui-form-label">请填写描述</label><div class="layui-input-block"><textarea 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="*">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div><!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
<script src="layui.js"></script>
<script>
layui.use('form', function(){var form = layui.form;//各种基于事件的操作,下面会有进一步介绍
});
</script>
</body>
</html>
事件监听
form.on('event(过滤器值)',callback);
- 常用监听事件
event | 描述 |
---|---|
select | 监听select下拉选择事件 |
checkbox | 监听checkbox复选框勾选事件 |
switch | 监听checkbox复选框开关事件 |
radio | 监听radio单选框事件 |
submit | 监听表单提交事件 |
- 监听select
form.on('select(test)', function(data){console.log(data);
});
- 监听checkbox复选
form.on('checkbox(filter)', function(data){console.log(data.elem); //得到checkbox原始DOM对象console.log(data.elem.checked); //是否被选中,true或者falseconsole.log(data.value); //复选框value值,也可以通过data.elem.value得到console.log(data.othis); //得到美化后的DOM对象
});
- 监听submit提交
form.on('submit(*)', function(data){console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});
按钮点击或者表单被执行提交时触发,其中回调函数只有在验证全部通过后才会进入,回调返回三个成员:
表单赋值
form.val('filter',object);
//给表单赋值
form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值"username": "贤心" // "name": "value","sex": "女","auth": 3,"check[write]": true,"open": false,"desc": "我爱layui"
}//键值是表单元素对应的 name 和 value
);//获取表单区域所有值
var data1 = form.val("formTest");
用于给指定表单集合的元素赋值和取值。如果 object 参数存在,则为赋值;如果 object 参数不存在,则为取值。
九、新增
打开新增页面
<div><button class="layui-btn" id="add_btn">新增</button></div>
<script>
$("#add_btn").on("click",function () {layer.msg(" add ") ;layer.open({type:2,title:"用户新增",area: ['700px', '600px'],maxmin:true,shadeClose :false,content:'add.jsp'});
});
</script>
十、删除与修改功能
table.on('tool(demo)', function(obj){var layEvent = obj.event; //获得 lay-event 对应的值 var data = obj.data; //获得当前行数据var userName = data.name;// 表单中的name字段var userId = data.id;// 表单中的id字段var $ = layui.$ ;if(layEvent === 'del_event'){layer.confirm("你确定真的要删除"+userName+"的数据吗?",{icon: 2},function(index){// 异步请求去后台删除数据$.post("DeleteServlet",{"user_id":userId},function(data){// 删除成功给出提示if(data.flag){// 操作成功的提示layer.msg("删除成功!",{icon:1});// 关闭最新的层layer.close(layer.index);// 刷新id为demo的table数据layui.table.reload("demo");}});}); }else if(layEvent === 'update_event'){// 修改操作// 打开修改页面layer.open({type:2,title:"用户修改",area: ['700px', '600px'],maxmin:true,shadeClose :false,// 修改页面需要先访问Servlet获取修改的用户信息content:'UpdatePageServlet?user_id='+userId});}
});
table.on('tool(demo)
中的demo是去找lay-filter="demo"
的table。
写在最后,本文只是介绍和摘录了LayUI的一些常用的基本内容,想要深入学习的读者可以自行去LayUI官网,上面有最为详细的介绍与讲解。
小汤学编程之JavaEE学习day06——LayUI相关推荐
- 小汤学编程之JavaEE学习day08——Maven
一.Maven介绍 1.什么是Maven 2.Maven的功能 3.什么是构建 4.项目的构建方式 二.Maven的安装 1.下载 2.安装 3.配置 ...
- 小汤学编程之JavaEE学习day07——版本控制工具:SVN、GIT
一.SVN 1.SVN介绍 2.SVN安装 3.SVN操作 二.GIT 1.GIT介绍 2.集中式和分布式 3.GIT的基本使用 4.GIT时光机 5. ...
- 小汤学编程之JavaEE学习day05——会话管理、文件上传与下载、Ajax
一.会话管理 1.HTTP协议 2.会话的概念 3.会话跟踪技术 4.会话跟踪技术分类(四种) 二.文件上传与下载 1.上传 2.下载 3.上传和下载合并优化成 ...
- 小汤学编程之JavaEE学习day01——HTTP简介、B/S与C/S应用、连接的建立与断开、Tomcat
一.HTTP简介 1.HTTP请求报文 2.HTTP响应报文 二.B/S与C/S应用 三.连接的建立与断开 1.连接的建立(三次握手) 2.断开连接(四次挥手) 四.连接的建立与断开 ...
- 小汤学编程之JavaEE学习day10——Spring
一.Spring简介 1.特点 2.核心特性 3.两大核心 二.Spring环境搭建 1.导包 2.准备数据库和表.实体类 3.定义dao层接口和接口映射文件 ...
- 小汤学编程之JavaEE学习day09——Mybatis
一.Mybatis简介 1.官网 2.Mybatis是什么 3.有何作用 4.扩展:Hibernate 二.Maven介绍 1.导包 2.准备数据库和表.实体类 ...
- 小汤学编程之JavaEE学习day04——EL表达式、JSTL
一.EL表达式 1.EL表达式简介 2.禁用EL 3.EL中的11个隐式对象 4.EL表达式的作用 二.JSTL 1.引入步骤 2.通用标签 3.条件标签 ...
- 小汤学编程之JavaEE学习day03——JSP组成结构、JSP原理、JSP生命周期、JSP九大内置对象、四大作用域、JSP的MVC模式
一.JSP组成结构 二.JSP的原理 1.JSP的运行原理 2.分析JSP所生成的Servlet代码 3.JSP的执行过程 三.JSP生命周期 四.JSP九大内置对象 五.JSP四大作 ...
- 小汤学编程之JavaEE学习day02——Servlet使用步骤、生命周期、接收与返回数据、GET与POST、转发与重定向
一.Servlet使用步骤 二.Servlet生命周期 三.Servlet接收与返回数据 四.GET请求与POST请求的区别 五.转发与重定向 一.Servlet使用步骤 servlet是运行在服务器 ...
最新文章
- isdigit函数在C语言什么意思,C 库函数 isdigit() 使用方法及示例
- 最后通牒!这所985大学通知近百名硕博研究生限期回校答辩,逾期退学!
- MSSQL数据库安全防范学习笔记
- Exchange 2003 迁移至 Exchange 2010 完全攻略(二)
- c语言停止线程,如何用C语言实现多线程
- altium designer无法创建工程_前端工程化之开发脚手架及封装自动化构建
- yii schema.mysql.sql_YII学习,初体验 ,对YII的一些理解.
- linux文件赋予755权限,Linux文件和目录的777、755、644权限解释
- 008——数组(八)删除添加数组 得到数组键名键值
- 三、定义主从实体基类
- 软件设计师教程-倪奕文-专题视频课程
- win11QQ文件另存为崩溃
- TGA格式图片文件分析
- html如何在搜索栏里加放大镜,css 如何在html页面上输出一个“放大镜”形状呢?...
- 【Scratch-侦测模块】Scratch-碰到
- LINUX C/C++捕获段错误,打印出错的具体位置(精确到哪一行) ​ --Xilinx ARM版本
- 「用ChatGPT搞钱年入百万!」各路博主发布生财之道,网友回呛:答辩的搬运工...
- 局域网win7计算机如何互访,局域网Win7与WinXP电脑不能互访怎么办?
- 光伏箱变测控装置的工作原理
- JupyterLab中Kernel相关使用技巧和报错解决
热门文章
- STM32F407之常识
- Theano2.1.11-基础知识之稀疏
- VS2013中修改.dll工程项目的.lib和.dll的输出路径
- C# SendInput 实现模拟鼠标操作
- Moss/Sharepoint 为特定用户组设置特定视图以及可见视图,自定义列表新建页,修改页和显示页(无代码法)...
- 公开最近开发的OA的框架图
- BBAug: 一个用于PyTorch的物体检测包围框数据增强包
- 用 Python 实现溺水识别
- 程序员们之间的“鄙视链”,程序员底之间无声的战争
- 【TensorFlow】TensorFlow从浅入深系列之八 -- 教你学会变量管理