layUI笔记

# layUI笔记

### 一、引言

------

#### 1.1 介绍

> 官网：https://www.layui.com/

>

> 在官网首页，可以很方便的下载LayUI

> LayUI 是一款经典模块化前端 UI 框架，我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。

>

> 使得前端页面的制作变得更加简单。

### 二、环境搭建

------

#### 2.1 下载

> 在官网即可完成下载

下载LayUI

#### 2.2 导入依赖

> 下载的LayUI解压后，将其中的layui目录导入项目中

解压后的 layui目录

将layui目录放到项目的webapp目录下

在JSP中导入layui依赖

```html

```

#### 2.3 使用模块和回调函数

```js

```

### 三、页面元素

------

#### 3.1 布局

> 栅格系统

>

>

> 1. 定义行

> .layui-row

>

> 2. 定义列 . layui-col-md*

> md表示不同屏幕的标识(Xs、 sm、 md、 1g)

>

> 3. 每一行被均分为12列，列的总数不能超过12，否则会自动换行

>

> 4. 响应式规则

> 栅格会自动根据屏幕的分辨率选择对应的样式效果。

>

> 列边距

>

> ​

> ​

> 列偏移

> ​

> ​

> ​

> 列嵌套

> ​

```xml

你的内容 9/12

你的内容 3/12

<%--移动设备、平板、桌面端的不同表现：--%>

移动：6/12

移动：6/12

移动：4/12

移动：4/12

移动：4/12

```

#### 3.2 字体图标

> class=“layui-icon 具体的图标样式”

```html

```

#### 3.3 按钮

> class=“layui-btn 主题 样式”

```html

标准的按钮

可跳转的按钮

主题的按钮

主题的按钮

圆角的按钮

带图标的按钮

按钮组

增加

编辑

删除

```

#### 3.4 表单

> 必须要在外层容器中定义class="layui-form"，form模块才能正常工作。

>

> layui-input-inline 合适长度

>

> layui-form-item 表单元素项

```html

内容

```

##### 3.4.1 输入框

常用属性:

文本框

```html

标签区域

```

##### 3.4.2 下拉框

下拉选择框

```html

标题

请选择一个城市

北京

上海

杭州

```

##### 3.4.3 复选框

复选框

```html

爱好

```

##### 3.4.4 开关

开关

将复选框，设置lay-skin=" switch"形成开关风格

```html

开关

<input type="checkbox" name="" lay-skin="switch" checked lay-text="on

<input type="checkbox" name="" lay-skin="switch" checked lay-text="打开

```

##### 3.4.5 单选

​

​

​

```html

开关

```

##### 3.4.6 组装行内表单

class="layui-inline"：定义外层行内

class="layui-input-inline"：定义内层行内

```HTML

范围

-

密码

```

##### 3.4.7 总结

```html

输入框

密码框

辅助文字

选择框

请选择城市

北京

上海

广州

深圳

杭州

复选框

开关

单选框

文本域

立即提交

上传图片

```

#### 3.5 数据表格

##### 3.5.1 动态表格

> 动态表格

```html

```

> 数据格式如下：

>

> - code:0 代表查询成功，为1时，会显示msg中的内容

> - count是为分页准备的，共有多少条数据

```json

数据格式如下：

{"msg":"no data",

"code":0,

"data":[{"id":1,"username":"shine1","sex":"男","city":"保定","score":100},

{"id":2,"username":"shine2","sex":"女","city":"石家庄","score":100},

{"id":3,"username":"shine3","sex":"男","city":"邢台","score":100}],

"count":100}

@Data

@NoArgsConstructor

public class UserResult {

private Integer code;

private String msg;

private Integer count;

private List data;

public UserResult(Integer code, String msg, Integer count, List data) {

this.code = code;

this.msg = msg;

this.count = count;

this.data = data;

}

}

```

##### 3.5.2 分页参数

> 分页条细节定制

```html

```

##### 3.5.3 显示工具栏

> 右上角工具按钮 toolbar:true

```html

```

##### 3.5.4 操作按钮

> 为每行增加操作按钮

```html

```

##### 3.5.5 操作按钮回调

> 按钮的单击事件

```html

```

#### 3.6 导航

> 导航

>

```html

最新活动

产品

大数据

解决方案

社区

```

```html

首页

国际新闻

亚太地区

正文

```

#### 3.7 动画

> LayUI提供了动画支持

```html

aa

<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

12345

```

#### 3.8 选项卡

> 选项卡

> 默认风格: layui-tab

> 简洁风格需要追加 class: layui-tab-brief

> 卡片风格需要追加 class: layui -tab-card

>

> 可以对父层容器设置属性lay-allowClose="true" 来允许Tab选项卡被删除

```html

网站设置

用户管理

权限分配

商品管理

订单管理

1

2

3

4

5

6

增加

切换订单管理

删除

删除所有

```

#### 3.9 表格

> 表格

>

>

>

>

>

>

>

>

>

>

```html

	昵称
	加入时间
	签名
	贤心
	2016-11-29
	人生就像是一场修行
	许闲心
	2016-11-28
	于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
	贤心
	2016-11-29
	人生就像是一场修行
	许闲心
	2016-11-28
	于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…

```

### 四、内置模块

#### 4.1 layer

##### 4.1.1 弹窗方法

> 弹窗 msg()、alert()、confirm()

```html

```

##### 4.1.2 弹窗属性

> - type 弹窗类型，可选值 0-4

> - title 弹窗标题，可选值 text/array

> - content 弹窗内容，可选值 text/html/dom

```html

```

#### 4.2 layDate

> 日期框

```html

生日

```

#### 4.3 分页

```html

```

#### 4.3 upload

> 上传按钮

```html

username

上传图片

```

#### 4.4 carousel

> 轮播图

```html

条目1

条目2

条目3

条目4

条目5

```

### 细节

> LayUI 标识 ：id 和 lay-filter. id用来定位标签。 lay-filter用来定位事件源

```html

控制台9

个人中心

我

```

```html

```