以下：内容是实践出来。基于Layui2.4.5版本。实际介绍也仅仅是Layui中的很少一部分，跟着官网敲了一部分。仅供自己学习参考。
一、最简单的搭建
注意: Layui部分模块依赖jQuery（比如layer），但是你并不用去额外加载jQuery。Layui已经将jQuery最稳定的一个版本改为Layui的内部模块，当你去使用 layer 之类的模块时，它会首先判断你的页面是否已经引入了jQuery，如果没有，则加载内部的jQuery模块，如果有，则不会加载。
项目目录结构
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="resources/layui.js" ></script>
<script type="text/javascript" src="js/index.js" ></script>
</html>
index.js
$(function() {
layui.use("layer", function() {
var layer = layui.layer;
layer.msg("你好");
})
})
运行效果截图：
二、本地的存储(直接粘官网Demo)
//【增】：向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); //获得“贤心”
官网内置的CSS样式
三、自定义模块引入
- 自定义Hello.js
// 自定义模块
layui.define(["layer"], function(exports) { // 不依赖其它模块可以写成 layui.define(function(exports){
var layer = layui.layer;
var obj = {
hello: function(str) {
layer.msg(str);
}
}
exports("hello", obj); //输出obj接口，名为hello
});
- 引入自定义模块（index.js）中
$(function() {
layui.config({
base:"/LayuiDemo/js/modules/" // 存放拓展模块的根目录 。这里因为我用的HBuild，所以路径可能有些不同
}).extend({
hello:"hello"
})
/* 官网说
//你也可以忽略 base 设定的根目录，直接在 extend 指定路径（主要：该功能为 layui 2.2.0 新增）
layui.extend({
mod2: '{/}http://cdn.xxx.com/lib/mod2' // {/}的意思即代表采用自有路径，即不跟随 base 路径
})
*/
layui.use(["hello"], function() {
var hello = layui.hello;
hello.hello("哈哈哈"); // 弹出哈哈哈
});
})
Layui提供了很多页面元素和内置模块，这里不再过多叙述，仅介绍之前使用过的Table和Form。
四、Table
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- lay-data指定了数据初始化排序方式 -->
<table id="userList" lay-filter="test" lay-data="{initSort: {field:'stuId', type:'desc'}}"></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 页码 -->
<div id="pageDto"></div>
</body>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="resources/layui.js" ></script>
<!--<script type="text/javascript" src="js/index.js" ></script>-->
<script type="text/javascript" src="js/table.js" ></script>
</html>
table.js
layui.use('table', function () {
var table = layui.table;
//第一个实例
table.render({
id: 'userTable',
elem: '#userList',
height: 512,
toolbar: '#toolbarDemo', // 头部工具栏
url: '/user/getUserList.do', //数据接口,
// 接口参数
where: {
status: 0
},
cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
cols: [[ //表头
{type: 'checkbox', fixed: 'left'}, // 是否有多选框，不写这一行没有
{field: 'userId', title: '账号', sort: true }, // sort 标识是否可以排序
{field: 'username', title: '用户名'},
{field: 'nickname', title: '昵称'},
// 这里对数据进行了一个整理，即如果sex是0，则表格显示时男，否则是女，对数据进行了一个二次加工显示
{field: 'sex', title: '性别' , templet : function (res) {
return res.sex == 0 ? "男" : "女"
}},
{field: 'address', title: '住址'},
{field: 'email', title: '邮箱'},
{field: 'telephone', title: '联系方式'},
{
field: 'role', title: '角色', edit: 'text', templet: function (res) {
return res.role == 0 ? "管理员" : res.role == 1 ? "教师" : "学生"
}, sort: true
},
{fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150} // 定义右侧行工具栏 。工具栏的内容是id为barDemo的<script> 模块
]],
page: true //开启分页,
});
//头工具栏事件 -- 批量删除
table.on('toolbar(test)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id);
switch (obj.event) {
case 'deleteAll':
var data = checkStatus.data;
if (data.length == 0) {
layer.alert("尚未选择账户");
return;
}
// 将勾选的数据保存
var array = [];
for (var i = 0; i < data.length; i++) {
array.push(data[i].userId);
}
// 网络请求后台删除
net.AsynPost(USER_DELETE, {"idList": array}, function (data) {
reload();
}, function (err) {
layer.alert(JSON.stringify(err));
reload();
})
break;
}
});
// 监听行工具事件，行级别的删除
table.on('tool(test)', function (obj) {
var data = obj.data;
if (obj.event === 'del') {
layer.confirm('确定删除吗', function (index) {
net.AsynPost(USER_DELETE, {"idList": [data.userId]}, function (data) {
reload();
}, function (err) {
layer.alert(JSON.stringify(err));
reload();
})
layer.close(index);
});
} else if (obj.event === 'edit') {
layer.prompt({
formType: 2
, value: data.email
}, function (value, index) {
obj.update({
email: value
});
layer.close(index);
});
}
});
//
// //监听单元格编辑
// table.on('edit(test)', function (obj) {
// var value = obj.value //得到修改后的值
// , data = obj.data //得到所在行所有键值
// , field = obj.field; //得到字段
// layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
// });
// 刷新table
function reload() {
table.reload("userTable", {
where: {
status: 0
}
});
}
});
五、form， 感觉官网写的很好，就直接拷过来了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="resources/css/layui.css" media="all">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>表单集合演示</legend>
</fieldset>
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">单行输入框</label>
<div class="layui-input-block">
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">验证必填项</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">验证手机</label>
<div class="layui-input-inline">
<input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">验证邮箱</label>
<div class="layui-input-inline">
<input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">多规则验证</label>
<div class="layui-input-inline">
<input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">验证日期</label>
<div class="layui-input-inline">
<input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">验证链接</label>
<div class="layui-input-inline">
<input type="tel" name="url" lay-verify="url" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">验证身份证</label>
<div class="layui-input-block">
<input type="text" name="identity" lay-verify="identity" placeholder="" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">自定义验证</label>
<div class="layui-input-inline">
<input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
</div>
<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>
<div class="layui-form-item">
<label class="layui-form-label">单行选择框</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1" selected="">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">分组选择框</label>
<div class="layui-input-inline">
<select name="quiz">
<option value="">请选择问题</option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市</option>
</optgroup>
<optgroup label="学生时代">
<option value="你的工号">你的工号</option>
<option value="你最喜欢的老师">你最喜欢的老师</option>
</optgroup>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">搜索选择框</label>
<div class="layui-input-inline">
<select name="modules" lay-verify="required" lay-search="">
<option value="">直接选择或搜索选择</option>
<option value="1">layer</option>
<option value="2">form</option>
<option value="3">layim</option>
<option value="4">element</option>
<option value="5">laytpl</option>
<option value="6">upload</option>
<option value="7">laydate</option>
<option value="8">laypage</option>
<option value="9">flow</option>
<option value="10">util</option>
<option value="11">code</option>
<option value="12">tree</option>
<option value="13">layedit</option>
<option value="14">nav</option>
<option value="15">tab</option>
<option value="16">table</option>
<option value="17">select</option>
<option value="18">checkbox</option>
<option value="19">switch</option>
<option value="20">radio</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">联动选择框</label>
<div class="layui-input-inline">
<select name="quiz1">
<option value="">请选择省</option>
<option value="浙江" selected="">浙江省</option>
<option value="你的工号">江西省</option>
<option value="你最喜欢的老师">福建省</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz2">
<option value="">请选择市</option>
<option value="杭州">杭州</option>
<option value="宁波" disabled="">宁波</option>
<option value="温州">温州</option>
<option value="温州">台州</option>
<option value="温州">绍兴</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz3">
<option value="">请选择县/区</option>
<option value="西湖区">西湖区</option>
<option value="余杭区">余杭区</option>
<option value="拱墅区">临安市</option>
</select>
</div>
<div class="layui-form-mid layui-word-aux">此处只是演示联动排版，并未做联动交互</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="写作">
<input type="checkbox" name="like[read]" title="阅读" checked="">
<input type="checkbox" name="like[game]" title="游戏">
</div>
</div>
<div class="layui-form-item" pane="">
<label class="layui-form-label">原始复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
<input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
<input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关-默认关</label>
<div class="layui-input-block">
<input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关-默认开</label>
<div class="layui-input-block">
<input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男" checked="">
<input type="radio" name="sex" value="女" title="女">
<input type="radio" name="sex" value="禁" title="禁用" disabled="">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">普通文本域</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">编辑器</label>
<div class="layui-input-block">
<textarea class="layui-textarea " name="content" lay-verify="content" id="LAY_demo_editor"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<!-- 示例-970 -->
<ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>初始赋值演示</legend>
</fieldset>
<form class="layui-form" action="" lay-filter="example">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-block">
<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</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="写作">
<input type="checkbox" name="like[read]" title="阅读">
<input type="checkbox" name="like[daze]" title="发呆">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男" checked="">
<input type="radio" name="sex" value="女" title="女">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
</div>
</div>
</form>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>方框风格的表单集合</legend>
</fieldset>
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<label class="layui-form-label">长输入框</label>
<div class="layui-input-block">
<input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">短输入框</label>
<div class="layui-input-inline">
<input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">日期选择</label>
<div class="layui-input-block">
<input type="text" name="date" id="date1" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">行内表单</label>
<div class="layui-input-inline">
<input type="text" name="number" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
</div>
<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>
<div class="layui-form-item">
<label class="layui-form-label">单行选择框</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1" selected="">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">行内选择框</label>
<div class="layui-input-inline">
<select name="quiz1">
<option value="">请选择省</option>
<option value="浙江" selected="">浙江省</option>
<option value="你的工号">江西省</option>
<option value="你最喜欢的老师">福建省</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz2">
<option value="">请选择市</option>
<option value="杭州">杭州</option>
<option value="宁波" disabled="">宁波</option>
<option value="温州">温州</option>
<option value="温州">台州</option>
<option value="温州">绍兴</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz3">
<option value="">请选择县/区</option>
<option value="西湖区">西湖区</option>
<option value="余杭区">余杭区</option>
<option value="拱墅区">临安市</option>
</select>
</div>
</div>
<div class="layui-form-item" pane="">
<label class="layui-form-label">开关-开</label>
<div class="layui-input-block">
<input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" title="开关">
</div>
</div>
<div class="layui-form-item" pane="">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男" checked="">
<input type="radio" name="sex" value="女" title="女">
<input type="radio" name="sex" value="禁" title="禁用" disabled="">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn" lay-submit="" lay-filter="demo2">跳转式提交</button>
</div>
</form>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="resources/layui.js"></script>
<script type="text/javascript" src="js/formdemo.js"></script>
</body>
</html>
fromDemo.js
layui.use(['form', 'layedit', 'laydate'], function() {
var form = layui.form,
layer = layui.layer,
layedit = layui.layedit,
laydate = layui.laydate;
//日期
laydate.render({
elem: '#date'
});
laydate.render({
elem: '#date1'
});
//创建一个编辑器
var editIndex = layedit.build('LAY_demo_editor');
//自定义验证规则
form.verify({
title: function(value) {
if(value.length < 5) {
return '标题至少得5个字符啊';
}
},
pass: [
/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'
],
content: function(value) {
layedit.sync(editIndex);
}
});
//监听指定开关
form.on('switch(switchTest)', function(data) {
layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
offset: '6px'
});
layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
});
//监听提交
form.on('submit(demo1)', function(data) {
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
return false;
});
//表单初始赋值
form.val('example', {
"username": "贤心" // "name": "value"
,
"password": "123456",
"interest": 1,
"like[write]": true //复选框选中状态
,
"close": true //开关状态
,
"sex": "女",
"desc": "我爱 layui"
})
});
layer ：介绍一个最简单的使用，很多属性可以去官网查找
layerDemo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="resources/layui.js"></script>
<script type="text/javascript" src="js/layerDemo.js"></script>
</html>
layerDemo.js
layui.use('table', function() {
layer.open({
// type 为1时会将content内容显示，想通过链接方式加载需要将type设置为2
type: 2, // layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
title: "测试" //title支持三种类型的值，若你传入的是普通的字符串，如title :'我是标题'，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
,
closeBtn: false, // 不显示关闭按钮
area: ['500px', '300px'], // 在默认状态下，layer是宽高都自适应的即 area: 'auto;'，但当你只想定义宽度时，你可以area: '500px'，高度仍然是自适应的。当你宽高都要定义时，你可以area: ['500px', '300px']
shade: 0.5, // 即弹层外区域。默认是0.3透明度的黑色背景（'#000'）。如果你想定义别的颜色，可以shade: [0.8, '#393D49']；如果你不想显示遮罩，可以shade: 0
btn: ["确定", "取消"],
id: 'course_', //设定一个id，防止重复弹出
btnAlign: 'c',
moveType: 0, //拖拽模式，0或者1
// content: 'layerDialog.html', // 加载了layerDialog页面的内容
content: 'https://www.baidu.com', // 加载网页内容
// content: $('#idddd') // 加载本地控件id为idddd为显示内容
yes: function(index, layero) {
// 通过这种方式可以获取到弹出层数据
// var addClassName = layero.find("#addClassName").val();
layer.msg("点击了确定");
layer.closeAll();
},
btn2: function(index, layero) {
layer.closeAll();
}
});
});
234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
