目录

一、底层方法

1、全局配置：layui.config(options)

2、定义模块：layui.define([mods],callback)

3、加载所需模块：layui.use([mods],callback)

4、其他的方法

二、页面元素（认识）

三、模块规范

四、页面元素（使用）

1、栅格、后台布局

1.1、介绍：

1.2、响应式规则

2、颜色

2.1、内置7种颜色

2.2、颜色设计感

3、图标

4、动画

5、按钮

5.1、主题：（6种）

5.2、尺寸（4种）

5.3、圆角：layui-btn-radius

5.4、按钮组、按钮容器：

6、表单

7、导航条

8、tab选项卡

9、进度条

10、面板

11、表格

12、徽章

13、时间线

五、内置模块（重点）

1、弹出层（layer）

1.1、layer的参数：

1.2、layer的方法

2、日期与时间选择（laydate）

2.1、laydate基础参数：

2.2、laydate回调参数

2.3、其他

3、即时通讯（layim）

4、分页（laypage）

5、模板引擎（laytpl）

6、数据表格（table）

7、表单（form）

8、文件上传（upload）

9、常用元素操作（element）

10、评分（rate）

11、轮播（carousel）

12、流加载（flow）

13、工具集（util）

14、代码修饰器（code）

参考网站：http://www.layui.com/doc/

这篇文章由于自己的快速学习，所以主要是复制参考网页的重点来帮助自己记忆。

一、底层方法

1、全局配置：layui.config(options)

作用：在使用layui模块之前可以全局化配置一些参数。

使用：（未使用，mark）

layui.config({
  dir: '/res/layui/' //layui.js 所在路径（注意，如果是script单独引入layui.js，无需设定该参数。），一般情况下可以无视
  ,version: false //一般用于更新模块缓存，默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值，如：201610
  ,debug: false //用于开启调试模式，默认false，如果设为true，则JS模块的节点会保留在页面
  ,base: '' //设定扩展的Layui模块的所在目录，一般用于外部模块扩展
});

2、定义模块：layui.define([mods],callback)

作用：可定义一个模块。mods：定义的模块所依赖的模块，callback：会调用函数，返回一个exports参数，输出该模块的接口（也就是定义模块）。

使用：

//1.不使用mods参数，直接使用回调方法定义一个模块
//define：定义模块的方法
layui.define(function(exports){
    /*
     * exports参数:可定义一个模块
     *
     * demo：模块名字
     * function():回调方法
     */
	exports('demo', function(){
	    alert('Hello World!');
	});
});
		
layui.demo();//调用定义的模块



//2.使用mods参数，设置该模块所依赖的模块来使用回调方法定义一个模块
layui.define("layer",function(exports){    //可使用数组来依赖多个模块：["layer","laypage"]

	exports('demo', function(){
		alert('Hello World!');
	});
});
//需要通过use()来加载layer模块，之后在该回调方法中调用定义的demo方法
layui.use("layer",function(){
	layui.demo();
})

3、加载所需模块：layui.use([mods],callback)

作用：layui的内置模块，不是一开始就加载的，需要通过该方法来加载内置模块。

扩展：（目前只做了解）如果mods中需要包含目录，需使用extends定义别名。

使用：

/*
 * 3.使用模块
 */
layui.use(['layer','laypage'],function(){	//指定加载的模块
	//通过对象赋值的方式来获取模块接口（当然，不使用对象赋值也可以直接使用，但是为了规范吧）
	var layer = layui.layer
		,laypage = layui.laypage;
		
	//使用layer模块的msg()
	layer.msg("你好");

});




//强烈不推荐下面的做法，如果你的业务代码实在模块加载完成之前执行的，则会存在报错风险
var laypage, laydate;
layui.use(['laypage', 'laydate'], function(){
  laypage = layui.laypage;
  laydate = layui.laydate;
});

4、其他的方法

二、页面元素（认识）

需要的页面元素，可直接去官网搜索，目前还没有什么无法理解的地方。（持续更新）

三、模块规范

1、layui的模块是基于layui.js内部实现的模块异步加载方式。

2、预先加载，也就是先在最外层定义一个layui.use()，将所有的js代码都包括在里面，这样可以防止多次重复的定义layui.use()

3、按需加载（不推荐），在需要使用某个模块的时候再去定义layui.use()来加载模块，可满足对网站的性能有极致的要求的人。

注意：如果你的 JS 中需要大量用到模块，我们并不推荐你采用这种加载方式（按需加载），因为这意味着你要写很多 layui.use()，代码可维护性不高。 建议还是采用：预先加载。即一个JS文件中，写一个use即可。

4.使用扩展模块：

/*
 * 1、test.js代码
 */
//使用define()定义模块
layui.define(function(exports){
	//声明一个对象
	var obj= {
			//hello属性指定一个方法
		    hello:function(str){
		    	alert("hello "+(str||"mymod"));
		    }
	   	}
	//输出借口（输出定义的模块，模块名为mymod）
	exports("mymod",obj);
});



/*
 * 2、html页面代码
 */
//配置test.js的路径
 layui.config({
 	base:"js/"	//test.js的根目录
 }).extend({
 	mymod:"test"	//test.js所在的目录，且指定模块
 });
 
//使用拓展模块
layui.use(['mymod'], function(){
  var mymod = layui.mymod;
  
  mymod.hello('World!'); //弹出 Hello World!
});

四、页面元素（使用）

1、栅格、后台布局

1.1、介绍：

1. 栅格（可以看作为使用div的表格），layui的栅格采用了12等分。
2. 内置了四种适配处理：移动设备（ms）、平板（sm）、中尺寸桌面（md）、大尺寸桌面（lg）
3. layui-row定义行、layui-col-md*定义列，且放在行内（md为可选、*为12等分中的几分，详见官网）

1.2、响应式规则

对不同尺寸的屏幕进行适配处理：

将栅格放入一个带有 class="layui-container" 的特定的容器中：以便在小屏幕以上的设备中固定宽度，让列可控。

将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中：那么宽度将不会固定，而是 100% 适应。

2、颜色

2.1、内置7种颜色

• 赤色：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"

2.2、颜色设计感

layui的其他常用颜色：常用主色（象征包容的墨绿色为主色调）、场景色（比较亮丽的颜色）、极简中性色（灰色、用于背景边框）。

3、图标

<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"><i/>
//laui-icon：使用图标就需要该类
//layui-icon-face-smile：一个笑脸的图标，如果需要其他图标就去官网查询
//style：使用了layui的图标也可以通过style来设置颜色、大小等属性

4、动画

<div class="layui-anim layui-anim-up layui-anim-loop"></div>
//layui-anim：这个是必须的
//layui-anim-up：向上弹出的动画，可替换
//layui-anim-loop：循环，重复动画

5、按钮

提示：多种不同样式可以根据正常逻辑随意搭配

<button class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>

//一个带图标的按钮
<button class="layui-btn layui-btn-sm layui-btn-primary">
  <i class="layui-icon">&#x1002;</i>
</button>

5.1、主题：（6种）

5.2、尺寸（4种）

5.3、圆角：layui-btn-radius

5.4、按钮组、按钮容器：

//按钮组：将多个按钮按组分在一起
<div class="layui-btn-group">
  <button class="layui-btn">增加</button>
  <button class="layui-btn">编辑</button>
  <button class="layui-btn">删除</button>
</div>


//按钮容器（...）
//尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器
<div class="layui-btn-container">
  <button class="layui-btn">按钮一</button> 
  <button class="layui-btn">按钮二</button> 
  <button class="layui-btn">按钮三</button> 
</div>
    

6、表单

在一个容器中设定 class="layui-form" 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。

（请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用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类 



//如果需要页面的效果，则必须加载form模块
<script>
//Demo
layui.use('form', function(){
  var form = layui.form;
  
  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>

7、导航条

导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边。

<ul class="layui-nav" lay-filter="">
  <li class="layui-nav-item"><a href="">最新活动</a></li>
  <li class="layui-nav-item layui-this"><a href="">产品</a></li><!-- layui-this：指定当前页面分类 -->
  <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>
 
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

垂直导航在ul中需要追加class：layui-nav-tree 
侧边导航需要追加class：layui-nav-tree layui-nav-side

8、tab选项卡

类似于简便行型的导航条，与导航条同样依赖于element模块

9、进度条

进度条可应用于许多业务场景，如任务完成进度、loading等等，是一种较为直观的表达元素。依赖element模块。

10、面板

一般的面板通常是指一个独立的容器，而折叠面板则能有效地节省页面的可视面积，非常适合应用于：QA说明、帮助文档等

分为：卡片面板、折叠面板。依赖于element模块

11、表格

<table class="layui-table" lay-skin="line">
  <!-- 设置列的宽度 -->
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>

  行边框表格（内部结构参见右侧目录“常规用法”）
</table>
 
<table class="layui-table" lay-skin="row">
  列边框表格（内部结构参见右侧目录“常规用法”）
</table>
 
<table class="layui-table" lay-even lay-skin="nob">
  无边框表格（内部结构参见右侧目录“常规用法”）
</table>



<table class="layui-table" lay-size="sm">
  小尺寸表格（内部结构参见右侧目录“常规用法”）
</table>
 
<table class="layui-table" lay-size="lg">
  大尺寸表格（内部结构参见右侧目录“常规用法”）
</table>

12、徽章

1. 小圆点，通过 layui-badge-dot 来定义，里面不能加文字
2. 椭圆体，通过 layui-badge 来定义。事实上我们把这个视作为主要使用方式
3. 边框体，通过 layui-badge-rim 来定义
4. 例：<span class="layui-badge-rim">Hot</span>

13、时间线

• 图标可以任意定义（但并不推荐更改）
• 标题区域并不意味着一定要加粗
• 内容区域可自由填充。

五、内置模块（重点）

1、弹出层（layer）

由于 layer 在 layui 体系中的位置比较特殊，甚至让很多人都误以为 layui = layer ui，所以再次强调 layer 只是作为 layui 的一个弹层模块，由于其用户基数较大，所以至今仍把她作为独立组件来维护。

1.1、layer的参数：

• type：层类型
• title：标题
• content：内容
• skin：皮肤
• area：宽高
• offset：坐标
• icon：提示图标
• btn：提示按钮
• btnAlign：按钮排列
• closeBtn：右上关闭
• shade：遮罩
• shadeClose
• time：自动关闭
• id：唯一id
• anim：动画
• isOutAnim：关闭动画
• maxmin：最大小化
• fixed：是否固定
• resize：是否允许拉伸
• resizing：正在拉伸
• scrollbar：屏蔽滚动
• maxWidth：最大宽
• maxHeight：最大高
• zIndex：层叠值
• move：拖拽元素
• moveOut：拖出
• moveEnd：回调
• tipsTips：参数
• tipsMore：允许多tips
• success：弹出后回调
• yes：确定回调
• cancel：关闭回调
• end：销毁后回调
• full/min/restore

1.2、layer的方法

• layer.config(option) - 初始化全局配置：它不仅可以配置一些诸如路径、加载的模块，甚至还可以决定整个弹层的默认参数。
• layer.ready(callback) - 初始化就绪：当你在页面一打开就要执行弹层时
• layer.open(options) - 原始核心方法：不管是使用哪种方式创建层，都是走layer.open()
• layer.alert(content,options,yes) - 普通信息框：一般用于对用户造成比较强烈的关注，类似系统alert，但却比alert更灵便。
• layer.confirm(content,options,yes,cacel) - 询问框：类似系统confirm，但却远胜confirm。
• layer.msg(content,options,end) - 提示框：它简单，而且足够得自觉，它不仅占据很少的面积，而且默认还会3秒后自动消失。
• layer.load(icon,options) - 加载层：type:3的深度定制。load默认是不会自动关闭的，因为你一般会在ajax回调体中关闭它。
• layer.tips(content,follow,options) - tips层：type:4的深度定制。默认是在元素右边弹出。
• layer.close(index) - 关闭特定层：每一种弹层调用方式，都会返回一个index，将这个index作为参数传入就可关闭指定层了
• layer.closeAll(type) - 关闭所有层：它会销毁掉当前页所有的layer层。当然，如果你只想关闭某个类型的层，那么你可以传入参数，dialog（信息框）、page（页面层）、iframe（iframe层）、loading（加载层）、tips（tips层）
• layer.style(index,cssStyle) - 重新定义层样式：该方法对loading层和tips层无效。参数index为层的索引，cssStyle允许你传入任意的css属性
• layer.title(title,index) - 改变层标题：
• layer.getChildFrame(selector,index) - 获取iframe的DOM：当你试图在当前页获取iframe页的DOM元素时。

  扩展：
  layer.open({
    type: 2,
    content: 'test/iframe.html',
    success: function(layero, index){//成功时执行的回调。layero代表该层的DOM
      var body = layer.getChildFrame('body', index);//获取body中的页面元素
      //可以通过这样来调用子页面（层）的方法
      var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：
      iframeWin.method();//执行子页面方法
      console.log(body.html()) //得到iframe页的body内容
      body.find('input').val('Hi，我是从父页来的')
    }
  });

• layer.getFrameIndex(windowName) - 获取特定iframe层的索引（通过iframe的name）

  //假设这是iframe页。window.name：获得当前iframe的名字
  var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  parent.layer.close(index); //再执行关闭

   

• layer.iframAuto(index) - 指定ifram自适应：调用该方法时，iframe层的高度会重新进行适应

• layer.iframeUrl(index,url) - 重置特定iframe的url：使用方式：layer.iframeSrc(index, 'http://sentsin.com')

• layer.setTop(layero) - 置顶当前窗口

•  layer.full()、layer.min()、layer.restore() - 手工执行最大、小、全屏化

• layer.prompt(options,yes) - 输入层：yes携带value 表单值 index 索引 elem 表单元素

• layer.tab(options) - tab层：弹出tab层，可以有多个选项卡

• layer.photos(options) - 相册层：photos支持传入json和直接读取页面图片两种方式。

2、日期与时间选择（laydate）

全面重写的 layDate 包含了大量的更新，其中主要以：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）。

核心方法：laydate.render(options)设置基础参数，也可通过laydate.set(options)来设置全局基础参数

2.1、laydate基础参数：

• elem：绑定元素，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象。（必填）
• type：控件选择类型（year年选择器、month年月选择器、date日期选择器、time时间选择器、datetime日期时间选择器）
• range：开启左右面板范围选择，可以显示某个时间至下一个时间，默认使用“-”分隔
• format：自定义格式，默认值“yyyy-MM-dd”
• value：初始值，默认值“new Date()”，必须传入符合format格式的值（format可以自定义）
• inInitValue：初始值填充，控制是否自动向元素填充初始值（需配合 value 参数使用）（初步本地测试，结果无效）
• min/max：设置最小、最大范围的日期时间，不在范围内的将不可选中。这两个参数的赋值非常灵活。
• show：默认显示，设置是否显示日期选择控件，通常用于外部事件调用控件
• position：定位方式，三种可选值（absolute、fixed、static）
• zIndex：层叠顺序，一般用于解决与其它元素的互相被遮掩的问题。如果 position 参数设为 static 时，该参数无效。
• showBottom：是否显示底部栏，如果设置 false，将不会显示控件的底部栏区域
• btns：工具组，默认值“['clear', 'now', 'confirm']”，右下角显示的按钮，会按照数组顺序排列，内置可识别的值有：clear、now、confirm
• lang：语言，内置了两种语言版本：cn（中文版）、en（国际版，即英文版）。并没有开放自定义文字，避免繁琐的配置。
• theme：主题，theme的可选值有：default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）。还可以传入其它字符，如：theme: 'xxx'，那么控件将会多出一个 class="laydate-theme-xxx" 的CSS类，以便于你单独定制主题。
• calendar：是否显示公历节日，通过设置 true 来开启。国际版不会显示。
• mark：自定义标注重要日子，例：{'0-0-15': '中旬'}（可有多个“,”分隔，0代表每年每月）

2.2、laydate回调参数

• ready：控件在打开时触发，回调返回一个参数：初始的日期时间对象
• change：年月日时间被切换时都会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象。
• done：控件选择完毕后的回调，点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象

2.3、其他

• 弹出控件提示：执行核心方法 laydate.render(options) 会返回一个当前实例对象。其中包含一些成员属性和方法，比如：hint方法
• 配置基础参数（不常使用）：采用 requirejs 等其它方式引用 laydate，那么你需要设置基础路径，以便 laydate.css 完成加载。

  laydate.path = '/static/xxx/'; //laydate.js 所在目录
   
  //配置好路径后，再调用
  laydate.render(options);

   

• 其他方法

  方法名	备注
  laydate.getEndDate(month, year)	获取指定年月的最后一天，month默认为当前月，year默认为当前年。如：  var endDate1 = laydate.getEndDate(10); //得到31  var endDate2 = laydate.getEndDate(2, 2080); //得到29

3、即时通讯（layim）

LayIM正试图重新为网页带来一些社交想象。作为一款Web即时通讯前端解决方案（服务端需自写），LayIM提供了全方位的前端接口支撑，不仅能让您更高效地接入到自己的通讯服务中，更能让你轻松地与 环信、融云、野狗 等第三方通讯服务平台对接。

4、分页（laypage）

4.1、使用：

指向一个分页的容器，通过服务器得到初始，即可完成分页渲染。

<div id="test1"></div>
 
<script src="/static/build/layui.js"></script>
<script>
layui.use('laypage', function(){
  var laypage = layui.laypage;
  
  //执行一个laypage实例
  laypage.render({
    elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
    ,count: 50 //数据总数，从服务端得到
  });
});

4.2、laypage基础参数

//开启location.hash的记录
laypage.render({
    elem: 'test1'
    ,count: 500
    ,curr: location.hash.replace('#!fenye=', '') //获取起始页
    ,hash: 'fenye' //自定义hash值
});

4.3、jump切换分页的回调

当分页被切换时触发，第一个参数（obj）：该页的所有选项，第二个参数（first）：是否首次，一般由于初始值加载的判断。

laypage.render({
  elem: 'test1'
  ,count: 70 //数据总数，从服务端得到
  ,jump: function(obj, first){
    //obj包含了当前分页的所有参数，比如：
    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
    console.log(obj.limit); //得到每页显示的条数
    
    //首次不执行
    if(!first){//第一次进入页面为true，之后每一次跳转页面都为undefined
      //do something
    }
  }
});

5、模板引擎（laytpl）

可以与数据分离（有点类似于java的el表达式，不过语法不同）

语法：

<div>{
       { d.content }}</div>

<h2>{
       {= d.title }}</h2>

{
       {#
  var fn = function(){
    return '2017-08-18';
  };
}}

{
       {# if(true){ }}
  开始日期：{
       { fn() }}
{
       {# } else { }}
  已截止
{
       {# } }}

<div> {
       {! 这里面的模板不会被解析 !}}</div>

也可重新定义分割符。（不要急躁，去官网找一下吧。）

以下模块由于官网讲解比较详细，同时内容比较多也不好记录所以暂留。

6、数据表格（table）

layui最核心的组成之一，对表格进行一系列功能和动态化数据操作。

7、表单（form）

8、文件上传（upload）

9、常用元素操作（element）

元素功能的开启只需要加载element模块即会自动完成，所以不用跟其它模块一样为某一个功能而调用一个方法。

10、评分（rate）

11、轮播（carousel）

12、流加载（flow）

13、工具集（util）

14、代码修饰器（code）