layui学习

目录

一、底层方法

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、其他的方法

方法/属性	描述
layui.link(href)	动态下载css，href即为css路径。注意：该方法并非是你使用Layui所必须的，它一般只是用于动态加载你的外部CSS文件。
layui.data(table, settings)	localStorage 持久化存储、数据会永久存在，除非物理删除。其中参数 table 为表名，settings是一个对象，用于设置key、value。（未理解）
layui.sessionData(table, settings)	sessionStorage 会话性存储、页面关闭后即失效。注：layui 2.2.5 新增。（未理解）
layui.device(key)	获取设备信息，参数key是可选的，在layui mobile模块中的作用可谓举足轻重。该方法返回了丰富的设备信息。（详情见官网）
layui.cache	静态属性。获得一些配置及临时的缓存信息
layui.extend(options)	拓展一个模块别名，如：layui.extend({test: '/res/js/test'})
layui.each(obj, fn)	对象（Array、Object、DOM对象等）遍历，可用于取代for语句
layui.getStyle(node, name)	获得一个原始DOM节点的style属性值，如：layui.getStyle(document.body, 'font-size')
layui.img(url, callback, error)	图片预加载
layui.sort(obj, key, desc)	将数组中的对象按某个成员重新对该数组排序，如：layui.sort([{a: 3},{a: 1},{a: 5}], 'a')
layui.router()	获得location.hash路由，目前在Layui中没发挥作用。对做单页应用会派上用场。
layui.hint()	向控制台打印一些异常信息，目前只返回了error方法：layui.hint().error('出错啦')
layui.stope(e)	阻止事件冒泡
layui.onevent(modName, events, callback)	自定义模块事件，属于比较高级的应用。有兴趣的同学可以阅读layui.js源码以及form模块
layui.event(modName, events, params)	执行自定义模块事件，搭配onevent使用
layui.factory(modName)	用于获取模块对应的 define 回调函数

二、页面元素（认识）

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

 

三、模块规范

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、响应式规则

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

	超小屏幕 (手机<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
响应行为	始终按设定的比例水平排列	在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列

将栅格放入一个带有 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种）

原始	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"

5.2、尺寸（4种）

尺寸	组合
大型	class="layui-btn layui-btn-lg"
默认	class="layui-btn"
小型	class="layui-btn layui-btn-sm"
迷你	class="layui-btn layui-btn-xs"

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基础参数

参数选项	说明	类型	默认值
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: 'fenye' //自定义hash值 });	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

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表达式，不过语法不同）

语法：

语法	说明	示例
{{ d.field }}	输出一个普通字段，不转义html	<div>{{ d.content }}</div>
{{= d.field }}	输出一个普通字段，并转义html	<h2>{{= d.title }}</h2>
{{# JavaScript表达式 }}	JS 语句。一般用于逻辑处理。用分隔符加 # 号开头。 注意：如果你是想输出一个函数，正确的写法是：{{ fn() }}，而不是：{{# fn() }}	{{# var fn = function(){ return '2017-08-18'; }; }} {{# if(true){ }} 开始日期：{{ fn() }} {{# } else { }} 已截止 {{# } }}
{{! template !}}	对一段指定的模板区域进行过滤，即不解析该区域的模板。注：layui 2.1.6 新增	<div> {{! 这里面的模板不会被解析 !}}</div>

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

 

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

6、数据表格（table）

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

7、表单（form）

8、文件上传（upload）

 

9、常用元素操作（element）

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

10、评分（rate）

11、轮播（carousel）

12、流加载（flow）

13、工具集（util）

14、代码修饰器（code）