LayUI

最新推荐文章于 2023-04-16 10:42:08 发布

Lucky_syw

最新推荐文章于 2023-04-16 10:42:08 发布

阅读量284

点赞数

文章标签： java

本文链接：https://blog.csdn.net/sun_yi_wen/article/details/119878345

版权

LayUI 的介绍

layui （谐⾳：类 UI) 是⼀款采⽤⾃身模块规范编写的前端 UI 框架，遵循原⽣ HTML/CSS/JS 的书写与组织形式，⻔槛极低，拿来即⽤。

由国⼈开发， 16 年出⼚的框架，其主要提供了很多好看、⽅便的样式，并且基本拿来即⽤，和

Bootstrap 有些相似，但该框架有个极⼤的好处就是定义了很多前后端交互的样式接⼝，如分⻚表格，只需在前端配置好接⼝，后端则按照定义好的接⼝规则返回数据，即可完成⻚⾯的展示，极⼤减少了后端⼈员的开发成本。

官⽹： https://www.layui.com

官⽅⽂档： https://www.layui.com/doc/

LayUI 的特点

（1 ） layui 属于轻ᰁ级框架，简单美观。适⽤于开发后端模式，它在服务端⻚⾯上有⾮常好的效果。

（ 2 ） layui 是提供给后端开发⼈员的 ui 框架，基于 DOM 驱动。

下载与使⽤

1. 在官⽹⾸⻚下载到 layui 的最新版。

2. 获得 layui 后，将其完整地部署（拷⻉到项⽬中）到你的项⽬⽬录，你只需要引⼊下述两个⽂件：

. / layui / css / layui . css

. / layui / layui . js // 提示：如果是采⽤⾮模块化⽅式，此处可换成： ./layui/layui.all.js

3. 基本的⼊⻔⻚⾯

4. 还需要声明需要使⽤的模块和 回调函数 。参照官⽅⽂档，选择⾃⼰想要的效果就⾏。

布局容器

栅格系统

为了丰富⽹⻚布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能⼒， layui 引进了⼀套具备响应式能⼒的栅格系统。将容器进⾏了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌⾯中/ ⼤尺⼨四种不同的屏幕下发挥着各⾃的作⽤。

<h3> 常规布局（以中型屏幕桌⾯为例）： </h3>

你的内容 9/12

</div>

你的内容 3/12

</div>

响应式规则

栅格的响应式能⼒，得益于 CSS3 媒体查询（ Media Queries ）的强⼒⽀持，从⽽针对四类不同尺⼨的屏幕，进⾏相应的适配处理。

<h3> 平板、桌⾯端的不同表现： </h3>

<div class = "layui-col-sm6 layui-col-md4"

style = "background-color: thistle" >

平板 ≥768px ： 6/12 | 桌⾯端 ≥992px ： 4/12

</div>

<div class = "layui-col-sm4 layui-col-md6"

style = "background-color: mediumaquamarine;" >

平板 ≥768px ： 4/12 | 桌⾯端 ≥992px ： 6/12

</div>

<div class = "layui-col-sm12 layui-col-md8"

style = "background-color: coral" >

平板 ≥768px ： 12/12 | 桌⾯端 ≥992px ： 8/12

</div>

列边距

通过 “ 列间距 ” 的预设类，来设定列之间的间距。且⼀⾏中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进⼀步保证分列的宽度精细程度。我们结合⽹⻚常⽤的边距，预设了 12 种不同尺⼨的边距，分别是：

/* ⽀持列之间为 1px-30px 区间的所有双数间隔，以及 1px 、 5px 、 15px 、 25px 的单数间隔 */

1/3

</div>

1/3

</div>

1/3

</div>

列偏移

对列追加类似 layui-col-md-offffset* 的预设类，从⽽让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12 。

4/12

</div>

<div class = "layui-col-md4 layui-col-md-offset4"

style = "background-color: cornflowerblue;" >

偏移 4 列，从⽽在最右

</div>

列嵌套

可以对栅格进⾏⽆穷层次的嵌套。在列元素（ layui-col-md* ）中插⼊⾏元素（ layui-row ），即可完成嵌套。

内部列

</div>

内部列

</div>

<div class = "layui-col-md4" style = "background-color:

mediumaquamarine;" >

内部列

</div>

基本元素

向任意 HTML 元素设定 class="layui-btn" ，建⽴⼀个基础按钮。通过追加格式为 layui-btn-{type} 的 class来定义其它按钮⻛格。

<button type = "button" class = "layui-btn" > ⼀个标准的按钮 </button>

<a href = "http://www.layui.com" class = "layui-btn" > ⼀个可跳转的按钮 </a>

主题

尺⼨

圆⻆

layui-btn-radius

图标

<i class = "layui-icon" >  </i> 添加

</button>

<i class = "layui-icon" > ဂ </i> 刷新

</button>

导航

导航⼀般指⻚⾯引导性频道集合，多以菜单的形式呈现，可应⽤于头部和侧边。⾯包屑结构简单，⽀持⾃定义分隔符。

⽔平导航

</dl>

</li>

</ul>

垂直 / 侧边导航

</dl>

</li>

</dl>

</li>

</ul>

⽔平导航： layui-nav

垂直导航需要追加 class ： layui-nav-tree

侧边导航需要追加 class ： layui-nav-tree layui-nav-side

导航主题

⽔平导航⽀持的其它背景主题有： layui-bg-cyan （藏⻘）、 layui-bg-molv （墨绿）、 layui-bg-blue （艳蓝）垂直导航⽀持的其它背景主题有：layui-bg-cyan （藏⻘）

⾯包屑

</span>

设置属性 lay-separator="" 来⾃定义分隔符

</span>

选项卡

导航菜单可应⽤于头部和侧边，⽀持响应式，⽀持删除选项卡等功能。

</ul>

</div>

选项卡⻛格

默认⻛格： layui-tab

简洁⻛格需要追加 class ： layui-tab-brief

卡⽚⻛格需要追加 class ： layui-tab-card

带删除的选项卡

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

</ul>

</div>

</div

表格

<col>

</colgroup>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

<td> 于千万⼈之中遇⻅你所遇⻅的⼈，于千万年之中，时间的⽆涯的荒ᰀ⾥ … </td>

</tr>

</tbody>

</table>

基础属性

你所需要的基础属性写在table标签上

<col>

</colgroup>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

<td> 于千万⼈之中遇⻅你所遇⻅的⼈，于千万年之中，时间的⽆涯的荒ᰀ⾥ … </td>

</tr>

</tbody>

</table>

表单

1. 在⼀个容器中设定 class="layui-form" 来标识⼀个表单元素块

</form>

2. 基本的⾏区块结构，它提供了响应式的⽀持。可以换成其他结构，但必须要在外层容器中定

义 class="layui-form" ， form 模块才能正常⼯作。

原始表单元素区域

</div>

输⼊框

<input type = "text" name = "title" required lay-verify = "required" placeholder = " 请

输⼊标题 " autocomplete = "off" class = "layui-input" />

required ：注册浏览器所规定的必填字段

lay-verify ：注册 form 模块需要验证的类型

class="layui-input" ： layui.css 提供的通⽤ CSS 类

下拉选择框

</select>

属性 selected 可设定默认项

属性 disabled 开启禁⽤， select 和 option 标签都⽀持

</select>

可以通过 optgroup 标签给 select 分组

</optgroup>

<option value = " 你最喜欢的⽼师 " > 你最喜欢的⽼师？ </option>

</optgroup>

</select>

通过设定属性 lay-search 来开启搜索匹配功能

<option value = "010" > layer </option>

<option value = "0571" selected > layim </option>

</select>

复选框

属性 title 可⾃定义⽂本（温馨提示：如果只想显示复选框，可以不⽤设置 title ）

属性 checked 可设定默认选中

属性 lay-skin 可设置复选框的⻛格（原始⻛格： lay-skin="primary" ）

设置 value="1" 可⾃定义值，否则选中时返回的就是默认的 on

开关

将复选框 checkbox ，通过设定 lay-skin="switch" 形成了开关⻛格

属性 checked 可设定默认开

属性 disabled 开启禁⽤

属性 lay-text 可⾃定义开关两种状态的⽂本（两种⽂本⽤ "|" 隔开）

设置 value="1" 可⾃定义值，否则选中时返回的就是默认的 on

单选框

属性 title 可⾃定义⽂本

属性 disabled 开启禁⽤

设置 value="xxx" 可⾃定义值，否则选中时返回的就是默认的 on

⽂本域

<textarea name = "remark" required lay-verify = "required" placeholder = " 请输⼊个⼈介

绍 " class = "layui-textarea" ></textarea>

class="layui-textarea" ： layui.css 提供的通⽤ CSS 类

组装⾏内表单

<input type = "text" name = "price_min" placeholder = " ￥ "

autocomplete = "off" class = "layui-input" >

</div>

<input type = "text" name = "price_max" placeholder = " ￥ "

autocomplete = "off" class = "layui-input" >

</div>

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

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

表单⽅框⻛格

通过追加 layui-form-pane 的 class ，来设定表单的⽅框⻛格。

<!--

内部结构都⼀样，值得注意的是复选框 / 开关 / 单选框这些组合在该⻛格下需要额外添加 pane 属性

（否则会看起来⽐较别扭），如：

-->

</div>

</form>

组件示例

弹出层

icon - 图标

注：信息框和加载层的私有参数。

类型： Number ，默认： -1 （信息框） /0 （加载层）

信息框默认不显示图标。当你想显示图标时，默认层可以传⼊ 0-6 。如果是加载层，可以传⼊ 0-2 。

// eg1

layer . alert ( ' 酷毙了 ' , { icon : 1 });

// eg2

layer . msg ( ' 不开⼼。。 ' , { icon : 5 });

// eg3

layer . load ( 1 ); // ⻛格 1 的加载

// eg1

// eg2

layer . msg ( ' 你愿意和我做朋友么？ ' , {

time : 0 , // 不⾃动关闭

btn : [ ' 当然愿意 ' , ' 狠⼼拒绝 ' ], // 按钮

yes : function ( index ){

layer . close ( index ); // 关闭当前弹出框

layer . msg ( ' 新朋友，你好！ ' , {

icon : 6 , // 图标

btn : [ ' 开⼼ ' , ' 快乐 ' ]

});

}

});

// eg3

layer . msg ( ' 这是常⽤的弹出层 ' );

// eg4

layer . msg ( 'So sad /( ㄒ o ㄒ )/~~' , { icon : 5 });

// eg5

layer . msg ( ' 玩命加载中 ...= ￣ ω ￣ =' , function (){

// 关闭后的操作

layer . msg ( '( ⊙ o ⊙ ) ？ ' );

});

⽇期与时间选择

layDate 包含了⼤ᰁ的更新，其中主要以：年选择器、年⽉选择器、⽇期选择器、时间选择器、⽇期时间选择器五种类型的选择⽅式。

<!DOCTYPE html>

<html>

<head>

<title> ⽇期与时间选择 </title>

</head>

<body>

</div>

</body>

layui . use ( 'laydate' , function (){

var laydate = layui . laydate ;

// 执⾏⼀个 laydate 实例

laydate . render ({

elem : '#date1' // 指定元素

});

</script>

</html>

// 年选择器

laydate . render ({

elem : '#test'

, type : 'year'

});

// 年⽉选择器

laydate . render ({

elem : '#test'

, type : 'month'

});

// ⽇期选择器

laydate . render ({

elem : '#test'

//,type: 'date' // 默认，可不填

});

// 时间选择器

laydate . render ({

elem : '#test'

, type : 'time'

});

// ⽇期时间选择器

laydate . render ({

elem : '#test'

, type : 'datetime'

});

// ⾃定义⽇期格式

laydate.render({

elem: '#test'

,format: 'yyyy 年 MM ⽉ dd ⽇ ' // 可任意组合

});

// 传⼊符合 format 格式的字符给初始值

laydate . render ({

elem : '#test'

, value : '2018-08-18' // 必须遵循 format 参数设定的格式

});

// 传⼊ Date 对象给初始值

laydate . render ({

elem : '#test'

, value : new Date ( 1534766888000 ) // 参数即为： 2018-08-20 20:08:08 的时间戳

});

分⻚

laypage 的使⽤⾮常简单，指向⼀个⽤于存放分⻚的容器，通过服务端得到⼀些初始值，即可完成分⻚渲染。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

layui . use ( 'laypage' , function (){

var laypage = layui . laypage ;

// 执⾏⼀个 laypage 实例

laypage . render ({

elem : 'test1' // 注意，这⾥的 test1 是 ID ，不⽤加 # 号

, count : 50 // 数据总数，从服务端得到

});

</script>

</html>

基础参数

通过核⼼⽅法： laypage.render(options) 来设置基础参数。

jump - 切换分⻚的回调

当分⻚被切换时触发，函数返回两个参数： obj （当前分⻚的所有选项值）、 fifirst （是否⾸次，⼀般⽤于初始加载的判断）

laypage . render ({

elem : 'page'

, count : 100 // 数据总数，从服务端得到

, groups : 10 // 连续出现的⻚码个数

, layout :[ 'prev' , 'page' , 'next' , 'limit' , 'count' ] // ⾃定义排版

, limits :[ 5 , 10 , 20 ] // layout 属性设置了 limit 值，可会出现条数下拉选择框

, jump : function ( obj , first ){

// obj 包含了当前分⻚的所有参数，⽐如：

console . log ( obj . curr ); // 得到当前⻚，以便向服务端请求对应⻚的数据。

console . log ( obj . limit ); // 得到每⻚显示的条数

// ⾸次不执⾏

if ( ! first ){

//do something

}

});

数据表格

创建⼀个 table实例最简单的⽅式是，在⻚⾯放置⼀个元素，然后通过 table.render() ⽅法指定该容器。

<!DOCTYPE html>

<html>

<head>

<title> table 数据表格 </title>

</head>

<body>

</body>

layui . use ( 'table' , function (){

var table = layui . table ;

// 第⼀个实例

table . render ({

elem : '#demo'

, url : 'user.json' // 数据接⼝

, cols : [[ // 表头

{ field : 'id' , title : 'ID' , width : 80 , sort : true , fixed : 'left' }

field : 'username' , title

: ' ⽤户名 ' , width : 80 }

,{ field : 'sex' , title : ' 性别 ' , width : 80 , sort : true }

,{ field : 'city' , title : ' 城市 ' , width : 80 }

,{ field : 'sign' , title : ' 签名 ' , width : 177 }

]]

});

</script>

</html>

数据接⼝ user.json

{

"code" : 0 ,

"msg" : "" ,

"count" : 50 ,

"data" : [{

"id" : 10000 ,

"username" : "user-0" ,

"sex" : " ⼥ " ,

"city" : " 城市 -0" ,

"sign" : " 签名 -0"

{

"id" : 10001 ,

"username" : "user-1" ,

"sex" : " 男 " ,

"city" : " 城市 -1" ,

"sign" : " 签名 -1"

{

"id" : 10002 ,

"username" : "user-2" ,

"sex" : " ⼥ " ,

"city" : " 城市 -2" ,

"sign" : " 签名 -2"

{

"id" : 10003 ,

"username" : "user-3" ,

"sex" : " ⼥ " ,

"city" : " 城市 -3" ,

"sign" : " 签名 -3"

{

"id" : 10004 ,

"username" : "user-4" ,

"sex" : " 男 " ,

"city" : " 城市 -4" ,

"sign" : " 签名 -4"

}

]

}

三种初始化渲染⽅式

基础参数使⽤的场景

// 场景⼀：下述⽅法中的键值即为基础参数项

table.render({

height: 300

,url: 'user.json'

});

// 场景⼆：下述 lay-data ⾥⾯的内容即为基础参数项，切记：值要⽤单引号

<table lay-data = "{height:300, url:'user.json'}" lay-filter = "demo" > ……

</table>

// 更多场景：下述 options 即为含有基础参数项的对象

> table.init('filter', options); // 转化静态表格

> var tableObj = table.render({});

tableObj.reload(options); // 重载表格

开启分⻚

<table id = "demo" ></table>

// JS 实现代码

layui . use ( 'table' , function (){

var table = layui . table ;

// 执⾏渲染

table . render ({

elem : '#demo' // 指定原始表格元素选择器（推荐 id 选择器）

, url : 'user.json' // 数据接⼝

, height : 315 // 容器⾼度

, page : true // 开启分⻚

, cols : [[ // 设置表头

{ field : 'id' , title : 'ID' }

,{ field : 'username' , title : ' ⽤户名 ' }

,{ field : 'sex' , title : ' 性别 ' }

]]

});

开启头部⼯具栏

<table id = "demo" lay-filter = "demo" ></table>

<script type = "text/html" id = "toolbarDemo" >

<div class="layui-btn-container">

<button class="layui-btn layui-btn-sm" lay-event="getCheckData">

获取选中⾏数据

</button>

<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">

获取选中数⽬

</button>

<button class="layui-btn layui-btn-sm" lay-event="isAll">

验证是否全选

</button>

</div>

</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>

layui . use ( 'table' , function (){

var table = layui . table ;

// 执⾏渲染

table . render ({

elem : '#demo' // 指定原始表格元素选择器（推荐 id 选择器）

, url : 'user.json' // 数据接⼝

, height : 315 // 容器⾼度

, page : true // 开启分⻚

, cols : [[ // 设置表头

{ field : 'id' , title : 'ID' }

,{ field : 'username' , title : ' ⽤户名 ' }

,{ field : 'sex' , title : ' 性别 ' }

,{ title : ' 操作 ' , toolbar : '#barDemo' } // 绑定表头⼯具栏

]]

, toolbar : '#toolbarDemo' // 开启头部⼯具栏，并为其绑定左侧模板

});

/**

* 头⼯具栏事件

* 语法：

table.on('toolbar(demo)', function(obj){

});

注： demo 表示选择器元素上设置的 lay-filter 属性值

table . on ( 'toolbar(demo)' , function ( obj ){

// obj.config.id 当前选择器的 id 属性值，即 demo

// 获取当前表格被选中的记录对象，返回数组

var checkStatus = table . checkStatus ( obj . config . id );

// obj.event 得到当前点击元素的事件名

switch ( obj . event ){

case 'getCheckData' :

// 获取被选中的记录的数组

var data = checkStatus . data ;

// 将数组数据解析成字符串

layer . alert ( JSON . stringify ( data ));

break ;

case 'getCheckLength' :

var data = checkStatus . data ;

layer . msg ( ' 选中了： ' + data . length + ' 个 ' );

break ;

case 'isAll' :

// checkStatus.isAll 判断记录是否被全选

layer . msg ( checkStatus . isAll ? ' 全选 ' : ' 未全选 ' );

break ;

// ⾃定义头⼯具栏右侧图标 - 提示

case 'LAYTABLE_TIPS' :

layer . alert ( ' 这是⼯具栏右侧⾃定义的⼀个图标按钮 ' );

break ;

};

});

/**

* 监听⾏⼯具事件

table . on ( 'tool(demo)' , function ( obj ){

// 得到当前操作的 tr 的相关信息

var data = obj . data ;

if ( obj . event === 'del' ){

// 确认框

layer . confirm ( ' 真的删除⾏么 ' , function ( index ){

// 删除指定 tr

obj . del ();

// index 当前弹出层的下标，通过下标关闭弹出层

layer . close ( index );

});

} else if ( obj . event === 'edit' ){

// 输⼊框

layer . prompt ({

// 表单元素的类型 0= ⽂本框 1= 密码框 2= ⽂本域

formType : 0

, value : data . username

}, function ( value , index ){

// 修改指定单元格的值

// value 表示输⼊的值

obj . update ({

username : value

});

// 关闭弹出层

layer . close ( index );

});

}

});

数据表格的重载

<div class = "demoTable" >

搜索 ID ：

<div class = "layui-inline" >

<input class = "layui-input" name = "id" id = "demoReload"

autocomplete = "off" >

</div>

<button class = "layui-btn" id = "searchBtn" > 搜索 </button>

</div>

<table class = "layui-hide" id = "demo" lay-filter = "demo" ></table>

layui . use ( 'table' , function (){

var table = layui . table ;

var $ = layui . jquery ; // 获取 jquery 对象

// 执⾏渲染

table . render ({

elem : '#demo' // 指定原始表格元素选择器（推荐 id 选择器）

, url : 'user.json' // 数据接⼝

, page : true // 开启分⻚

, cols : [[ // 设置表头

{ type : 'checkbox' , fixed : 'left' } // 设置复选框

,{ field : 'id' , title : 'ID' }

,{ field : 'username' , title : ' ⽤户名 ' }

,{ field : 'sex' , title : ' 性别 ' }

]]

});

// 给指定元素绑定事件

$ ( document ). on ( 'click' , '#searchBtn' , function ( data ) {

// 获取搜索框对象

var demoReload = $ ( '#demoReload' );

table . reload ( 'demo' , {

where : { // 设定异步数据接⼝的额外参数，任意设

id : demoReload . val ()

}

, page : {

// 让条件查询从第⼀⻚开始查询，不写则从当前⻚开始查询，此⻚之前的数据

将不纳⼊条件筛选

curr : 1 // 重新从第 1 ⻚开始

}

}); // 只重载数据

});

Lucky_syw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
LayUI

LayUI 的介绍layui（谐⾳：类UI) 是⼀款采⽤⾃身模块规范编写的前端 UI 框架，遵循原⽣ HTML/CSS/JS 的书写与组织形式，⻔槛极低，拿来即⽤。由国⼈开发，16年出⼚的框架，其主要提供了很多好看、⽅便的样式，并且基本拿来即⽤，和 Bootstrap有些相似，但该框架有个极⼤的好处就是定义了很多前后端交互的样式接⼝，如分⻚表格，只需在前端配置好接⼝，后端则按照定义好的接⼝规则返回数据，即可完成⻚⾯的展示，极⼤减少了后端⼈员的开发成本。官⽹：https://www
复制链接

扫一扫

LayUI

“相关推荐”对你有帮助么？