Java网站一些常用的前端UI,可以美化我们的前端页面,常见的有Layui和Bootstrap
Layui
是一个基于JavaScript的UI框架,旨在简化Web界面开发的过程,提供了丰富的CSS组件和JavaScript交互插件,使开发者能够快速构建出美观、灵活的网页界面。
LayUI具有以下特点:
- 简洁易用:LayUI提供了简单明了的API文档和丰富的示例,使开发者能够快速上手使用。
- 响应式设计:LayUI的组件都经过精心设计,能够自动适应不同屏幕大小和设备。
- 模块化开发:LayUI采用了模块化的开发思想,开发者可以按需加载需要的模块,减少资源浪费。
- 多种主题风格:LayUI提供了多种主题风格可供选择,开发者可以根据需要自由切换风格。
- 支持扩展:LayUI还提供了丰富的扩展组件和插件,开发者可以根据需要灵活扩展功能。
使用:
<!-- 引入 layui.js-->
<script src="/layui/layui.js"></script>
<!-- 引入 layui.css -->
<link href="/layui/css/layui.css" rel="stylesheet">
Layuicss
首先引入layui的css样式库,然后就可以在需要的class里添加想要的样式属性即可。
颜色
- 赤色:class="layui-bg-red"
- 橙色:class="layui-bg-orange"
- 墨绿:class="layui-bg-green"
- 藏青:class="layui-bg-cyan"
- 蓝色:class="layui-bg-blue"
- 雅黑:class="layui-bg-black"
- 银灰:class="layui-bg-gray"
按钮
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-lg">大型按钮</button>
<button type="button" class="layui-btn">默认按钮</button>
<button type="button" class="layui-btn layui-btn-sm">小型按钮</button>
<button type="button" class="layui-btn layui-btn-xs">迷你按钮</button>
</div>
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-lg layui-btn-normal">大型按钮</button>
<button type="button" class="layui-btn layui-btn-normal">默认按钮</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal">小型按钮</button>
<button type="button" class="layui-btn layui-btn-xs layui-btn-normal">迷你按钮</button>
</div>
<div class="layui-btn-container">
<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>
</div>
<div style="width: 380px;">
<button type="button" class="layui-btn layui-btn-fluid">流体按钮(宽度自适应)</button>
</div>
图标
通过对一个内联元素(如 <i>
标签)添加基础类 class="layui-icon"
来定义一个图标,然后对元素加上图标对应的 font-class。
layui提供了186个图标,格式都是:layui-icon-xxx
跨域处理
由于浏览器存在同源策略,若 Layui 文件地址与你当前的页面地址不在同一个域下,即会出现图标跨域问题。因此,要么将 Layui 文件与网站放在同一服务器,要么对 Layui 文件所在的静态资源服务器的 Response Headers
添加:Access-Control-Allow-Origin: *
或对跨资源共享指定域名,即可解决图标跨域问题。
动画
对需要动画的标签添加 class="layui-anim"
基础类,再追加其他不同的动画类data-anim,即可让元素产生动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
<link href="//unpkg.com/layui@2.8.17/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-row ws-docs-anim">
<div class="layui-col-sm3">
<div class="layui-anim" data-anim="layui-anim-down">顶部往下滑入</div>
<div>layui-anim-down</div>
</div>
<div class="layui-col-sm3">
<div class="layui-anim" data-anim="layui-anim-up">底部往上滑入</div>
<div>layui-anim-up</div>
</div>
<div class="layui-col-sm3">
<div class="layui-anim" data-anim="layui-anim-downbit">微微往下滑入</div>
<div>layui-anim-downbit</div>
</div>
<div class="layui-col-sm3">
<div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
<div>layui-anim-upbit</div>
</div>
<div class="layui-col-sm3">
<div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
<div>layui-anim-scale</div>
</div>
<div class="layui-col-sm3">
<div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
<div>layui-anim-scaleSpring</div>
</div>
<div class="layui-col-sm3">
<div class="layui-anim" data-anim="layui-anim-scalesmall">平滑放小</div>
<div>layui-anim-scalesmall</div>
</div>
<div class="layui-col-sm3">
<div class="layui-anim" data-anim="layui-anim-scalesmall-spring">弹簧式放小</div>
<div>layui-anim-scalesmall-spring</div>
</div>
<div class="layui-col-sm3">
<div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
<div>layui-anim-fadein</div>
</div>
<div class="layui-col-sm3">
<div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
<div>layui-anim-fadeout</div>
</div>
<div class="layui-col-sm3">
<div class="layui-anim" data-anim="layui-anim-rotate">360 度旋转</div>
<div>layui-anim-rotate</div>
</div>
<div class="layui-col-sm3">
<div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
<div>追加:layui-anim-loop</div>
</div>
</div>
<script>
layui.use(function(){
var $ = layui.$;
//演示动画
$('.ws-docs-anim .layui-anim').on('click', function(){
var othis = $(this), anim = othis.data('anim');
//停止循环
if(othis.hasClass('layui-anim-loop')){
return othis.removeClass(anim);
}
othis.removeClass(anim);
setTimeout(function(){
othis.addClass(anim);
});
//恢复渐隐
if(anim === 'layui-anim-fadeout'){
setTimeout(function(){
othis.removeClass(anim);
}, 1300);
}
});
});
</script>
</body>
</html>
表单
- 通过
class="layui-form"
定义一个表单域,通常设置在<form>
标签上, 或普通<div>
标签亦可。 - 通过
class="layui-form-item"
定义一个块级元素的表单项容器 - 通过
class="layui-form-label"
定义标签 - 通过
class="layui-input-block"
定义表单项父容器为块级元素 - 通过
class="layui-input-inline"
或class="layui-inline"
定义表单项父容器为行内块元素
即必须按照规定的层级定义相应的 class
。
输入框
class="layui-input"
输入框点缀
是指给普通输入框附加其他元素来进行动静态修饰,其结构包含:容器、前缀、输入框、后缀。
<div class="layui-input-{容器类}">
<div class="layui-input-{前缀类}"></div>
<input class="layui-input" placeholder="输入框">
<div class="layui-input-{后缀类}"></div>
</div>
- 容器类:
- 前置和后置结构:
class="layui-input-group"
- 前缀和后缀结构:
class="layui-input-wrap"
- 前置和后置结构:
- 前缀类:
class="layui-input-prefix"
- 后缀类:
class="layui-input-suffix"
- 前缀显示分隔框:
class="layui-input-prefix layui-input-split"
- 后缀显示分隔框:
class="layui-input-suffix layui-input-split"
通过在不同层级中设置规定的 CSS 类来实现点缀布局,再按照不同需求,在前缀和后缀中放置图标等任意内容。
- 前置和后置结构是输入框的自适应结构,可以很灵活地控制前后置内容与输入框的宽度比例。
- 输入框前缀和后缀是输入框的纯修饰结构,前缀和后缀宽度固定且其元素不可触及,即只能触及输入框本身。
动态点缀(2.8+)
点缀 | 属性值 |
---|---|
数字输入框 2.8.9+ | lay-affix="number" |
密码框显隐 | lay-affix="eye" |
内容清除 | lay-affix="clear" |
自定义动态点缀 | lay-affix="customName" |
选择框
<div class="layui-col-md6">
<select>
<option value="">请选择</option>
<option value="CCC" selected>选项 A</option>
<option value="BBB">选项 B</option>
<option value="BBB" disabled>选项 C(禁用选项)</option>
</select>
</div>
- 若第一项
value
为空,通常只作为选择框提示性引导;若第一项value
不为空,则作为默认选中项。 - 通过给选项添加
selected
属性优先设置默认选中项。 - 通过给
<select>
或<option>
标签设置disabled
可禁用整个选择框或某个选项。
分组选择框
通过 <optgroup>
标签给选择框分组
<div class="layui-form">
<select>
<option value="">请选择</option>
<optgroup label="分组 A">
<option value="A-1">选项 A-1</option>
<option value="A-2">选项 A-2</option>
<option value="A-3">选项 A-3</option>
</optgroup>
<optgroup label="分组 B">
<option value="B-1">选项 B-1</option>
<option value="B-2">选项 B-2</option>
</optgroup>
</select>
</div>
搜索选择框
在 <select>
元素上设置 lay-search
可开启选择框的搜索功能
select中的lay-search这个属性,必须在layui-form标签中才可以生效。
layui-search="cs"是区分大小写
<div class="layui-form layui-row layui-col-space16">
<div class="layui-col-md6">
<select lay-search="">
<option value="">请选择或搜索(默认不区分大小写)</option>
<option value="1">AAA</option>
<option value="2">aaa</option>
<option value="5">ABC</option>
<option value="6">abc</option>
<option value="7">AbC</option>
</select>
</div>
</div>
复选框
<div class="layui-form">
<input type="checkbox" name="AAA" title="默认">
<input type="checkbox" name="BBB" lay-text="选中" checked>
<input type="checkbox" name="CCC" title="禁用" disabled>
<input type="checkbox" name="DDD" title="半选" id="ID-checkbox-ind">
</div>
- 属性
title
可设置复选框标题 - 属性
checked
可设置默认选中 - 属性
disabled
可设置禁用状态 - 属性
value
可设置值,否则选中时返回的默认值为on
(浏览器默认机制) - 属性
lay-skin
可设置复选框风格,可选值:tag
2.8+,switch
,默认风格可不填
特别地,当表单提交时,只有选中状态的复选框才能获取到 value
,这点和浏览器原有的复选框机制相同。
开关风格
<div class="layui-form">
<input type="checkbox" name="AAA" lay-skin="switch">
<br>
<input type="checkbox" name="BBB" title="ON|OFF" lay-skin="switch" checked>
<br>
<input type="checkbox" name="CCC" title="开启|关闭" lay-skin="switch">
<br>
<input type="checkbox" name="DDD" lay-skin="switch" disabled>
</div>
在 title
属性中通过 |
分隔符可设置两种状态下的不同标题
在 checkbox
元素后的相邻元素设置特定属性 lay-checkbox
,可以与 checkbox
标题进行绑定。
单选框
<div class="layui-form">
<input type="radio" name="AAA" value="1" title="默认">
<input type="radio" name="AAA" value="2" title="选中" checked>
<input type="radio" name="AAA" value="3" title="禁用" disabled>
</div>
- 属性
title
可设置单选框标题 - 属性
checked
可设置默认选中 - 属性
disabled
可设置禁用状态 - 属性
value
可设置值,否则选中时返回的默认值为on
(浏览器默认机制)。同组单选框一般设置相同值
在 radio
元素后的相邻元素设置特定属性 lay-radio
,可以与 radio
标题进行绑定。
导航
水平导航
一般用于页面头部菜单。样式规则如下:
- 通过
class="layui-nav"
设置导航容器 - 通过
class="layui-nav-item"
设置导航菜单项- 追加
className
为layui-this
可设置菜单选中项
- 追加
- 通过
class="layui-nav-child"
设置导航子菜单项- 追加
className
为layui-nav-child-c
和layui-nav-child-r
可设置子菜单居中和向右对齐
- 追加
垂直导航
一般用于左侧侧边菜单。样式规则如下:
- 在水平导航的
class
规则上,通过设置class="layui-nav layui-nav-tree"
定义垂直导航容器。 - 通过
class="layui-nav-itemed"
设置父菜单项为展开状态 - 通过给导航容器追加
class="layui-nav-side"
可设置侧边垂直导航 - 其余结构及填充内容与水平导航完全相同
Layuijs
注意:layui在thymeleaf页面使用二维数组时会有冲突
解决:1.<script th:inline="none"> 2.数组的两个[]之间打空格
是因为 Layer 组件期望 content 参数是一个 DOM 元素或一个 HTML 字符串,而不是一个 JavaScript 对象。当你将一个 DOM 元素对象作为 content 参数传递给 Layer 组件时,它会尝试调用 parents 方法,但是由于 content 是一个 DOM 元素对象,而非 jQuery 对象,所以没有 parents 方法可用,导致报错。而当你将 type 参数设置为 2 时,意味着你打开的是一个 iframe 层,content 参数需要是一个有效的页面 URL。在这种情况下,传递一个 DOM 元素对象不会触发 parents 方法的调用,因此不会报错。为了解决报错问题,你需要确保在 type 参数为 1 的情况下,content 参数是一个正确的 HTML 字符串,或者使用 jQuery 对象来包装 content 参数。
核心API
API | 描述 |
---|---|
layui.cache | 获得 UI 的一些配置及临时缓存信息 |
layui.config(options) | 基础配置。#用法 |
layui.define([modules], callback) | 定义模块。#用法 |
layui.use([modules], callback) | 加载模块。#用法 |
layui.extend(obj) | 扩展模块。#用法 |
layui.disuse([modules]) 2.7+ | 弃用模块,以便重新扩展新的同名模块。参数支持数组,即可同时弃用多个模块。 如:layui.disuse(['table']) |
layui.link(href) | 加载 CSS,href 即为 css 路径。一般用于动态加载你的外部 CSS 文件 |
layui.getStyle(node, name) | 获得一个原始 DOM 节点的 style 属性值,如:layui.getStyle(document.body, 'font-size') |
layui.img(src, callback, error) | 图片预加载 |
layui.each(obj, callback) | 对象(Array、Object、DOM 对象等)遍历,可用于取代 for 语句 |
layui.type(operand) 2.6.7+ | 获取基本数据类型和各类常见引用类型,如:layui.type([]); // array layui.type({}); //object layui.type(new Date()); // date |
layui.isArray(obj) 2.7+ | 对象是否为泛数组结构。如 Array、NodeList、jQuery 对象等layui.isArray([1,6]); // true layui.isArray($('div')); // true |
layui.sort(obj, key, desc) | 将数组中的对象按某个成员重新对该数组排序,如:layui.sort([{a: 3},{a: 1},{a: 5}], 'a'); // 返回:[{"a":1},{"a":3},{"a":5}] |
layui.url(href) | 链接解析。#用法 |
layui.data(table, settings) | 持久化存储。#用法 |
layui.sessionData(table, settings) | 会话性存储。#用法 |
layui.device(key) | 获取浏览器信息。#用法 |
layui.hint() | 向控制台打印一些异常信息,目前只返回了 error 方法,如:var hint = layui.hint(); hint.error('出错啦'); |
layui.stope(e) | 阻止事件冒泡 |
layui.onevent(modName, events, callback) | 增加自定义模块事件,一般在内置组件中使用。 |
layui.event(modName, events, params) | 执行自定义模块事件,搭配 onevent 使用。注2.8+:当 events 参数中未设定 filter 时则可重复执行该事件,否则只会执行一次最新添加的事件。 |
layui.off(events, modName) 2.5.7+ | 用于移除模块相关事件,如:layui.off('select(filter)', 'form') ,那么form.on('select(filter)', callback) 事件将会被移除 |
layui.debounce(fn, wait) 2.8.3+ | 防抖,函数按指定毫秒延时执行 |
layui.throttle(fn, wait) 2.8.3+ | 节流,限制函数在指定毫秒内不重复执行 |
layui.factory(modName) | 用于获取模块对应的 layui.define() 的回调函数 |
var lay = layui.lay | 基础模块,提供了更多基础 API,一般供 Layui 内置组件中使用 |
var $ = layui.$; | 使用jQuery,layui内置了jQuery |
底层方法
全局配置
layui.config(options);
在 Layui 模块使用之前,采用该方法进行一些全局化的基础配置
layui.config({
base: '', // 设定 Layui 扩展模块的所在目录,一般与 extend 方法搭配使用
version: false, // 用于更新模块缓存,默认 false。
//version若设为 true,即让浏览器不缓存。也可设为一个任意数值
dir: 'layui/', // layui 基础目录,用于动态导入 src/layui.js 时的内置模块的加载。
//dir一般无需设置
debug: false // 用于开启调试模式,默认 false。若设为 true,则模块的引入节点会保留在页面
});
链接解析
var url = layui.url(href);
参数 href
可选,默认自动读取当前页面 URL(location.href
)。该方法用于将一段 URL 链接中的 pathname、search、hash
等属性进行对象化处理
// 假设当前页面 url 为: https://domain.com/docs/base.html?a=1&c=3#/user/set/id=123/
var url = layui.url();
// url 返回结果为:
{
"pathname": ["docs","base.html"], // 路径
"search": {"a":"1","c":"3"}, // 参数
"hash": { // hash 解析
"path": ["user","set",""], // hash 中的路径
"search": {"id":"123"}, // hash 中的参数
"hash": "", // hash 中的 hash
"href": "/user/set/id=123/" // hash 中的完整链接
}
}
本地存储
本地存储是对 localStorage 和 sessionStorage 的友好封装,可更方便地管理本地数据。方法如下:
layui.data(table, settings);
即 localStorage,数据在浏览器中的持久化存储,除非物理删除。layui.sessionData(table, settings);
即 sessionStorage ,数据在浏览器中的会话性存储,页面关闭后即失效。
两者使用方式完全一致。其中参数 table
为表名,settings
是一个对象,用于设置 key/value
。下面以 layui.data()
// 【增】:向 test 表插入一个 nickname 字段,如果该表不存在,则自动建立。
layui.data('test', {
key: 'nickname',
value: '张三'
});
// 【删】:删除 test 表的 nickname 字段
layui.data('test', {
key: 'nickname',
remove: true
});
layui.data('test', null); // 删除 test 表
// 【改】:同【增】,会覆盖已经存储的数据
// 【查】:向 test 表读取全部的数据
var localTest = layui.data('test');
console.log(localTest.nickname); // 获得“张三”
浏览器信息
var device = layui.device(key);
参数 key
可选。可利用该方法对不同的设备进行差异化处理,device
即为不同设备下返回的不同信息
{
os: "windows", // 当前浏览器所在的底层操作系统,如:Windows、Linux、Mac 等
ie: false, // 当前浏览器是否为 ie6-11 的版本,如果不是 ie 浏览器,则为 false
weixin: false, // 当前浏览器是否为微信 App 环境
android: false, // 当前浏览器是否为安卓系统环境
ios: false, // 当前浏览器是否为 IOS 系统环境
mobile: false // 当前浏览器是否为移动设备环境(v2.5.7 新增)
}
模块系统
Layui 制定了一套适合自身应用场景的轻量级模块规范,以便在不同规模的项目中,也能对前端代码进行很好的管理或维护。 Layui 的轻量级模块系统,并非有意违背 CommonJS 和 ES Module ,而是试图以更简单的方式去诠释高效,这种对返璞归真的执念源于在主流标准尚未完全普及的前 ES5 时代,后来也成为 Layui 独特的表达方式,而沿用至今。
定义模块
layui.define([mods], callback);
- 参数
mods
可选,用于声明该模块所依赖的模块; - 参数
callback
即为模块加载完毕的回调函数,它返回一个exports
参数,用于输出该模块的接口
layui.define(['layer', 'laydate'], function(exports){
var layer = layui.layer // 获得 layer 模块
var laydate = layui.laydate; // 获得 laydate 模块
// 输出模块
exports('demo', {}); // 模块名 demo 未被占用,此时模块定义成功
// exports('layer', {}); // 模块名 layer 已经存在,此时模块定义失败
});
使用模块
layui.use([mods], callback);
- 参数
mods
若填写,必须是已被成功定义的模块名;
若 mods 不填,即只传一个 callback 参数时,则表示引用所有内置模块。 - 参数
callback
即为使用模块成功后回调函数。
该回调会在 html 文档加载完毕后再执行,确保你的代码在任何地方都能对元素进行操作
// 使用指定模块
layui.use(['layer', 'table'], function(){
var layer = layui.layer;
var table = layui.table;
// do something
});
// 使用所有内置模块(layui v2.6 开始支持)
layui.use(function(){
var layer = layui.layer;
var table = layui.table;
var laydate = layui.laydate;
// do something
});
//你还可以通过 callback 返回的参数得到模块对象
layui.use(['layer', 'table'], function(layer, table){
// 使用 layer
layer.msg('test');
// 使用 table
table.render({});
});
/*
重新获取定义模块时的 callback 函数, 譬如在单页面应用开发中,
我们在视图碎片中使用某个模块,由于定义模块时的 callback
只会在模块初次加载中被调用,而当视图碎片在每次被渲染时,又往往需要该 callback
被再次执行,那么则可以通过以下方式实现
*/
// 在单页面视图碎片渲染时,再次调用「定义模块」时的 `callback`
layui.use('demo', layui.factory('demo'));
扩展模块
扩展模块是项目开发的重要环节,它既可以是工具性组件,也可以是纯业务组件,是 Layui 的延伸,也是项目的支撑。
layui.extend(obj);
- 参数
obj
是一个对象,必选,用于声明模块别名。
除了 Layui 的内置模块,在实际项目开发时,必不可少也需要扩展模块(可以简单理解为符合 layui 模块规范的 JS 文件)
1.创建模块
新建一个未被定义过的模块名 firstMod.js
文件并放入项目的任意目录中(最好不要放入到 Layui 原始目录)
2.编写模块
编写firstMod.js
该模块主体代码
/**
* 编写一个 firstMod 模块
**/
layui.define(function(exports){ // 也可以依赖其他模块
var obj = {
hello: function(str){
alert('Hello '+ (str || 'firstMod'));
}
};
// 输出 firstMod 接口
exports('firstMod', obj);
});
3.声明模块
声明模块名及模块文件路径,即完成模块扩展
// 假设 firstMod 模块文件所在路径在: /js/layui_exts/firstMod.js
layui.config({
base: '/js/layui_exts/' // 配置 Layui 第三方扩展模块存放的基础目录
}).extend({
firstMod: 'firstMod', // 定义模块名和模块文件路径,继承 layui.config 的 base 路径
// mod2: 'mod2' // 可同时声明其他更多模块
});
// 也可以不继承 layui.config 的 base 路径,即单独指定路径
layui.extend({
firstMod: '{/}/js/layui_exts/firstMod' // 开头特定符 {/} 即代表采用单独路径
});
// 然后我们就可以像使用内置模块一样使用扩展模块
layui.use(['firstMod'], function(){
var firstMod = layui.firstMod;
firstMod.hello('World');
});
建立模块入口
在不同的页面中,可能需要用到不同的业务模块。当项目存在许多不同的业务模块(且存在一定的依赖关系),我们又希望在页面中建立统一的入口模块,我们可以将上述模块合并为一个文件来加载,即借助构建工具(如 Gulp)将多个业务模块合并到一个模块文件:index.js
,此时只需在页面统一加载该模块即可。这样我们最多只需要加载两个 JS 文件:layui.js、index.js
,这将大幅度减少静态资源的请求
<script src="/js/layui/layui.js"></script>
<script>
layui.config({
base: '/js/modules/' // 业务模块所在目录
}).use('index'); // 加载当前页面需要的业务模块
</script>
表单JS
API | 描述 |
---|---|
var form = layui.form | 获得 form 模块。 |
form.render(type, filter) | 表单域组件渲染,核心方法。#用法 |
form.verify(obj) | 自定义表单验证的规则。#用法 |
form.validate(elem) 2.7+ | 主动触发执行验证。#用法 |
form.val(filter, obj) | 表单赋值或取值。 #用法 |
form.submit(filter, callback) 2.7+ | 用于主动执行指定表单的提交。#用法 |
form.on('event(filter)', callback) | 事件。#用法 |
form.set(options) | 设置 form 组件全局配置项。 |
form.config | 获取 form 组件全局配置项。 |
属性
在表单域中,有时还需要定义一些特定属性来配合组件的使用,它们一般以 lay-*
为命名格式
属性 | 值 | 描述 |
---|---|---|
title | 自定义 | 设置表单元素标题,一般用于 checkbox,radio 元素 |
lay-filter | 自定义 | 设置表单元素的过滤器,以便用于执行相关方法时的参数匹配 |
lay-verify | required 必填项phone 手机号email 邮箱url 网址number 数字date 日期identity 身份证
自定义规则值 | 设置表单项的验证规则,支持单条或多条规则(多条用| 分隔),如:lay-verify="required" lay-verify="required|email" lay-verify="其他自定义规则值"
自定义规则的用法:#详见 注:2.8.3 版本中调整了内置规则,不再强制必填。 如需保留必填,可叠加 required 规则,如:lay-verify="required|number" |
lay-vertype | tips 吸附层alert 对话框msg 默认 | 设置验证异常时的提示层模式 |
lay-reqtext | 自定义 | 设置必填项(lay-verify="required" )的默认提示文本 |
lay-affix | #详见 | 输入框动态点缀,<input type="text"> 元素 私有属性 |
lay-skin | #详见 | 设置 UI 风格。 <input type="checkbox"> 元素 私有属性 |
lay-search | 默认不区分大小写; 设置 cs 区分大小写 | 给 select 组件开启搜索功能。<select> 元素 私有属性 |
lay-submit | 无需值 | 设置元素(一般为<button> 的属性:lay-submit)触发 submit 提交事件 |
lay-ignore | 无需值 | 设置表单元素忽略渲染,即让元素保留系统原始 UI 风格 |
渲染
form.render(type, filter);
- 参数
type
可选,对应表单组件类型,支持:input,select,checkbox,radio
;若不填,则指向所有类型。 - 参数
filter
可选,对应class="layui-form"
所在元素的lay-filter
属性值,用于指定需渲染的表单区域
常规渲染
form
组件会在元素加载完毕后,自动对所有表单区域完成一次渲染,因此该方法主要用于对动态插入的表单元素的渲染
<script>
layui.use(function(){
var form = layui.form;
// 当表单元素被插入插入时,需进行组件渲染才能显示
form.render(); // 渲染全部表单
form.render('select'); // 仅渲染 select 元素
form.render(null, 'test'); // 仅渲染 lay-filter="test" 的容器内的全部表单
form.render('checkbox', 'test'); // 仅渲染 lay-filter="test"的容器内的checkbox元素
})
</script>
定向渲染 2.7+
定向渲染在页面出现大量表单时,可以极大地减少表单组件渲染时的性能开销,建议灵活运用。指定表单元素的 jQuery 对象,从而完成定向渲染。且支持两种方式的指向:
- 若 jQuery 对象指向表单域容器(
class="layui-form"
),则渲染该表单域中的所有表单项;2.8+ - 若 jQuery 对象指向的不是表单域容器,则只对该对象进行渲染
<script>
layui.use('form', function(){
var $ = layui.$;
var form = layui.form;
// 定向渲染(一般当表单存在动态生成时,进行渲染)
// 传入需要渲染的相应表单元素的 jQuery 对象
form.render($('#form-id')); // 渲染 id="form-id" 的表单域中的所有表单项
form.render($('#select-id')); // 仅渲染 id="select-id" 的表单项
});
</script>
点缀事件
form.on('input-affix(filter)', callback);
input-affix
为输入框动态点缀事件固定名称filter
为输入框对应的lay-filter
属性值
form.on('input-affix(filter)', function(data){
var elem = data.elem; // 获取输入框 DOM 对象
var affix = data.affix; // 获取输入框 lay-affix 属性值
console.log(this); // 当前触发点缀事件的图标元素
});
复选框事件
风格 | 事件 |
---|---|
默认风格 / 标签风格 | form.on('checkbox(filter)', callback); |
开关风格 | form.on('switch(filter)', callback); |
checkbox
和switch
为复选框事件固定名称filter
为复选框元素对应的lay-filter
属性值
该事件在复选框选中或取消选中时触发
表格JS
API | 描述 |
---|---|
var table = layui.table | 获得 table 模块。 |
table.set(options) | 设定全局默认属性项。 |
table.render(options) | table 组件渲染,核心方法。 |
table.init(filter, options) | 初始化渲染静态表格。 |
table.reload(id, options, deep) | 表格完整重载。 |
table.reloadData(id, options, deep) 2.7+ | 表格数据重载。 |
table.renderData(id) 2.8.5+ | 重新渲染数据。 |
table.checkStatus(id) | 获取选中行相关数据。 |
table.setRowChecked(id, opts) 2.8+ | 设置行选中状态。 |
table.getData(id) | 获取当前页所有行表格数据。 |
table.cache | 获取表格缓存数据集(包含特定字段)。 |
table.resize(id) | 重置表格尺寸。 |
table.exportFile(id, data, opts) | 导出表格数据到本地文件。 |
table.getOptions(id) 2.8+ | 获取表格实例配置项。 |
table.hideCol(id, cols) 2.8+ | 设置表格列的显示隐藏属性。 |
table.on('event(filter)', callback) | table 相关事件。 |
修改表格日期格式:
{field: 'dateStart', width: '18%',templet: function (d) {
if (d.dateStart && d.dateStart !== '' &&
d.dateStart !== null ) {
return layui.util.toDateString(
d.dateStart, 'yyyy:MM:dd HH:mm:ss')
} else {
return '';
}
}
},
渲染
table 提供了以下三种渲染模式,在实际使用时,一般按情况选择其中一种即可。
渲染方式 | 描述 |
---|---|
方法配置渲染 | 通过 table 组件提供的核心方法 table.render(options) 完成的渲染。推荐 |
模板配置渲染 | 通过 <table> 标签的 lay-options="{}" 属性定义模板,组件自动对其进行解析并完成渲染。 |
静态表格渲染 | 对一段已经包含数据内容的静态表格进行动态化转换,使其具备 table 组件的相关功能。 |
方法配置渲染
table.render(options);
- 参数
options
: 基础属性配置项。#详见属性
该方法返回当前实例对象,包含可操作当前表格的一些成员方法。
// 渲染,并获得实例对象
var inst = table.render({
elem: '#test', // 绑定元素选择器
// 其他属性
// …
});
模板配置渲染
在 <table>
元素中直接书写 lay-options="{}"
属性,组件将自动对其进行解析并完成渲染
静态表格渲染
table.init(filter, options);
- 参数
filter
:<table>
元素对应的lay-filter
属性值 - 参数
options
: 基础属性配置项。#详见属性
该方法用于将已输出在页面中的静态表格内容转换为动态 table 组件。#参考相关示例
分页JS
API | 描述 |
---|---|
var laypage = layui.laypage | 获得 laypage 模块。 |
laypage.render(options) | laypage 组件渲染,核心方法。 |
属性名 | 描述 | 类型 | 默认值 |
---|---|---|---|
elem | 绑定分页容器。值可以是容器
| string DOM | - |
count | 数据总数。一般通过后端得到 | number | - |
limit | 每页显示的条数。 | number |
|
limits | 每页条数的选择项。 若 | array |
|
curr | 初始化当前页码。 | number |
|
groups | 连续出现的页码数量 | number |
|
prev | 自定义“上一页”的内容,支持传入普通文本和 HTML | string |
|
next | 自定义“下一页”的内容,用法同上。 | string |
|
first | 自定义“首页”的内容,用法同上。 | string |
|
last | 自定义“尾页”的内容,用法同上。 | string | 自动获得 |
layout | 自定义分页功能区域排版。可自由排列,可选值有:
| array | 查看默认值 |
theme | 自定义主题。支持传入:颜色值或任意普通字符。如:
| string | - |
hash | 设置 | string | - |
分页跳转后的回调函数。函数返回两个参数:
|
弹出层JS
属性名 | 描述 | 类型 | 默认值 |
---|---|---|---|
type | 弹层类型。 可选值有:
| number |
|
title | 弹层标题。其值支持以下可选类型:
| string array boolean |
|
弹层内容。 可传入的值比较灵活,支持以下使用场景:
注意: 若采用捕获层,则捕获的元素必须存放在
相关效果可参考:#示例 | |||
设置弹层的宽高,其值支持以下可选类型:
| array string |
| |
maxWidth | 弹层的最大宽度。当 | number |
|
maxHeight | 弹层的最大高度。当 | number | - |
弹层的偏移坐标。 支持以下可选值:
当设置边缘坐标时,可配合 | string array |
| |
弹层的出场动画。支持以下可选值:
边缘抽屉动画 2.8+:
抽屉动画一般配合 | number string |
| |
isOutAnim | 是否开启弹层关闭时的动画。 | boolean |
|
maxmin | 是否开启标题栏的最大化和最小化图标。 | boolean |
|
是否开启标题栏的关闭图标,或设置关闭图标风格。
| number |
| |
提示图标。 信息框和加载层的私有参数。
| number |
| |
自定义按钮。 页面层默认不开启。 按钮可无限数量,每一个按钮均会按照数组顺序生成对应的回调函数,如:
| string | - | |
按钮水平对其方式。支持以下可选值:
| string |
| |
弹层的主题风格。通过赋值对应的 className,实现对主题样式的定制。除了默认主题风格,还支持以下可选主题:
还可传入其他任意 className 来自定义主题。 参考:#示例 | string | - | |
弹层的遮罩。 支持以下写法:
| number array |
| |
shadeClose | 是否点击遮罩时关闭弹层。当遮罩存在时有效。 | boolean |
|
id | 弹层的唯一索引值。 一般用于页面层或 iframe 层弹出时的状态识别,设置该属性可防止弹层的重复弹出。 | string | - |
hideOnClose 2.8.3+ | 关闭弹层时,是否将弹层设置为隐藏状态(而非移除),当再次打开,直接显示原来的弹层。 若设为 | boolean |
|
time | 弹层自动关闭所需的毫秒数。 如 | number |
|
fixed | 弹层是否固定定位,即始终显示在页面可视区域。 | boolean |
|
zIndex | 弹层的初始层叠顺序值。 | number |
|
resize | 是否允许拖拽弹层右下角拉伸尺寸。 该属性对加载层和 tips 层无效。 | boolean |
|
scrollbar | 打开弹层时,是否允许浏览器出现滚动条。 | boolean |
|
minStack 2.6+ | 点击标题栏的最小化时,是否从页面左下角堆叠排列。 | boolean |
|
removeFocus 2.8+ | 是否移除弹层触发元素的焦点,避免按回车键时重复弹出。 | boolean |
|
move | 绑定弹层的拖拽元素。 默认为触发弹层的标题栏进行拖拽。也可以设置 | string DOM boolean | - |
moveOut | 否允许拖拽到窗口外 | boolean |
|
tips | 设置 tips 层的吸附位置和背景色,tips 层的私有属性。
| number array |
|
tipsMore | 是否允许同时存在多个 tips 层,即不销毁上一个 tips。 | boolean |
|
打开弹层成功后的回调函数。返回的参数如下:
| |||
点击「确定」按钮的回调函数。返回的参数同
| |||
点击标题栏关闭按钮的回调函数。返回的参数同 `success`
| |||
弹层被关闭且销毁后的回调函数。
| |||
弹层拖拽完毕后的回调函数。
| |||
弹层拉伸过程中的回调函数
| |||
弹层最大化后的回调函数。返回的参数同
| |||
弹层最小化后的回调函数。返回的参数同
| |||
弹层被还原后的回调函数。返回的参数同 `success`
|
第三方拓展
layui生态有很多第三方拓展组件:Layui 第三方扩展组件平台 (layuion.com)
Bootstrap
bootstrap是一个基于HTML、CSS和Javascript语言编写的框架,具有简单、灵活的特性,拥有样式库、组件和插件,bootstrap常用来开发响应式布局和移动设备优先的Web项目,能够帮助开发者快速搭建前端页面。
响应式所具有的特点
- 网页的宽度自动调整
- 尽量少用绝对宽度
- 字体要使用 rem、em 做为单位
- 布局要使用浮动、弹性布局
官网:Bootstrap v5 中文文档 · Bootstrap 是全球最受欢迎的 HTML、CSS 和 JS 前端工具库。 | Bootstrap 中文网 (bootcss.com)
中文文档:Bootstrap 入门 · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网 (bootcss.com)
进入中文文档->下载->下载Bootstrap生产文件
目录结构:
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
less/
、js/
和 fonts/
目录分别包含了 CSS、JS 和字体图标的源码。dist/
目录包含了预编译 Bootstrap 包内的所有文件。docs/
包含了所有文档的源码文件,examples/
目录是 Bootstrap 官方提供的实例工程。除了这些,其他文件还包含 Bootstrap 安装包的定义文件、许可证文件和编译脚本等。
使用:
低版本bootstrap.min.js 文件是依赖于 jquery 的,所以 jquery.js要在 bootstrap.min.js 之前引入
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" />
<script src="/js/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
栅格系统
- Bootstrap包含了一个响应式的,移动设备优先的,不固定的网格系统,可以随着设备或者视口大小的增加而适当的扩展到12列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的强大的混合类,v5版本划分了6个响应区间
- 表示行的class: row
- 表示列的class: 注:("*"可选:1-12之间的任意数字,其它无效)