共计 26430 个字符,预计需要花费 67 分钟才能阅读完成。
LayUI
LayUI 的装置及应用
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 驱动。
下载与应用
-
在 官网首页 下载到 layui 的最新版。目录构造如下:
├─css // css 目录 │ │─modules // 模块 css 目录(个别如果模块绝对较大,咱们会独自提取,比方上面三个:)│ │ ├─laydate │ │ ├─layer │ │ └─layim │ └─layui.css // 外围款式文件 ├─font // 字体图标目录 ├─images // 图片资源目录(目前只有 layim 和编辑器用到的 GIF 表情)│─lay // 模块外围目录 │ └─modules // 各模块组件 │─layui.js // 根底外围库 └─layui.all.js // 蕴含 layui.js 和所有模块的合并文件 - 取得 layui 后,将其残缺地部署(拷贝到我的项目中)到你的我的项目目录,你只须要引入下述两个文件:
./layui/css/layui.css | |
./layui/layui.js // 提醒:如果是采纳非模块化形式,此处可换成:./layui/layui.all.js |
- 根本的入门页面
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |
<title> 开始应用 layui</title> | |
<link rel="stylesheet" href="layui/css/layui.css"> | |
</head> | |
<body> | |
<!-- 你的 HTML 代码 --> | |
<script src="layui/layui.js"></script> | |
<script> // 模块和回调函数 | |
// 个别间接写在一个 js 文件中 | |
layui.use(['layer', 'form'], function(){ | |
var layer = layui.layer | |
,form = layui.form; | |
layer.msg('Hello World'); | |
}); </script> | |
</body> | |
</html> |
-
还须要申明须要应用的 模块 和 回调函数。参照官网文档,抉择本人想要的成果就行。
比方:
<script> // 留神:导航 依赖 element 模块,否则无奈进行功能性操作 layui.use('element', function(){ var element = layui.element; //… }); </script>
页面元素
布局
布局容器
固定宽度
将栅格放入一个带有 class=“layui-container” 的特定的容器中,以便在小屏幕以上的设施中固定宽度,让列可控。
<div class="layui-container"> | |
<div class="layui-row"> | |
…… | |
</div> | |
</div> |
残缺宽度
能够不固定容器宽度。将栅格或其它元素放入一个带有 class=“layui-fluid” 的容器中,那么宽度将不会固定,而是 100% 适应
<div class="layui-fluid"> | |
…… | |
</div> |
栅格零碎
为了丰盛网页布局,简化 HTML/CSS 代码的耦合,并晋升多终端的适配能力,layui 引进了一套具备响应式能力的栅格零碎。将容器进行了 12 等分,预设了 4*12 种 CSS 排列类,它们在挪动设施、平板、桌面中 / 大尺寸四种不同的屏幕下施展着各自的作用。
栅格布局规定
-
采纳 layui-row 来定义行,如:
<div class="layui-row"></div>
-
采纳相似 layui-col-md* 这样的预设类来定义一组列(column),且放在行(row)内。其中:
- 变量 md 代表的是不同屏幕下的标记
- 变量 * 代表的是该列所占用的 12 等分数(如 6 /12),可选值为 1 – 12
- 如果多个列的“等分数值”总和等于 12,则刚好满行排列。如果大于 12,多余的列将主动另起一行。
- 列能够同时呈现最多四种不同的组合,别离是:_xs_(超小屏幕,如手机)、_sm_(小屏幕,如平板)、_md_(桌面中等屏幕)、_lg_(桌面大型屏幕)。
- 可对列追加相似 layui-col-space5_、_layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
- 能够在列(column)元素中放入你本人的任意元素填充内容
示例:
<h3> 惯例布局(以中型屏幕桌面为例):</h3> | |
<div class="layui-row"> | |
<div class="layui-col-md9" style="background-color: #00F7DE;"> | |
你的内容 9/12 | |
</div> | |
<div class="layui-col-md3" style="background-color: rosybrown;"> | |
你的内容 3/12 | |
</div> | |
</div> |
响应式规定
栅格的响应式能力,得益于 CSS3 媒体查问(Media Queries)的强力反对,从而针对四类不同尺寸的屏幕,进行相应的适配解决。
超小屏幕 (手机 <768px)
小屏幕 (平板≥768px)
中等屏幕 (桌面≥992px)
大型屏幕(桌面≥1200px)
_.layui-container_的值
auto
750px
970px
1170px
标记
xs
sm
md
lg
列对应类 * 为 1 -12 的等分数值
layui-col-xs*
layui-col-sm*
layui-col-md*
layui-col-lg*
总列数
12
12
12
12
响应行为
始终按设定的比例程度排列
在以后屏幕下程度排列,如果屏幕大小低于临界值则重叠排列
在以后屏幕下程度排列,如果屏幕大小低于临界值则重叠排列
在以后屏幕下程度排列,如果屏幕大小低于临界值则重叠排列
<h3> 平板、桌面端的不同体现:</h3> | |
<div class="layui-row"> | |
<div class="layui-col-sm6 layui-col-md4" style="background-color: thistle"> | |
平板≥768px:6/12 | 桌面端≥992px:4/12 | |
</div> | |
</div> | |
<div class="layui-row"> | |
<div class="layui-col-sm4 layui-col-md6" style="background-color: mediumaquamarine;"> | |
平板≥768px:4/12 | 桌面端≥992px:6/12 | |
</div> | |
</div> | |
<div class="layui-row"> | |
<div class="layui-col-sm12 layui-col-md8" style="background-color: coral"> | |
平板≥768px:12/12 | 桌面端≥992px:8/12 | |
</div> | |
</div> |
列边距
通过“列间距”的预设类,来设定列之间的间距。且一行中最左的列不会呈现右边距,最右的列不会呈现左边距。列间距在保障排版好看的同时,还能够进一步保障分列的宽度精密水平。咱们联合网页罕用的边距,预设了 12 种不同尺寸的边距,别离是:
/* 反对列之间为 1px-30px 区间的所有单数距离,以及 1px、5px、15px、25px 的复数距离 */ | |
layui-col-space1 | |
layui-col-space2 | |
layui-col-space4 | |
layui-col-space5 | |
layui-col-space6 | |
layui-col-space8 | |
layui-col-space10 | |
layui-col-space12 | |
layui-col-space14 | |
layui-col-space15 | |
layui-col-space16 | |
layui-col-space18 | |
layui-col-space20 | |
layui-col-space22 | |
layui-col-space24 | |
layui-col-space25 | |
layui-col-space26 | |
layui-col-space28 | |
layui-col-space30 |
示例:
<h3> 列间距 </h3> | |
<div class="layui-row layui-col-space10"> | |
<div class="layui-col-md4" > | |
<!-- 须要在 layui-col-md4 外面再加一层 div --> | |
<div style="background-color: #009688;"> | |
1/3 | |
</div> | |
</div> | |
<div class="layui-col-md4"> | |
<div style="background-color: burlywood;"> | |
1/3 | |
</div> | |
</div> | |
<div class="layui-col-md4"> | |
<div style="background-color: silver;"> | |
1/3 | |
</div> | |
</div> | |
</div> |
注:
1. layui-col-space:设置后不起作用次要是因为 ** 设置的是 padding**, 也就是说是 ** 向内缩 **,所以设置背景色 padding 也是会添上色彩,看起来如同没有间距一样。能够在外面在加一个 div,来达到目标。2. 间距个别不高于 30px,如果超过 30,倡议应用列偏移。
列偏移
对列追加 相似 layui-col-md-offset 的预设类,从而让列向右偏移。其中 号代表的是偏移占据的列数,可选中为 1 – 12。
如:_layui-col-md-offset3_,即代表在“中型桌面屏幕”下,让该列向右偏移 3 个列宽度
<h3> 列偏移 </h3> | |
<div class="layui-row"> | |
<div class="layui-col-md4" style="background-color: rosybrown;"> | |
4/12 | |
</div> | |
<div class="layui-col-md4 layui-col-md-offset4" style="background-color: cornflowerblue;"> | |
偏移 4 列,从而在最右 | |
</div> | |
</div> |
注:列偏移可针对不同屏幕的规范进行设定,在以后设定的屏幕下无效,当低于桌面屏幕的规定的临界值,就会重叠排列。
列嵌套
能够对栅格进行无穷档次的嵌套。在列元素(_layui-col-md*_)中插入行元素(_layui-row_),即可实现嵌套。
<h3> 列嵌套 </h3> | |
<div class="layui-row layui-col-space5"> | |
<div class="layui-col-md5" style="background-color: thistle;"> | |
<div class="layui-row"> | |
<div class="layui-col-md3" style="background-color: burlywood;" > | |
外部列 | |
</div> | |
<div class="layui-col-md5" style="background-color: indianred;"> | |
外部列 | |
</div> | |
<div class="layui-col-md4" style="background-color: mediumaquamarine;"> | |
外部列 | |
</div> | |
</div> | |
</div> | |
</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> | |
<div class="layui-btn"> 一个按钮 </div> |
主题
名称
组合
原始
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”
示例:
<!-- 不同主题的按钮 --> | |
<button class="layui-btn"> 默认按钮 </button> | |
<button class="layui-btn layui-btn-primary"> 原始按钮 </button> | |
<button class="layui-btn layui-btn-normal"> 百搭按钮 </button> | |
<button class="layui-btn layui-btn-warm"> 寒色按钮 </button> | |
<button class="layui-btn layui-btn-danger"> 正告按钮 </button> | |
<button class="layui-btn layui-btn-disabled"> 禁用按钮 </button> |
尺寸
尺寸
组合
大型
class=“layui-btn layui-btn-lg”
默认
class=“layui-btn”
小型
class=“layui-btn layui-btn-sm”
迷你
class=“layui-btn layui-btn-xs”
<!-- 不同尺寸的按钮 --> | |
<button class="layui-btn layui-btn-primary layui-btn-lg"> 大型 </button> | |
<button class="layui-btn"> 默认 </button> | |
<button class="layui-btn layui-btn-sm layui-btn-danger"> 小型 </button> | |
<button class="layui-btn layui-btn-xs"> 迷你 </button> |
圆角
layui-btn-radius
<button class="layui-btn layui-btn-radius"> 默认按钮 </button> | |
<button class="layui-btn layui-btn-primary layui-btn-radius"> 原始按钮 </button> | |
<button class="layui-btn layui-btn-normal layui-btn-radius"> 百搭按钮 </button> | |
<button class="layui-btn layui-btn-warm layui-btn-radius"> 寒色按钮 </button> | |
<button class="layui-btn layui-btn-danger layui-btn-radius"> 正告按钮 </button> | |
<button class="layui-btn layui-btn-disabled layui-btn-radius"> 禁用按钮 </button> |
图标
<button type="button" class="layui-btn"> | |
<i class="layui-icon"></i> 增加 | |
</button> | |
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary"> | |
<i class="layui-icon">ဂ</i> 刷新 | |
</button> |
导航
导航个别指页面引导性频道汇合,多以菜单的模式出现,可利用于头部和侧边。面包屑构造简略,反对自定义分隔符。
依赖加载模块:element
实现步骤:
-
引入的资源
<link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> -
依赖加载模块
<script type="text/javascript"> // 留神:导航 依赖 element 模块,否则无奈进行功能性操作 layui.use('element', function(){var element = layui.element;}); </script> - 显示指定类型的导航
程度导航
<ul class="layui-nav"> | |
<li class="layui-nav-item"><a href=""> 最新流动 </a></li> | |
<li class="layui-nav-item layui-this"><a href=""> 产品 </a></li> | |
<li class="layui-nav-item"><a href=""> 大数据 </a></li> | |
<li class="layui-nav-item"> | |
<a href="javascript:;"> 解决方案 </a> | |
<dl class="layui-nav-child"> <!-- 二级菜单 --> | |
<dd><a href=""> 挪动模块 </a></dd> | |
<dd><a href=""> 后盾模版 </a></dd> | |
<dd><a href=""> 电商平台 </a></dd> | |
</dl> | |
</li> | |
<li class="layui-nav-item"><a href=""> 社区 </a></li> | |
</ul> |
垂直 / 侧边导航
<ul class="layui-nav layui-nav-tree" > | |
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> --> | |
<li class="layui-nav-item layui-nav-itemed"> | |
<a href="javascript:;"> 默认开展 </a> | |
<dl class="layui-nav-child"> | |
<dd><a href="javascript:;"> 选项 1 </a></dd> | |
<dd><a href="javascript:;"> 选项 2 </a></dd> | |
<dd><a href=""> 跳转 </a></dd> | |
</dl> | |
</li> | |
<li class="layui-nav-item"> | |
<a href="javascript:;"> 解决方案 </a> | |
<dl class="layui-nav-child"> | |
<dd><a href=""> 挪动模块 </a></dd> | |
<dd><a href=""> 后盾模版 </a></dd> | |
<dd><a href=""> 电商平台 </a></dd> | |
</dl> | |
</li> | |
<li class="layui-nav-item"><a href=""> 产品 </a></li> | |
<li class="layui-nav-item"><a href=""> 大数据 </a></li> | |
</ul> |
程度、垂直、侧边三个导航的 HTML 构造是齐全一样的,不同的是:
程度导航:layui-nav | |
垂直导航须要追加 class:layui-nav-tree | |
侧边导航须要追加 class:layui-nav-tree layui-nav-side |
导航主题
通过对导航追加 CSS 背景类,让导航出现不同的主题色
<!-- 如定义一个墨绿背景色的导航 --> | |
<ul class="layui-nav layui-bg-move" > | |
… | |
</ul> |
程度导航反对的其它背景主题有:_layui-bg-cyan_(藏青)、_layui-bg-molv_(墨绿)、_layui-bg-blue_(艳蓝)
垂直导航反对的其它背景主题有:_layui-bg-cyan_(藏青)
面包屑
<span class="layui-breadcrumb"> | |
<a href=""> 首页 </a> | |
<a href=""> 国内新闻 </a> | |
<a href=""> 亚太地区 </a> | |
<a><cite> 注释 </cite></a> | |
</span> |
你还能够通过设置属性 lay-separator=”” 来自定义分隔符。例如:
<span class="layui-breadcrumb" lay-separator="-"> | |
<a href=""> 首页 </a> | |
<a href=""> 国内新闻 </a> | |
<a href=""> 亚太地区 </a> | |
<a><cite> 注释 </cite></a> | |
</span> |
选项卡
导航菜单可利用于头部和侧边,反对响应式,反对删除选项卡等性能。
依赖加载模块:element
实现步骤
-
引入的资源
<link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> -
依赖加载模块
<script type="text/javascript"> // 留神:选项卡 依赖 element 模块,否则无奈进行功能性操作 layui.use('element', function(){var element = layui.element;}); </script> -
加载 HTML
<div class="layui-tab"> <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>
选项卡格调
默认格调:layui-tab | |
简洁格调须要追加 class:layui-tab-brief | |
卡片格调须要追加 class:layui-tab-card |
带删除的选项卡
能够对父层容器设置属性 _lay-allowClose=“true”_来容许 Tab 选项卡被删除
<div class="layui-tab" lay-allowClose="true"> | |
<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> |
表格
惯例用法
<table class="layui-table"> | |
<colgroup> | |
<col width="150"> | |
<col width="200"> | |
<col> | |
</colgroup> | |
<thead> | |
<tr> | |
<th> 昵称 </th> | |
<th> 退出工夫 </th> | |
<th> 签名 </th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td> 贤心 </td> | |
<td>2016-11-29</td> | |
<td> 人生就像是一场修行 </td> | |
</tr> | |
<tr> | |
<td> 许闲心 </td> | |
<td>2016-11-28</td> | |
<td> 于千万人之中遇见你所遇见的人,于千万年之中,工夫的无涯的荒野里…</td> | |
</tr> | |
</tbody> | |
</table> |
根底属性
属性名
属性值
备注
lay-even
无
用于开启 隔行 背景,可与其它属性一起应用
lay-skin=“属性值”
line(行边框格调)
row(列边框格调)
nob(无边框格调)
若应用默认格调不设置该属性即可
lay-size=“属性值”
sm(小尺寸)
lg(大尺寸)
若应用默认尺寸不设置该属性即可
你所须要的根底属性写在 table 标签上,例如:
<!-- 一个带有隔行背景,且行边框格调的大尺寸表格 --> | |
<table class="layui-table" lay-even lay-size="lg" lay-skin="row"> | |
<colgroup> | |
<col width="150"> | |
<col width="200"> | |
<col> | |
</colgroup> | |
<thead> | |
<tr> | |
<th> 昵称 </th> | |
<th> 退出工夫 </th> | |
<th> 签名 </th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td> 贤心 </td> | |
<td>2016-11-29</td> | |
<td> 人生就像是一场修行 </td> | |
</tr> | |
<tr> | |
<td> 许闲心 </td> | |
<td>2016-11-28</td> | |
<td> 于千万人之中遇见你所遇见的人,于千万年之中,工夫的无涯的荒野里…</td> | |
</tr> | |
</tbody> | |
</table> |
表单
依赖加载模块:form
-
在一个容器中设定 class=“layui-form” 来标识一个表单元素块
<form class="layui-form" action=""> </form> -
根本的行区块构造,它提供了响应式的反对。能够换成其余构造,但必须要在外层容器中定义_class=“layui-form”_,form 模块能力失常工作。
<div class="layui-form-item"> <label class="layui-form-label"> 标签区域 </label> <div class="layui-input-block"> 原始表单元素区域 </div> </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 name="city" lay-verify=""> | |
<option value=""> 请抉择一个城市 </option> | |
<option value="010"> 北京 </option> | |
<option value="021"> 上海 </option> | |
<option value="0571"> 杭州 </option> | |
</select> |
- 属性_selected_可设定默认项
- 属性_disabled_开启禁用,select 和 option 标签都反对
<select name="city" lay-verify=""> | |
<option value="010"> 北京 </option> | |
<option value="021" disabled> 上海(禁用成果)</option> | |
<option value="0571" selected> 杭州 </option> | |
</select> |
- 能够通过 optgroup 标签给 select 分组
<select name="quiz"> | |
<option value=""> 请抉择 </option> | |
<optgroup label="城市记忆"> | |
<option value="你工作的第一个城市"> 你工作的第一个城市?</option> | |
</optgroup> | |
<optgroup label="学生时代"> | |
<option value="你的工号"> 你的工号?</option> | |
<option value="你最喜爱的老师"> 你最喜爱的老师?</option> | |
</optgroup> | |
</select> |
- 通过设定属性 lay-search 来开启搜寻匹配性能
<select name="city" lay-verify="" lay-search> | |
<option value="010">layer</option> | |
<option value="021">form</option> | |
<option value="0571" selected>layim</option> | |
</select> |
复选框
<h2> 默认格调:</h2> | |
<input type="checkbox" name=""title=" 写作 " checked> | |
<input type="checkbox" name=""title=" 发愣 "> | |
<input type="checkbox" name=""title=" 禁用 " disabled> | |
<h2> 原始格调:</h2> | |
<input type="checkbox" name=""title=" 写作 "lay-skin="primary" checked> | |
<input type="checkbox" name=""title=" 发愣 "lay-skin="primary"> | |
<input type="checkbox" name=""title=" 禁用 "lay-skin="primary" disabled> |
- 属性_title_可自定义文本(舒适提醒:如果只想显示复选框,能够不必设置 title)
- 属性_checked_可设定默认选中
- 属性_lay-skin_可设置复选框的格调(原始格调:lay-skin=“primary”)
- 设置 value=“1” 可自定义值,否则选中时返回的就是默认的 on
开关
将复选框 checkbox,通过设定 _lay-skin=“switch”_造成了开关格调
<input type="checkbox" name="xxx" lay-skin="switch"> | |
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked> | |
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启 | 敞开"> | |
<input type="checkbox" name="aaa" lay-skin="switch" disabled> |
- 属性_checked_可设定默认开
- 属性_disabled_开启禁用
- 属性_lay-text_可自定义开关两种状态的文本(两种文本用“|”隔开)
- 设置 value=“1” 可自定义值,否则选中时返回的就是默认的 on
单选框
<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> |
- 属性_title_可自定义文本
- 属性_disabled_开启禁用
- 设置 value=“xxx” 可自定义值,否则选中时返回的就是默认的 on
文本域
<textarea name="remark" required lay-verify="required" placeholder="请输出集体介绍" class="layui-textarea"></textarea>
- _class=“layui-textarea”_:layui.css 提供的通用 CSS 类
组装行内表单
<div class="layui-form-item"> | |
<div class="layui-inline"> | |
<label class="layui-form-label"> 范畴 </label> | |
<div class="layui-input-inline" style="width: 100px;"> | |
<input type="text" name="price_min" placeholder="¥" | |
autocomplete="off" class="layui-input"> | |
</div> | |
<div class="layui-form-mid">-</div> | |
<div class="layui-input-inline" style="width: 100px;"> | |
<input type="text" name="price_max" placeholder="¥" | |
autocomplete="off" class="layui-input"> | |
</div> | |
</div> | |
</div> |
- _class=“layui-inline”_:定义外层行内
- _class=“layui-input-inline”_:定义内层行内
疏忽丑化渲染
能够对表单元素减少属性 lay-ignore 设置后,将不会对该标签进行丑化渲染,即保留零碎格调。
<input type="radio" name="sex" value="nan" title="男" lay-ignore>
表单方框格调
通过追加 layui-form-pane 的 class,来设定表单的方框格调。
<form class="layui-form layui-form-pane" action=""> | |
<!-- | |
内部结构都一样,值得注意的是 复选框 / 开关 / 单选框 这些组合在该格调下须要额定增加 pane 属性(否则 会看起来比拟顺当),如:--> | |
<div class="layui-form-item" pane> | |
<label class="layui-form-label"> 单选框 </label> | |
<div class="layui-input-block"> | |
<input type="radio" name="sex" value="男" title="男"> | |
<input type="radio" name="sex" value="女" title="女" checked> | |
</div> | |
</div> | |
</form> |
组件示例
弹出层
模块加载名称:_layer_,独立版本:layer.layui.com
应用场景
因为 layer 能够独立应用,也能够通过 Layui 模块化应用。所以请依照你的理论需要来抉择。
场景
用前筹备
调用形式
- 作为独立组件应用
如果你只是独自想应用 layer,你能够去 layer 独立版本官网下载组件包。你须要在你的页面引入_jQuery_1.8 以上的任意版本,并引入_layer.js_。
通过 script 标签引入 layer.js 后,间接用即可。
- layui 模块化应用
如果你应用的是 layui,那么你间接在官网下载 layui 框架即可,无需引入 jQuery 和 layer.js,但须要引入_layui.css_和_layui.js_
通过 layui.use(‘layer’, callback) 加载模块
-
作为独立组件应用 layer
<!-- 引入好 layer.js 后,间接用即可 --> <script src="layer.js"></script> <script> layer.msg('hello'); </script> -
在 layui 中应用 layer
layui.use('layer', function(){ var layer = layui.layer; layer.msg('hello'); });
根底参数
-
type – 根本层类型
类型:Number,默认:0 可传入的值有:0(信息框,默认)1(页面层)2(iframe 层)3(加载层)4(tips 层) -
title – 题目
类型:String/Array/Boolean,默认:'信息' title 反对三种类型的值:若传入的是一般的字符串,如 title :'我是题目',那么只会扭转题目文本;若须要自定义款式,能够 title: ['文本', 'font-size:18px;'],数组第二项能够写任意 css 款式;若你不想显示标题栏,能够 title: false; -
content – 内容
类型:String/DOM/Array,默认:'' content 可传入的值是灵便多变的,不仅能够传入一般的 html 内容,还能够指定 DOM。 /* 信息框 */ layer.open({ type:0, title:"零碎音讯", // content 能够传入任意的文本或 html content:"Hello" }); /* 页面层 */ layer.open({ type:1, title:"零碎音讯", // content 能够传入任意的文本或 html content:"<div style='height:100px;width:200px'>Hello</div>" }); /* iframe */ layer.open({ type:2, title:"零碎音讯", // content 是一个 URL,如果你不想让 iframe 呈现滚动条,你还能够 content: ['url', 'no'] content:"http://www.baidu.com" // content:["http://www.baidu.com",'no'] }); /* tips 层 */ layer.open({ type: 4, content: ['内容', '#id'] // 数组第二项即吸附元素选择器或者 DOM }); -
area – 宽高
类型:String/Array,默认:'auto' 在默认状态下,layer 是宽高都自适应的。当定义宽度时,你能够 area: '500px',高度依然是自适应的。当宽高都要定义时,你能够 area: ['500px', '300px']。 -
icon – 图标
注:信息框和加载层的公有参数。类型:Number,默认:-1(信息框)/0(加载层)信息框默认不显示图标。当你想显示图标时,默认层能够传入 0 -6。如果是加载层,能够传入 0 -2。
// eg1 layer.alert('酷毙了', {icon: 1}); // eg2 layer.msg('不开心。。', {icon: 5}); // eg3 layer.load(1); // 格调 1 的加载 -
示例
// eg1 layer.alert('很快乐见到你????', {icon: 6}); // 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_,独立版本:http://www.layui.com/laydate/
layDate 蕴含了大量的更新,其中次要以:_年选择器_、_年月选择器_、_日期选择器_、_工夫选择器_、_日期工夫选择器_ 五种类型的抉择形式。
疾速应用
和 layer 一样,能够在 layui 中应用 layDate,也可间接应用 layDate 独立版,请依照理论需要来抉择。
场景
用前筹备
调用形式
- layui 模块化应用
下载 layui 后,引入_layui.css_和_layui.js_即可
通过 layui.use(‘laydate’, callback) 加载模块后,再调用办法
- 作为独立组件应用
去 layDate 独立版本官网下载组件包,引入 laydate.js 即可
间接调用办法应用
在 layui 模块中应用
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title> 日期与工夫抉择 </title> | |
<link rel="stylesheet" href="layui/css/layui.css"> | |
</head> | |
<body> | |
<div class="layui-inline"> | |
<input type="text" class="layui-input" id="date1" /> | |
</div> | |
</body> | |
<script src="layui/layui.js"></script> | |
<script type="text/javascript"> layui.use('laydate', function(){ | |
var laydate = layui.laydate; | |
// 执行一个 laydate 实例 | |
laydate.render({elem: '#date1' // 指定元素}); | |
}); </script> | |
</html> |
根底参数
-
elem – 绑定元素
类型:String/DOM,默认值:无 必填项,用于绑定执行日期渲染的元素,值个别为选择器,或 DOM 对象 laydate.render({elem: '#test' // 或 elem: document.getElementById('test')、elem: lay('#test') 等 }); -
type – 控件抉择类型
类型:String,默认值:date 用于独自提供不同的选择器类型,可选值如下表: type 可选值
名称
用处
year
年选择器
只提供年列表抉择
month
年月选择器
只提供年、月抉择
date
日期选择器
可抉择:年、月、日。type 默认值,个别可不填
time
工夫选择器
只提供时、分、秒抉择
datetime
日期工夫选择器
可抉择:年、月、日、时、分、秒
// 年选择器 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' }); -
format – 自定义格局
类型:String,默认值:yyyy-MM-dd 通过日期工夫各自的格局符和长度,来设定一个你所须要的日期格局。layDate 反对的格局如下: 格局符
阐明
yyyy
年份,至多四位数。如果有余四位,则后面补零
y
年份,不限度位数,即不论年份多少位,后面均不补零
MM
月份,至多两位数。如果有余两位,则后面补零。
M
月份,容许一位数。
dd
日期,至多两位数。如果有余两位,则后面补零。
d
日期,容许一位数。
HH
小时,至多两位数。如果有余两位,则后面补零。
H
小时,容许一位数。
mm
分钟,至多两位数。如果有余两位,则后面补零。
m
分钟,容许一位数。
ss
秒数,至多两位数。如果有余两位,则后面补零。
s
秒数,容许一位数。
通过上述不同的格局符组合成一段日期工夫字符串,可任意排版。
// 自定义日期格局 laydate.render({ elem: '#test' ,format: 'yyyy 年 MM 月 dd 日' // 可任意组合 }); -
value – 初始值
类型:String,默认值:new Date() 反对传入合乎 format 参数设定的日期格局字符,或者 new Date() // 传入合乎 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_
疾速应用
laypage 的应用非常简单,指向一个用于寄存分页的容器,通过服务端失去一些初始值,即可实现分页渲染。
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title> 分页 </title> | |
<link rel="stylesheet" href="layui/css/layui.css"> | |
</head> | |
<body> | |
<div id="test1"></div> | |
</body> | |
<script src="layui/layui.js"></script> | |
<script type="text/javascript"> layui.use('laypage', function(){ | |
var laypage = layui.laypage; | |
// 执行一个 laypage 实例 | |
laypage.render({ | |
elem: 'test1' // 留神,这里的 test1 是 ID,不必加 # 号 | |
,count: 50 // 数据总数,从服务端失去 | |
}); | |
}); </script> | |
</html> |
根底参数
通过外围办法:_laypage.render(options)_ 来设置根底参数。
参数选项
阐明
类型
默认值
elem
指向寄存分页的容器,值能够是容器 ID、DOM 对象。如:1. elem:‘id’_留神:这里不能加 # 号_2. elem: document.getElementById(‘id’)
String/Object
–
count
数据总数。个别通过服务端失去
Number
–
limit
每页显示的条数。laypage 将会借助 count 和 limit 计算出分页数。
Number
10
limits
每页条数的选择项。如果 layout 参数开启了 limit,则会呈现每页条数的 select 抉择框
Array
[10, 20, 30, 40, 50]
curr
起始页。个别用于刷新类型的跳页以及 HASH 跳页。如:
// 开启 location.hash 的记录
laypage.render({
elem:‘test1’,
count: 500 ,
// 获取起始页
curr: location.hash.replace(’#!fenye=’,‘’)
// 自定义 hash 值
,hash:‘fenye’
}); `
Number
1
groups
间断呈现的页码个数
Number
5
prev
自定义“上一页”的内容,反对传入一般文本和 HTML
String
上一页
next
自定义“下一页”的内容,同上
String
下一页
first
自定义“首页”的内容,同上
String
1
last
自定义“尾页”的内容,同上
String
总页数值
layout
自定义排版。可选值有:_count_(总条目输区域)、_prev_(上一页区域)、_page_(分页区域)、_next_(下一页区域)、_limit_(条目选项区域)、_refresh_(页面刷新区域。留神:layui 2.3.0 新增)、_skip_(快捷跳页区域)
Array
[‘prev’,‘page’,‘next’]
theme
自定义主题。反对传入:_色彩值_,或_任意一般字符_。如:1. theme:‘#c00’2. theme:‘xxx’// 将会生成 class=“layui-laypage-xxx”的 CSS 类,以便自定义主题
String
–
hash
开启 location.hash,并自定义 hash 值。如果开启,在触发分页时,会主动对 url 追加:_#!hash 值 ={curr}_ 利用这个,能够在页面载入时就定位到指定页
String/Boolean
false
jump – 切换分页的回调
当分页被切换时触发,函数返回两个参数:_obj_(以后分页的所有选项值)、first(是否首次,个别用于初始加载的判断)
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 实例最简略的形式是,在页面搁置一个元素
,而后通过 table.render() 办法指定该容器。
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>table 数据表格 </title> | |
<link rel="stylesheet" href="layui/css/layui.css"> | |
</head> | |
<body> | |
<table id="demo"></table> | |
</body> | |
<script src="layui/layui.js" type="text/javascript" ></script> | |
<script type="text/javascript"> 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" | |
} | |
] | |
} |
三种初始化渲染形式
机制
实用场景
办法渲染
用 JS 办法的配置实现渲染
(举荐)无需写过多的 HTML,在 JS 中指定原始元素,再设定各项参数即可。
主动渲染
HTML 配置,主动渲染
无需写过多 JS,可专一于 HTML 表头局部
转换动态表格
转化一段已有的表格元素
无需配置数据接口,在 JS 中指定表格元素,并简略地给表头加上自定义属性即可
办法渲染
-
将根底参数的设定放在了 JS 代码中,且原始的 table 标签只须要一个_选择器_
<table id="demo"></table>
-
渲染表格
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.render()办法返回一个对象:var tableIns = table.render(options),可用于对以后表格进行“重载”等操作。
主动渲染
在一段 table 容器中配置好相应的参数,由 table 模块外部主动对其实现渲染,而无需你写初始的渲染办法。
1) 带有 class=“layui-table” 的
标签。
2) 对标签设置属性 lay-data=”” 用于配置一些根底参数
3) 在
标签中设置属性 lay-data=”” 用于配置表头信息
<table class="layui-table" lay-data="{url:'user.json'}"> | |
<thead> | |
<tr> | |
<th lay-data="{field:'id'}">ID</th> | |
<th lay-data="{field:'username'}"> 用户名 </th> | |
<th lay-data="{field:'sex', sort: true}"> 性别 </th> | |
</tr> | |
</thead> | |
</table> |
转换动态表格
页面曾经存在了一段有内容的表格,由原始的 table 标签组成,只须要赋予它一些动静元素。
<table lay-filter="demo"> | |
<thead> | |
<tr> | |
<th lay-data="{field:'username', width:100}"> 昵称 </th> | |
<th lay-data="{field:'experience', width:80, sort:true}"> 积分 </th> | |
<th lay-data="{field:'sign'}"> 签名 </th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td> 贤心 1 </td> | |
<td>66</td> | |
<td> 人生就像是一场修行 a </td> | |
</tr> | |
</tbody> | |
</table> |
执行用于转换表格的 JS 办法
layui.use('table', function(){ | |
var table = layui.table; | |
// 转换动态表格 | |
table.init('demo', { | |
height: 315 // 设置高度 | |
// 反对所有根底参数 | |
}); | |
}); |
根底参数应用的场景
// 场景一:下述办法中的键值即为根底参数项 | |
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); // 重载表格 |
开启分页
<!-- HTML 代码 --> | |
<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"> | |
<!-- lay-event 给元素绑定事件名 --> | |
<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); | |
}); | |
} | |
}); | |
}); |
开启单元格编辑
<table class="layui-table" lay-data="{url:'user.json', id:'demo'}" lay-filter="demo"> | |
<thead> | |
<tr> | |
<th lay-data="{type:'checkbox'}">ID</th> | |
<th lay-data="{field:'id', sort: true}">ID</th> | |
<th lay-data="{field:'username', sort: true, edit:'text'}"> 用户名 </th> | |
<th lay-data="{field:'sex', edit:'text'}"> 性别 </th> | |
<th lay-data="{field:'city', edit:'text'}"> 城市 </th> | |
<th lay-data="{field:'experience', sort: true, edit:'text'}"> 积分 </th> | |
</tr> | |
</thead> | |
</table> |
layui.use('table', function(){ | |
var table = layui.table; | |
// 监听单元格编辑 | |
table.on('edit(demo)', function(obj){ | |
var value = obj.value // 失去批改后的值 | |
,data = obj.data // 失去所在行所有键值 | |
,field = obj.field; // 失去字段 | |
layer.msg('[ID:'+ data.id +']' + field + '字段更改为:'+ value); | |
}); | |
}); |
数据表格的重载
<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 页开始 | |
} | |
}); // 只重载数据 | |
}); | |
}); |