嘘，认真看！Layui一定是Java程序员必备后台前端框架( 二 ) _Layui

文章插图

jsp代码演示：

文章插图

代码分析（相关样式）1.必要样式：layui-btn，这个样式就代表一个按钮，标识这一行type采用layui的样式中的按钮样式
2.主题样式：既然已经设置了必要样式，代表它是一个layui的按钮，那么我们就可以切换你想要的样式（样子）；比如在后面加了一个kayui-bth-danger这个就代表是一个警告样式的按钮；
<button type="button" class="layui-btn layui-btn-danger">警告按钮</button>设置按钮大小

文章插图

先看源码：

 <button type="button" class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button><button type="button" class="layui-btn layui-btn-primary">默认按钮</button><button type="button" class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button><button type="button" class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button>

这一项就是单纯的可以设置按钮的尺寸，我们可以直接在原本的按钮上添加这行代码比如就像这样：
<button type="button" class="layui-btn layui-btn-disabled layui-btn-lg">禁用按钮</button>仅仅在后面追加了一个layui-btn-lg即可在原来按钮的样式基础上追加这个尺寸样式。
图标按钮刚刚我们尝试了常规按钮样式的基础上添加了尺寸，那么我们就可以举一反三，也在按钮上添加自己喜欢的图标，我们直接写出代码即可，在文档上我们可以去挑选自己喜欢的图标，对应参数即可，在上面也有讲到过；
<button type="button" class="layui-btn layui-btn-danger layui-icon layui-icon-rate-half">警告按钮</button>效果图

文章插图

所以只要灵活运用layui的组件，就可以自行完成拼接，自定义自己喜欢的样式；
带文字的图标按钮正规写法上述我们直接在button之间写文字即可，但是这样并不规范而且图标与文字也不公正对齐，我们正确的写法：
1<button type="button" class="layui-btn layui-icon ">2<span class="layui-icon">?</span>手机按钮3</button>我们删掉了前面警告样式的代码，所以现在只是一个普通样式的按钮：

文章插图

事件监听（按钮）我们使用按钮，那么必然要触发事件，所以，我们该如何判断监听事件呢？
加事件的写法跟Jquery的写写法几乎一模一样：
首先要给标签加id，唯一标识调用的时候要对应：

1<button type="button" class="layui-btn layui-icon " id="add">添加</button>2<button type="button" class="layui-btn layui-icon "id="update">编辑</button>3<button type="button" class="layui-btn layui-icon "id="delete">删除</button>

然后引入JS正常写function（方法）即可：
1<script src=https://www.isolves.com/it/cxkf/kj/2021-03-09/"resources/layui/layui.js"> 2

文章插图

写过Js的人应该都发现了，layui的处理事件以及逻辑都依赖于js跟Jquery，当然我们也只是在剖析layui的每个组件，其实我们平时一般都直接下载下来整个layui框架，大部分代码以及组件都是实现好的，我们只需要在上面更改即可。

【嘘，认真看！Layui一定是Java程序员必备后台前端框架】