?经典模块化前端框架,低门槛开箱即用的前端 UI 解决方案.
??其他UI框架：
????Bootstrap，Element， EasyUI，LayUI 等等
?Layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。
??1. 官网首页下载 https://www.layui.com/
??2. 引入layui核心文件：
layui/css/layui.css // layui中内置的样式
layui/layui.js // layui中核心的js插件(模块化使用)
layui/layui.all.js // layui中所有的js??3. layui的目录介绍:
???layui
????├─css //css目录
????│ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
????│ │ ├─laydate
????│ │ ├─layer
????│ │ └─layim
????│ ├─layui.css?//核心样式文件
????│ └─layui.mobile.css?//移动端CCSS样式
????├─font?//字体图标目录（内置字体）
????├─images?//图片资源目录（目前只有layim和编辑器用到的GIF表情）
????│─lay?//模块核心目录
????│ └─modules?//各模块组件（所有模块的JS）
????│─layui.js?//基础核心库（所有JS的入口）
????└─layui.all.js?//包含layui.js和所有模块的合并文件（layui中所有的js）
示例:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<!--
1. 在JS引入时 若引入多个JS, JS之间存在依赖性.则优先引入被依赖的JS
2. 一般引入JS,在body的最后面引入,因为代码自上而下的执行,这样可以等页面的DOM元素都加载了引入JS,避免不生效和异常问题
-->
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
// 初始化layui模块
layui.use(['form','jquery'],function(){
// 初始化模块的对象
// 初始化jquery对象
var $ = layui.jquery;
// 初始化form表单模块对象
var form = layui.form;
});
</script>
</body>
</html>栅格系统：
容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用.一.栅格布局规则
<div class="layui-row"></div>| 样式 | 颜色 |
|---|---|
| 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" | 银灰：背景、边框 |
? 通过对一个内联元素（一般推荐用 i标签）设定 class="layui-icon"，来定义一个图标.然后对元素加上图标对应的字体图标.
layui-icon : 表示是一个字体图标
layui-icon-XXXX:具体的内置图标
字体图标在LayUI中有两种表现方式：
? 1.使用class样式
? 2.使用图标字符集
例如:
<p>字体图标</p>
<!-- 使用class样式 -->
<i class="layui-icon layui-icon-rate"></i>
<!-- 使用特殊的字体字符集 -->
<i class="layui-icon"></i>? 内置动画,使用: class="layui-anim" 表示是动画,动画Layui内置8种,后面跟具体的动画效果
| 动画样式 | 动画效果 |
|---|---|
| class="layui-anim layui-anim-up" | 从最底部往上滑入 |
| class="layui-anim layui-anim-upbit" | 微微向上划入 |
| class="layui-anim layui-anim-scale" | 平滑放大 |
| class="layui-anim layui-anim-scaleSpring" | 弹簧式放大 |
| class="layui-anim layui-anim-fadein" | layui-anim-fadein |
| class="layui-anim layui-anim-fadeout" | 渐隐 |
| class="layui-anim layui-anim-rotate" | 360旋转 |
| class="layui-anim layui-anim-loop" | 循环动画 |
? 使用class = "layui-btn" 表示按钮样式
颜色:
| 名称 | 组合 |
|---|---|
| 原始 | 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" |
尺寸:
| 尺寸 | 组合 |
|---|---|
| 大型 | class="layui-btn layui-btn-lg" |
| 默认 | class="layui-btn" |
| 小型 | class="layui-btn layui-btn-sm" |
| 迷你 | class="layui-btn layui-btn-xs" |
形状:
是否圆角:class=" layui-btn-radius" :表示圆角
例如:
| 主题 | 组合 |
|---|---|
| 原始 | class="layui-btn layui-btn-radius layui-btn-primary" |
| 默认 | class="layui-btn layui-btn-radius" |
| 百搭 | class="layui-btn layui-btn-radius layui-btn-normal" |
| 暖色 | class="layui-btn layui-btn-radius layui-btn-warm" |
| 警告 | class="layui-btn layui-btn-radius layui-btn-danger" |
| 禁用 | class="layui-btn layui-btn-radius layui-btn-disabled" |
图标按钮:即将button和i标签使用字体图标结合
<button class="layui-btn layui-btn-lg layui-btn-danger">
<i class="layui-icon layui-icon-fire"></i>按钮
</button>注意:
? class="layui-btn-group" 按钮组,将多个按钮放在一起，可以缩小默认的按钮之间的间隙
? layui默认导航是水平导航,使用: class="layui-nav".
? class="layui-nav-item" : 表示导航中的项
class="layui-nav" 表示导航 水平导航
? |--- class="layui-nav-item" 表示导航中的具体项
? |--- class="layui-nav-child" 表示导航项中的子项
? |--- class="layui-this" 表示当前被选中的项
class="layui-nav layui-nav-tree" : 表示是导航中垂直导航
? |--- class="layui-nav-itemed" : 被展开的导航项
? |--- class="layui-nav-side" : 会垂直占一列
导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能.
在layui中,class="layui-tab"表示是一个选项卡
? |--- class="layui-tab-title" : 表示选项卡的标题
? |--- class="layui-this" : 表示当前被选中的项
? |--- class="layui-tab-content" : 表示选项卡中的内容
? |--- class="layui-tab-item" : 表示内容项
? |--- class="layui-show" : 表示当前内容项会展示
| 样式 | 说明 |
|---|---|
| layui-tab-brief | 简单风格(下划线) |
| layui-tab-card | Tab卡片风格(块) |
| 属性名 | 说明 |
|---|---|
| lay-allowClose="true" | 选项卡可以被关闭(只要该属性有值,则表示生效) |
| lay-id="xxx" | 选项卡中用于设置选项的唯一的匹配索引 |
| lay-filter="xxx" | 选卡的唯一标识(一般用于layui中事件) |
| 事件名 | 说明 |
|---|---|
| element.on(‘tab(filter)‘, function(data){}); | 监听选项卡切换 |
| element.on(‘tabDelete(filter)‘, function(data){})‘ | 监听选项卡的删除 |
| element.tabAdd(‘demo‘, options); | 新增选项卡 |
| element.tabChange(‘lay-filter值‘, layid); | 切换选项卡 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<div class="layui-tab" lay-allowClose="true" lay-filter="myTab">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item ">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
<button id="addBtn">新增一个选项卡</button>
<button id="addBtn2">切换选项卡</button>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['element','jquery'],function(){
var element = layui.element;
var $ = layui.jquery;
//选项卡事件:
//选项卡切换事件
element.on('tab(myTab)',function(data){//tab(lay-filter的值)
console.log(data);
//当前选项信息: 整个选项卡信息以及当前信息
console.log(data.elem);
console.log("get(0):"+data.elem.get(0)); //jquery 对象 : js对象转化为jquery对象 jquery 对象怎么转化为js对象
// js对象转化为jquery 对象 : $(js对象) :
// 获取上一个选项
console.log(data.elem.prevObject);
//所在选项卡的下标索引, 从 0 开始
console.log(data.index);
});
//选项卡删除事件
element.on('tabDelete(myTab)', function(data){//tab(lay-filter的值)
console.log(this); //当前Tab标题所在的原始DOM元素
console.log(data.index); //得到当前Tab的所在下标
console.log(data.elem); //得到当前的Tab大容器
});
//为按钮绑定点击事件
$("#addBtn").click(function(){
//新增选项卡
var tab = {
title: '新增选项卡的标题',
content: '选项卡的内容', //支持传入html
id: '999'
};
element.tabAdd("myTab", tab);
});
//切换选项卡
$("#addBtn2").click(function(){
//切换选项卡 tabChange("lay-filter的值", lay-id值);
element.tabChange("myTab", 999);
});
});
</script>
</body>
</html>? 在layui中,使用class="layui-progress"表示进度条.
? class="layui-progress-bar" 表示具体的进度条
? class="layui-progress-big" 表示尺度大号
| 属性名 | 说明 |
|---|---|
| lay-percent="10%" | 进度条进度 |
| lay-showPercent="true" | 是否显示进度值 |
| lay-filter="XXX" | 事件操作相关属性值 |
| 事件名称 | 说明 |
|---|---|
| element.progress(‘lay-filter的值‘,value); | 更新进度条进度 |
示例:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body style="padding: 100px">
<!-- 表示进度条 -->
<div class="layui-progress" lay-showPercent="true" lay-filter="myProgress">
<div class="layui-progress-bar" lay-percent="0%" id="myProgressBar"></div>
</div>
<button id="btn1">开始涨涨涨</button>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['element','jquery'],function(){
var element = layui.element;
var $ = layui.jquery;
//点击按钮后 让进度条进度增涨
$("#btn1").click(function(){
var m = 10;
window.setInterval(function(){
var v = m+"%";
m = m+10;
if(m > 100){
m = 100;
}
//获取进度条的值
element.progress('myProgress', v);
}, 1000);
});
});
</script>
</body>
</html>? 在layui中,面板是指:一个独立的容器,装元素，而折叠面板则能有效地节省页面的可视面积.
? class="layui-card" : 表示普通面板
? |--- class="layui-card-header" 面板的头部信息
? |--- class="layui-card-body" 面板内容
? class="layui-collapse" : 表示折叠面板
? |--- class="layui-colla-item" : 折叠面板中的项
? |--- class="layui-colla-title" : 折叠面板中的项中的标题
? |--- class="layui-colla-content" : 折叠面板项中的内容
? |--- class="layui-show" : 折叠面板中 展开的项
| 属性名 | 说明 |
|---|---|
| lay-accordion | 表示折叠面板只能展开一个面板项 |
| 事件名 | 说明 |
|---|---|
| element.on(‘collapse(lay-filter值)‘, function(data){}); | 监听面板的展开或者收缩 |
示例:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body style="padding-left: 100px">
<h1>普通面板</h1>
<div class="layui-card">
<div class="layui-card-header">面板标题</div>
<div class="layui-card-body">
面板内容
</div>
</div>
<h1>折叠面板</h1>
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">李清照</h2>
<div class="layui-colla-content ">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">鲁迅</h2>
<div class="layui-colla-content ">内容区域</div>
</div>
</div>
<h1>手风琴面板---只能显示一个</h1>
<div class="layui-collapse" lay-accordion lay-filter="myPanel">
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">李清照</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">鲁迅</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
</div>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['element','jquery'],function(){
var element = layui.element;
var $ = layui.jquery;
//监听面板的展开或者收缩
element.on('collapse(myPanel)', function(data){
//console.log(data);
console.log(data.show); //得到当前面板的展开状态，true或者false
console.log(data.title); //得到当前点击面板的标题区域DOM对象
console.log(data.content); //得到当前点击面板的内容区域DOM对象
});
});
</script>
</body>
</html>在layui中,使用class="layui-timeline"表示时间线.
使用class="layui-timeline-item" 表示实现线中的项
? |--- class="layui-timeline-content 表示时间线的内容
? |--- class="layui-timeline-title" 表示内容的标题
? 使用<p>标签表示具体的内容
注意: 在时间线中可以插入图标:
<i class="layui-icon layui-timeline-axis"></i>示例:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body style="padding-left: 100px">
<ul class="layui-timeline">
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月18日</h3>
<p>
layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
<br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
<br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月16日</h3>
<p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
<ul>
<li>《登高》</li>
<li>《茅屋为秋风所破歌》</li>
</ul>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月15日</h3>
<p>
中国人民抗日战争胜利72周年
<br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
<br>铭记、感恩
<br>所有为中华民族浴血奋战的英雄将士
<br>永垂不朽
</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis" style="color:red"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">过去</div>
</div>
</li>
</ul>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['element','jquery'],function(){
var element = layui.element;
var $ = layui.jquery;
});
</script>
</body>
</html>? 在layui中,layui不仅仅为表单提供了一套内置的样式.也为表单提供了一系列的操作的方法.
class="layui-form"表示该容器使用表单的样式.该样式,是表单中具体样式的基础.
? |--- class="layui-form-item" : 表示表单中的具体项
? |--- class="layui-form-label" : 表示表单项中label标签,文本说明
? |--- class="layui-input-block" : 表示一个input容器,block块元素 占一行
? |--- class="layui-input-inline" : 表示一个input容器,inline 行内块.不占一行
? |--- class="layui-input" : 表示一个input标签
? |--- class="layui-inline" : 表示不独占一行,一般用于一项中存在多个form元素,使用其包裹
? 在layui中,对form表单中checkbox,radio,select的样式,做了特殊处理.使用javascript,根据原生input中的属性,进行渲染,重新生成了响应效果的DIV元素.并且生成的DIV元素与原生input标签存在属性值的绑定关系.
| 属性名 | 说明 |
|---|---|
| title | 显示的文字 |
| lay-skin | 风格:默认 primary 原始复选框效果 switch: 开关形式 |
| checked | 选中 |
| value | 复选框值 |
| lay-text="文本1|文本2" | 开关效果显示的文字 |
| 属性名 | 说明 |
|---|---|
| title | 显示的文字 |
| checked | 选中 |
| value | 复选框值 |
| 属性名 | 说明 |
|---|---|
| selected | 选中 |
| lay-search | 开启搜索效果 |
| 属性名 | 属性值 | 说明 |
|---|---|---|
| title | 任意字符 | 设定元素名称，一般用于checkbox、radio框 |
| lay-skin | switch（开关风格） primary（原始风格） | 定义元素的风格，目前只对 checkbox 元素有效，可将其转变为开关样式 |
| lay-ignore | 任意字符或不设值 | 是否忽略元素美化处理。设置后，将不会对该元素进行初始化渲染，即保留系统风格 |
| lay-filter | 任意字符 | 事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的。其实它并不私属于form模块，它在 layui 的很多基于事件的接口中都会应用到。 |
| lay-verify | email（邮箱）url（网址） number（数字） date（日期） identity（身份证） 自定义值 | 同时支持多条规则的验证，格式：lay-verify="验证A|验证B" 如：lay-verify="required|phone|number" 另外，除了我们内置的校验规则，你还可以给他设定任意的值，比如lay-verify="pass"，那么你就需要借助form.verify()方法对pass进行一个校验规则的定义。详见表单验证 |
| lay-verType | tips（吸附层） alert（对话框） msg（默认） | 用于定义异常提示层模式。 |
| lay-reqText | 任意字符 | 用于自定义必填项（即设定了 lay-verify="required" 的表单）的提示文本 注意：该功能为 layui 2.5.0 新增 |
| lay-submit | 无需填写值 | 绑定触发提交的元素，如button |
示例:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body style="padding: 100px">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">显示文字</label>
<!-- input 容器 这种是独占一行 -->
<div class="layui-input-block">
<input class="layui-input" placeholder="独占一行" lay-verify="required|phone" lay-verType="msg" lay-reqText="独占一行不能为空" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">显示文字1</label>
<!-- input 容器 这种是独占一行 -->
<div class="layui-input-inline">
<input class="layui-input" lay-verify="number|username" lay-verType="tips"/>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">显示文字</label>
<!-- input 容器 这种是独占一行 -->
<div class="layui-input-inline">
<input class="layui-input" placeholder="显示的文字" />
</div>
</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="写作" lay-skin="primary">
<!-- 开关风格 -->
<input type="checkbox" name="like[read]" lay-text="文本1|文本2" lay-skin="switch" checked>
<!-- 默认风格 -->
<input type="checkbox" name="like[dai]" title="发呆">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选按钮:</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">下拉框:</label>
<div class="layui-input-block">
<select name="city" lay-verify="" lay-search>
<option value="010">layer</option>
<option value="021">form</option>
<option value="0571" selected>layim</option>
</select>
</div>
</div>
<button class="layui-btn" lay-submit >提交</button>
</form>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use([ 'element', 'jquery', 'form' ], function() {
var element = layui.element;
var $ = layui.jquery;
var from = layui.form;
//自定义校验规则
from.verify({
username:function(value, item){
console.log(value);
if(value.length < 10){
return '用户名不能少于10位';
}
}
});
});
</script>
</body>
</html>| 事件类型 | 描述 |
|---|---|
| select | 监听select下拉选择事件 |
| checkbox | 监听checkbox复选框勾选事件 |
| switch | 监听checkbox复选框开关事件 |
| radio | 监听radio单选框事件 |
| submit | 监听表单提交事件 |
| 方法名称 | 解释 |
|---|---|
| render() | 重新渲染 |
| val() | 获取或者为表单赋值 |
示例:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body style="padding: 100px">
<form class="layui-form" action="http://www.baidu.com" lay-filter="myForm">
<div class="layui-form-item">
<label class="layui-form-label">显示文字</label>
<!-- input 容器 这种是独占一行 -->
<div class="layui-input-block">
<input class="layui-input" name="input1" value="13111111111" placeholder="独占一行" lay-verify="required|phone" lay-verType="msg" lay-reqText="独占一行不能为空" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">显示文字1</label>
<!-- input 容器 这种是独占一行 -->
<div class="layui-input-inline">
<input class="layui-input" name="input2" value="13111111111" lay-verify="number|username" lay-verType="tips"/>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">显示文字</label>
<!-- input 容器 这种是独占一行 -->
<div class="layui-input-inline">
<input class="layui-input" name="input3" placeholder="显示的文字" />
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选框:</label>
<div class="layui-input-block">
<!-- 原始风格 -->
<input type="checkbox" lay-filter="formCheckbox" value="写作" name="like[write]" title="写作" lay-skin="primary">
<!-- 开关风格 -->
<input type="checkbox" lay-filter="formCheckbox" value="文本" name="like[text]" lay-text="文本1|文本2" lay-skin="switch" checked>
<!-- 默认风格 -->
<input type="checkbox" lay-filter="formCheckbox" value="发呆" name="like[dai]" title="发呆">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选按钮:</label>
<div class="layui-input-block">
<input type="radio" lay-filter="formRadio" name="sex" value="男" title="男">
<input type="radio" lay-filter="formRadio" name="sex" value="女" title="女" checked>
<input type="radio" lay-filter="formRadio" name="sex" value="" title="中性" disabled>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">下拉框:</label>
<div class="layui-input-block">
<select id="city" name="city" lay-search lay-filter="formSelect">
<option value="010">layer</option>
<option value="021">form</option>
<option value="0571" selected>layim</option>
</select>
</div>
</div>
<button class="layui-btn" lay-submit lay-filter="submitBtn">提交</button>
</form>
<br>
<button class="layui-btn" id="initForm">为表单初始化值</button>
<br>
<button class="layui-btn" id="addDom">为下拉框新增option</button>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use([ 'element', 'jquery', 'form' ], function() {
var element = layui.element;
var $ = layui.jquery;
var form = layui.form;
//自定义校验规则
form.verify({
username:function(value, item){
if(value.length < 10){
return '用户名不能少于10位';
}
}
});
//==========监听下拉框选择事件===========
//监听下拉框选择事件
form.on("select(formSelect)",function(data){
console.log(data);
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
});
//==========复选框选择事件:只支持原生风格 默认风格===========
form.on("checkbox(formCheckbox)",function(data){// checkbox(lay-filter): 每个checkbox上的lay-filter 并且只支持 原生风格和默认风格
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //是否被选中，true或者false
console.log(data.value); //复选框value值，也可以通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
});
//===========复选框选择事件:开关风格===========
form.on("switch(formCheckbox)",function(data){// checkbox(lay-filter): 每个checkbox上的lay-filter 并且只支持 开关风格
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //开关是否开启，true或者false
console.log(data.value); //开关value值，也可以通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
});
//==========单选按钮:==========
form.on("radio(formRadio)",function(data){// checkbox(lay-filter): 每个checkbox上的lay-filter 并且只支持 开关风格
console.log(data.elem); //得到radio原始DOM对象
console.log(data.value); //被点击的radio的value值
});
//========监听表单提交=========
form.on('submit(submitBtn)',function(data){// submit(lay-filter值):lay-filter值是提交按钮上面
console.log(data);
console.log(data.field);
//阻止表单提交 因为表单提交后 会刷新页面.一般使用ajax提交表单数据,然后阻止表单提交.只有使用layui的表单提交才能触发数据校验.
//使用layui的表单提交事件,在事件中使用ajax提交数据,然后阻止表单提交,这样既可以使用layui的数据校验,也可以使用ajax的异步提交数据
return false;
});
//==========方法: 为表单初始化值:===========
$("#initForm").click(function(){
var data = {
'input1':'12345678911',
'input2':'12345678911',
'input3':'12345678911',
'like[write]': true,
'like[text]':true,
'like[dai]':true,
'sex':'女',
'city':'021'
};
form.val("myForm",data);//此时lay-filter值,是form表单上的lay-filter值
//得到form的值
console.log(form.val("myForm"));
});
//===========方法: 重新渲染表单============
$("#addDom").click(function(){
$("#city").append("<option value='option' >新增option</option>");
//重新渲染表单
form.render();
});
});
</script>
</body>
</html>? 在layui中,使用class="layui-table"表示表格的样式.表格分为静态表格和动态表格.静态表格是指页面固定数据写死的静态HTML标签.动态的表格是指使用Javascript自动渲染出来的表格.根据数据,以及特定属性渲染出响应的表格.
| 参数 | 类型 | 说明 | 示例值 |
|---|---|---|---|
| elem | String/DOM | 指定原始 table 容器的选择器或 DOM，方法渲染方式必填 | "#demo" |
| cols | Array | 设置表头。值是一个二维数组。方法渲染方式必填 | 详见表头参数 |
| url（等） | - | 异步数据接口相关参数。其中 url 参数为必填项 | 详见异步接口 |
| toolbar | String/DOM/Boolean | 开启表格头部工具栏区域，该参数支持四种类型值：toolbar: ‘#toolbarDemo‘ //指向自定义工具栏模板选择器toolbar: ‘ xxx ‘ //直接传入工具栏模板字符toolbar: true //仅开启工具栏，不显示左侧模板toolbar: ‘default‘ //让工具栏左侧显示默认的内置模板注意： 1. 该参数为 layui 2.4.0 开始新增。 2. 若需要“列显示隐藏”、“导出”、“打印”等功能，则必须开启该参数 |
false |
| defaultToolbar | Array | 该参数可自由配置头部工具栏右侧的图标按钮 | 详见头工具栏图标 |
| width | Number | 设定容器宽度。table容器的默认宽度是跟随它的父元素铺满，你也可以设定一个固定值，当容器中的内容超出了该宽度时，会自动出现横向滚动条。 | 1000 |
| height | Number/String | 设定容器高度 | 详见height |
| cellMinWidth | Number | （layui 2.2.1 新增）全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth | 100 |
| done | Function | 数据渲染完的回调。你可以借此做一些其它的操作 | 详见done回调 |
| data | Array | 直接赋值数据。既适用于只展示一页数据，也非常适用于对一段已知数据进行多页展示。 | [{}, {}, {}, {}, …] |
| totalRow | Boolean | 是否开启合计行区域。layui 2.4.0 新增 | false |
| page | Boolean/Object | 开启分页（默认：false） 注：从 layui 2.2.0 开始，支持传入一个对象，里面可包含 laypage 组件所有支持的参数（jump、elem除外） | {theme: ‘#c00‘} |
| limit | Number | 每页显示的条数（默认：10）。值务必对应 limits 参数的选项。 注意：优先级低于 page 参数中的 limit 参数 | 30 |
| limits | Array | 每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。 注意：优先级低于 page 参数中的 limits 参数 | [30,60,90] |
| loading | Boolean | 是否显示加载条（默认：true）。如果设置 false，则在切换分页时，不会出现加载条。该参数只适用于 url 参数开启的方式 | false |
| title | String | 定义 table 的大标题（在文件导出等地方会用到）layui 2.4.0 新增 | "用户表" |
| text | Object | 自定义文本，如空数据时的异常提示等。注：layui 2.2.5 开始新增。 | 详见自定义文本 |
| autoSort | Boolean | 默认 true，即直接由 table 组件在前端自动处理排序。 若为 false，则需自主排序，通常由服务端直接返回排序好的数据。 注意：该参数为 layui 2.4.4 新增 | 详见监听排序 |
| initSort | Object | 初始排序状态。用于在数据表格渲染完毕时，默认按某个字段排序。 | 详见初始排序 |
| id | String | 设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件，它是表格容器的索引，你在下文诸多地方都将会见识它的存在。 值得注意的是：从 layui 2.2.0 开始，该参数也可以自动从 |
test |
| skin（等） | - | 设定表格各种外观、尺寸等 | 详见表格风格 |
| 参数 | 类型 | 说明 | 示例值 |
|---|---|---|---|
| field | String | 设定字段名。字段名的设定非常重要，且是表格数据列的唯一标识,其值是JSON数据中key | username |
| title | String | 设定标题名称,显示标题 | 用户名 |
| width | Number/String | 设定列宽，若不填写，则自动分配；若填写，则支持值为：数字、百分比 请结合实际情况，对不同列做不同设定。 | 200 30% |
| minWidth | Number | 局部定义当前常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth | 100 |
| type | String | 设定列类型。可选值有：normal（常规列，无需设定）checkbox（复选框列）radio（单选框列，layui 2.4.0 新增）numbers（序号列）space（空列） | 任意一个可选值 |
| LAY_CHECKED | Boolean | 是否全选状态（默认：false）。必须复选框列开启后才有效，如果设置 true，则表示复选框默认全部选中。 | true |
| fixed | String | 固定列。可选值有：left（固定在左）、right（固定在右）。一旦设定，对应的列将会被固定在左或右，不随滚动条而滚动。 注意：如果是固定在左，该列必须放在表头最前面；如果是固定在右，该列必须放在表头最后面。 | left（同 true） right |
| hide | Boolean | 是否初始隐藏列，默认：false。layui 2.4.0 新增 | true |
| totalRow | Boolean | 是否开启该列的自动合计功能，默认：false。layui 2.4.0 新增 | true |
| totalRowText | String | 用于显示自定义的合计文本。layui 2.4.0 新增 | "合计：" |
| sort | Boolean | 是否允许排序（默认：false）。如果设置 true，则在对应的表头显示排序icon，从而对列开启排序功能。注意：不推荐对值同时存在“数字和普通字符”的列开启排序，因为会进入字典序比对。比如：‘贤心‘ > ‘2‘ > ‘100‘，这可能并不是你想要的结果，但字典序排列算法（ASCII码比对）就是如此。 | true |
| unresize | Boolean | 是否禁用拖拽列宽（默认：false）。默认情况下会根据列类型（type）来决定是否禁用，如复选框列，会自动禁用。而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能。 | false |
| edit | String | 单元格编辑类型（默认不开启）目前只支持：text（输入框） | text |
| event | String | 自定义单元格点击事件名，以便在 tool 事件中完成对该单元格的业务处理 | 任意字符 |
| style | String | 自定义单元格样式。即传入 CSS 样式 | background-color: #5FB878; color: #fff; |
| align | String | 单元格排列方式。可选值有：left（默认）、center（居中）、right（居右） | center |
| colspan | Number | 单元格所占列数（默认：1）。一般用于多级表头 | 3 |
| rowspan | Number | 单元格所占行数（默认：1）。一般用于多级表头 | 2 |
| templet | String | 自定义列模板，模板遵循 laytpl 语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等 | 详见自定义模板 |
| toolbar | String | 行工具栏 | 详见行工具事件 |
? 数据的异步请求由以下几个参数组成：
| 参数名 | 功能 |
|---|---|
| url | 接口地址。默认会自动传递两个参数：?page=1&limit=30（该参数可通过 request 自定义） page 代表当前页码、limit 代表每页数据量 |
| method | 接口http请求类型，默认：get |
| where | 接口的其它参数。如：where: {token: ‘sasasas‘, id: 123} |
| contentType | 发送到服务端的内容编码类型。如果你要发送 json 内容，可以设置：contentType: ‘application/json‘ |
| headers | 接口的请求头。如：headers: {token: ‘sasasas‘} |
| parseData | 数据格式解析的回调函数,用于将返回的任意数据格式解析成 table 组件规定的数据格式.在layui中,默认规定返回3个字段: code,msg,count,data,并且默认code的值为0表示正常.其他值不正常.且data是一个数组.其他格式layui默认是无法解析.所以需要使用parseData函数进行适配. |
| request | 用于对分页请求的参数：page、limit重新设定名称，如： |
| response | 如果你想重新规定返回的数据格式，那么可以借助 response 参数，如： |
在layui中,渲染表格存在两种方式:
? 所谓的自动渲染，即：在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。你需要关注的是以下三点：
| 标签中设置属性lay-data=""用于配置表头信息
示例: 方式二:方法渲染? 方法级渲染”将基础参数的设定放在了JS代码中",页面只需要定义一个table,然后在JS中找到table进行绑定.然后将这个table进行数据渲染。 示例: table中的方法
事件监听
注意: 在工具栏事件中,工具栏中存在多个按钮,即多种事件,在layui中,使用lay-event进行区分. 示例: 日期和时间- laydate(重点)laydate使用
配置参数
事件
代码示例: 弹出层-layer(重点)layer的使用
入门示例: 基础参数
属性示例 方法
事件
代码示例: 原文：https://www.cnblogs.com/lyang-a/p/11939156.html
踩
(0)
赞
(0)
举报
评论 一句话评论（0）
|
|---|
