文章目录
一、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>
如果你想采用非模块化方式（即所有模块一次性加载，尽管layui官方并不推荐你这么做），你也可以按照下面的方式使用：
<!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.all.js"></script>
<script>
//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
;!function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
}();
</script>
</body>
</html>
二、插件区别
（1）layui.js
你引入这个之后，你js所有的layui模块的引用都要用layui.use()来使用，不然将无法使用。
//layui模块的使用
layui.use(['mod1', 'mod2'], function(args){
var mod = layui.mod1;
//……
});
（2）layui.all.js
它包含了 layui 所有的内置模块，且无需再通过 layui.use() 方法加载模块，直接调用即可。你引入这个之后，你的layui.use()将不生效，好处是你引用里面有的模块将不再用模块化的写法引入，在js文件中可以直接用layui.table这样用。
<script src="../layui/layui.all.js"></script>
<script>
;!function(){
//无需再执行layui.use()方法加载模块，直接使用即可
var form = layui.form
,layer = layui.layer;
//…
}();
</script>
三、插件依赖
（1）layui.js的使用
在使用 layui 2.2.5 之前，可以引入最新版的 jquery ，使用更好的性能。也可以使用layui 的jquery内部版本。如果引入要在引入layui.js 之前引入。
（2）layui.all.js的使用
可以放在jquery.js下面，也可以放jquery.js上面，一般建议放jquery.js下面。
重要发现：
如果layui.all.js放在jquery.js下面的话，细心的你会发现，layui的模态框在拉伸的时候，当窗体变小时，模态框里面的内容，比如文本框等这些，就会撑出模态框外面，显得样式很乱，这个时候，你是不是会去找模态框是不是少了哪层<div>，或者少了那个类，其实都不是，你只要把layui.all.js放在jquery.js上面，就可以解决这个模态框拉伸内容变乱的问题。
其实这都不是最好的解决方案，这样只是解决了模态框里面的内容不撑出模态框外面，但本质上它只是在模态框里面显示罢了。如果你不需要模态框可以进行拉伸的话，可以给它加上一个resize属性（如下示例：弹窗属性），这样就禁用了模态框的拉伸了。
1、move - 触发拖动的元素
类型：String/DOM/Boolean，默认：’.layui-layer-title’
默认是触发标题区域拖拽。如果你想单独定义，指向元素的选择器或者DOM即可。如move: ‘.mine-move’。你还配置设定move: false来禁止拖拽；
2、字体颜色的话，可以直接加个class，覆盖上去；
3、area - 宽高
类型：String/Array，默认：‘auto’
在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: ‘500px’，高度仍然是自适应的。当你宽高都要定义时，你可以area: [‘500px’, ‘300px’]。
4、resize - 是否允许拉伸
类型：Boolean，默认：true
默认情况下，你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能，设置 resize:false即可。该参数对loading、tips层无效
四、其他操作
（1）时间控件绑定问题：（layui 日期插件laydate 闪没问题）
问题描述：当页面高度不够时（高度不够，指的是 input输入框下面的页面高度小于时间控件的高度），点击文件框触发时间控件以后会闪没，当退出页面 ，再返回以后，时间控件正常出现。
解决方案：将触发方法改为 click 。示例如下：
laydate.render({
elem: '#birthLeader'
,trigger: 'click'
});
效果：无论高度是否足够，均可以出现控件，当高度不够时，会遮挡 input输入框。
（2）下拉框绑定问题
需要在绑定后使用 form.render() 重新渲染。修改表单回显问题同上。
更过详情请自行参考文档：layui官方文档