layui框架学习

layui框架学习

1. table 数据表格文档

1.三种初始化渲染方式

方式	机制	适用场景
01.	方法渲染	用JS方法的配置完成渲染	（推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。
02.	自动渲染	HTML配置，自动渲染	无需写过多 JS，可专注于 HTML 表头部分
03.	转换静态表格	转化一段已有的表格元素	无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可

1.方法渲染

<table id="demo" lay-filter="test"></table>
<script>
            layui.use('table',function(){
                var table = layui.table;            
                //第一个实例
                table.render({
                    elem:'#demo',  //table的id
                    height:300,
                    url:'js/user.json',
                    page:true,
                    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>

2.自动渲染

所谓的自动渲染，即：在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。其特点在上文也有阐述。你需要关注的是以下三点：

1) 带有 class="layui-table" 的 <table> 标签。 2) 对标签设置属性 lay-data="" 用于配置一些基础参数 3) 在 <th> 标签中设置属性lay-data=""用于配置表头信息

按照上述的规范写好table原始容器后，只要你加载了layui 的 table 模块，就会自动对其建立动态的数据表格。下面是一个示例：

<table class="layui-table" lay-data="{height:315, url:'/demo/table/user.json', page:true, id:'test'}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{field:'id', width:80, sort: true}">ID</th>
      <th lay-data="{field:'username', width:80}">用户名</th>
      <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
      <th lay-data="{field:'city'}">城市</th>
      <th lay-data="{field:'sign'}">签名</th>
      <th lay-data="{field:'experience', sort: true}">积分</th>
      <th lay-data="{field:'score', sort: true}">评分</th>
      <th lay-data="{field:'classify'}">职业</th>
      <th lay-data="{field:'wealth', sort: true}">财富</th>
    </tr>
  </thead>
</table>

2.基础参数一览表

下面是目前 table 模块所支持的全部参数一览表，我们对重点参数进行了的详细说明，你可以点击下述表格最右侧的“示例”去查看

参数	类型	说明	示例值
elem	String/DOM	指定原始 table 容器的选择器或 DOM，方法渲染方式必填	"#demo"
cols	Array	设置表头。值是一个二维数组。方法渲染方式必填	详见表头参数
url（等）	-	异步数据接口相关参数。其中 url 参数为必填项	详见异步参数
toolbar	String/DOM/Boolean	开启表格头部工具栏区域，该参数支持四种类型值：toolbar: '#toolbarDemo' //指向自定义工具栏模板选择器toolbar: '<div>xxx</div>' //直接传入工具栏模板字符toolbar: true //仅开启工具栏，不显示左侧模板toolbar: 'default' //让工具栏左侧显示默认的内置模板	false
data	Array	直接赋值数据。既适用于只展示一页数据，也非常适用于对一段已知数据进行多页展示。
title	String	定义 table 的大标题（在文件导出等地方会用到）	"用户表"
id	String	设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件，它是表格容器的索引，你在下文诸多地方都将会见识它的存在。 另外，若该参数未设置，则默认从 <table id="test"></table>中的 id 属性值中获取。	test
skin(等)		设定表格各种外观、尺寸等

3.cols - 表头参数一览表

参数	类型	说明	示例值
field	String	设定字段名。非常重要，且是表格数据列的唯一标识	username
title	String	设定标题名称	用户名
width	Number/String	设定列宽，若不填写，则自动分配；若填写，则支持值为：数字、百分比。 请结合实际情况，对不同列做不同设定。	200 30%
minWidth	Number	局部定义当前常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth	100
type	String	设定列类型。可选值有：normal（常规列，无需设定）checkbox（复选框列）radio（单选框列，layui 2.4.0 新增）numbers（序号列）space（空列）	任意一个可选
fixed	String	固定列。可选值有：left（固定在左）、right（固定在右）。一旦设定，对应的列将会被固定在左或右，不随滚动条而滚动。 注意： 如果是固定在左，该列必须放在表头最前面；如果是固定在右，该列必须放在表头最后面。	left（同 true） right
event	String	自定义单元格点击事件名，以便在 tool 事件中完成对该单元格的业务处理	任意字符
align	String	单元格排列方式。可选值有：left（默认）、center（居中）、right（居右）	center
templet	String	自定义列模板，模板遵循 laytpl 语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等	详见自定义模板
toolbar	String	绑定工具条模板。可在每行对应的列中出现一些自定义的操作性按钮	详见行工具事件

4.toolbar - 绑定工具条模板

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <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>  
​
table.render({
  cols: [[
    {field:'id', title:'ID', width:100}
    ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
  ]]
});
​
//接下来我们可以借助 table模块的工具条事件，完成不同的操作功能：
//工具条事件
table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
  var data = obj.data; //获得当前行数据
  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
 
  if(layEvent === 'detail'){ //查看
    //do somehing
  } else if(layEvent === 'del'){ //删除
    layer.confirm('真的删除行么', function(index){
      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
      layer.close(index);
      //向服务端发送删除指令
    });
  } else if(layEvent === 'edit'){ //编辑
    //do something
    
    //同步更新缓存对应的值
    obj.update({
      username: '123'
      ,title: 'xxx'
    });
  } else if(layEvent === 'LAYTABLE_TIPS'){
    layer.alert('Hi，头部工具栏扩展的右侧图标。');
  }
});

5.异步数据参数

参数名	功能
url	接口地址。默认会自动传递两个参数：?page=1&limit=30（该参数可通过 request 自定义） page 代表当前页码、limit 代表每页数据量
method	接口http请求类型，默认：get
where	接口的其它参数。如：where: {token: 'sasasas', id: 123}
contentType	发送到服务端的内容编码类型。如果你要发送 json 内容，可以设置：contentType: 'application/json'
headers	接口的请求头。如：headers: {token: 'sasasas'}

默认规定的数据格式code
{
  "code": 0,
  "msg": "",
  "count": 1000,
  "data": [{}, {}]
} 
              

6.基础方法

基础用法是table模块的关键组成部分，目前所开放的所有方法如下：

> table.set(options); //设定全局默认参数。options即各项基础参数
> table.on('event(filter)', callback); //事件。event为内置事件名（详见下文），filter为容器lay-filter设定的值
> table.init(filter, options); //filter为容器lay-filter设定的值，options即各项基础参数。例子见：转换静态表格
> table.checkStatus(id); //获取表格选中行（下文会有详细介绍）。id 即为 id 参数对应的值
> table.render(options); //用于表格方法级渲染，核心方法。应该不用再过多解释了，详见：方法级渲染
> table.reload(id, options, deep); //表格重载
> table.resize(id); //重置表格尺寸
> table.exportFile(id, data, type); //导出数据
> table.getData(id); //用于获取表格当前页的所有行数据（layui 2.6.0 开始新增）

7.表格重载

很多时候，你需要对表格进行重载。比如数据全局搜索。以下方法可以帮你轻松实现这类需求（可任选一种）。

语法	说明	shiyong场景
table.reload(ID, options, deep)	参数 ID 即为基础参数id对应的值，见：设定容器唯一ID 参数 options 即为各项基础参数 参数 deep：是否采用深度重载（即参数深度克隆，也就是重载时始终携带初始时及上一次重载时的参数），默认 false 注意：deep 参数为 layui 2.6.0 开始新增。	所有渲染方式
tableIns.reload(options, deep)	参数同上 tableIns 可通过 var tableIns = table.render() 得到	仅限方法级渲染

重载示例：

//示例2：方法级渲染的重载
​
//所获得的 tableIns 即为当前容器的实例
var tableIns = table.render({
  elem: '#id'
  ,cols: [] //设置表头
  ,url: '/api/data' //设置异步接口
  ,id: 'idTest'
}); 
 
//这里以搜索为例
tableIns.reload({
  where: { //设定异步数据接口的额外参数，任意设
    aaaaaa: 'xxx'
    ,bbb: 'yyy'
    //…
  }
  ,page: {
    curr: 1 //重新从第 1 页开始
  }
});
//上述方法等价于
table.reload('idTest', {
  where: { //设定异步数据接口的额外参数，任意设
    aaaaaa: 'xxx'
    ,bbb: 'yyy'
    //…
  }
  ,page: {
    curr: 1 //重新从第 1 页开始
  }
}); //只重载数据
​
//注意：这里的表格重载是指对表格重新进行渲染，包括数据请求和基础参数的读取

8.事件

语法：table.on('event(filter)', callback); 注：event 为内置事件名，filter 为容器 lay-filter 设定的值 目前所支持的所有事件见下文

默认情况下，事件所触发的是全部的table模块容器，但如果你只想触发某一个容器，使用事件过滤器即可。 假设原始容器为：<table class="layui-table" lay-filter="test"></table> 那么你的事件写法如下：

//以复选框事件为例
table.on('checkbox(test)', function(obj){
  console.log(obj)
});

1.触发头部工具栏事件

点击头部工具栏区域设定了属性为 lay-event="" 的元素时触发（该事件为 layui 2.4.0 开始新增）。如：

原始容器
<table id="demo" lay-filter="test"></table>
 
工具栏模板：
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
    <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
  </div>
</script>
 
<script;>
//JS 调用：
table.render({
  elem: '#demo'
  ,toolbar: '#toolbarDemo'
  //,…… //其他参数
});
 
//触发事件
table.on('toolbar(test)', function(obj){
  var checkStatus = table.checkStatus(obj.config.id);
  switch(obj.event){
    case 'add':
      layer.msg('添加');
    break;
    case 'delete':
      layer.msg('删除');
    break;
    case 'update':
      layer.msg('编辑');
    break;
  };
});
</script>

2触发复选框选择、触发单选框选择、触发单元格编辑

//触发复选框选择
//点击复选框时触发，回调函数返回一个 object 参数：
table.on('checkbox(test)', function(obj){
  console.log(obj); //当前行的一些常用操作集合
  console.log(obj.checked); //当前是否选中状态
  console.log(obj.data); //选中行的相关数据
  console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
});

//触发单选框选择
//点击表格单选框时触发，回调函数返回一个 object 参数，携带的成员如下：
table.on('radio(test)', function(obj){ //test 是 table 标签对应的 lay-filter 属性
  console.log(obj); //当前行的一些常用操作集合
  console.log(obj.checked); //当前是否选中状态
  console.log(obj.data); //选中行的相关数据
});

//触发单元格编辑
//单元格被编辑，且值发生改变时触发，回调函数返回一个object参数，携带的成员如下：
table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
  console.log(obj.value); //得到修改后的值
  console.log(obj.field); //当前编辑的字段名
  console.log(obj.data); //所在行的所有相关数据  
});

//触发行单双击事件
//点击或双击行时触发。
//触发行单击事件
table.on('row(test)', function(obj){
  console.log(obj.tr) //得到当前行元素对象
  console.log(obj.data) //得到当前行数据
  //obj.del(); //删除当前行
  //obj.update(fields) //修改当前行数据
});
 
//触发行双击事件
table.on('rowDouble(test)', function(obj){
  //obj 同上
});

2.form表单模块

更新渲染

第一个参数：type，为表单的 type 类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表：

参数（type）值	描述
select	刷新select选择框渲染
checkbox	刷新checkbox复选框（含开关）渲染
radio	刷新radio单选框框渲染

 form.render(); //更新全部
 form.render('select'); //刷新select选择框渲染

第二个参数：filter，为 class="layui-form" 所在元素的 lay-filter="" 的值。你可以借助该参数，对表单完成局部更新。

【HTML】
<div class="layui-form" lay-filter="test1">
  …
</div>
 
<div class="layui-form" lay-filter="test2">
  …
</div>
      
【JavaScript】
form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器内的全部表单状态
form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态
//……
      

上述的lay-verify、lay-skin、lay-filter、lay-submit神马的都是我们所说的预设的元素属性，他们可以使得一些交互操作交由form模块内部、或者你来借助form提供的JS接口精确控制。目前我们可支持的属性如下表所示：

属性名	属性值	说明
title	任意字符	设定元素名称，一般用于checkbox、radio框
lay-skin	switch（开关风格） primary（原始风格）	定义元素的风格，目前只对 checkbox 元素有效，可将其转变为开关样式
lay-ignore	任意字符或不设值	是否忽略元素美化处理。设置后，将不会对该元素进行初始化渲染，即保留系统风格
lay-filter	任意字符	事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的。其实它并不私属于form模块，它在 layui 的很多基于事件的接口中都会应用到。
lay-verify	required（必填项） phone（手机号） email（邮箱） url（网址） number（数字） date（日期） identity（身份证） 自定义值	同时支持多条规则的验证，格式：lay-verify="验证A|验证B" 如：lay-verify="required|phone|number" 另外，除了我们内置的校验规则，你还可以给他设定任意的值，比如lay-verify="pass"，那么你就需要借助form.verify()方法对pass进行一个校验规则的定义。详见表单验证
lay-verType	tips（吸附层） alert（对话框） msg（默认）	用于定义异常提示层模式。
lay-reqText	任意字符	用于自定义必填项（即设定了 lay-verify="required" 的表单）的提示文本 注意：该功能为 layui 2.5.0 新增
lay-submit	无需填写值	绑定触发提交的元素，如button

事件触发

语法：form.on('event(过滤器值)', callback);

form模块在 layui 事件机制中注册了专属事件，所以当你使用layui.onevent()自定义模块事件时，请勿占用form名。form支持的事件如下：

event	描述
select	触发select下拉选择事件
checkbox	触发checkbox复选框勾选事件
switch	触发checkbox复选框开关事件
radio	触发radio单选框事件
submit	触发表单提交事件

默认情况下，事件所触发的是全部的form模块元素，但如果你只想触发某一个元素，使用事件过滤器即可。 如：<select lay-filter="test"></select>

form.on('select(test)', function(data){
  console.log(data);
});

触发select选择、checkbox复选、switch开关、radio单选

//下拉选择框被选中时触发，回调函数返回一个object参数，携带两个成员：
form.on('select(filter)', function(data){
  console.log(data.elem); //得到select原始DOM对象
  console.log(data.value); //得到被选中的值
  console.log(data.othis); //得到美化后的DOM对象
});   
//请注意：如果你想触发所有的select，去掉过滤器(filter)即可。下面将不再对此进行备注。


//复选框点击勾选时触发，回调函数返回一个object参数，携带两个成员
form.on('checkbox(filter)', function(data){
  console.log(data.elem); //得到checkbox原始DOM对象
  console.log(data.elem.checked); //是否被选中，true或者false
  console.log(data.value); //复选框value值，也可以通过data.elem.value得到
  console.log(data.othis); //得到美化后的DOM对象
});  

//开关被点击时触发，回调函数返回一个object参数，携带两个成员：
  form.on('switch(filter)', function(data){
  console.log(data.elem); //得到checkbox原始DOM对象
  console.log(data.elem.checked); //开关是否开启，true或者false
  console.log(data.value); //开关value值，也可以通过data.elem.value得到
  console.log(data.othis); //得到美化后的DOM对象
	});    
//radio单选框被点击时触发，回调函数返回一个object参数，携带两个成员：
form.on('radio(filter)', function(data){
  console.log(data.elem); //得到radio原始DOM对象
  console.log(data.value); //被点击的radio的value值
});  

触发submit提交

//按钮点击或者表单被执行提交时触发，其中回调函数只有在验证全部通过后才会进入，回调返回三个成员：
form.on('submit(*)', function(data){
  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});

//再次温馨提示：上述的submit(*)中的 * 号为事件过滤器的值，是在你绑定执行提交的元素时设定的，如：
    <button lay-submit lay-filter="*">提交</button>     
    
//你可以把*号换成任意的值，如：lay-filter="go"，但触发事件时也要改成 form.on('submit(go)', callback);    

表单赋值 / 取值

语法：form.val('filter', object);

用于给指定表单集合的元素赋值和取值。如果 object 参数存在，则为赋值；如果 object 参数不存在，则为取值。

//给表单赋值
form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
  "username": "贤心" // "name": "value"
  ,"sex": "女"
  ,"auth": 3
  ,"check[write]": true
  ,"open": false
  ,"desc": "我爱layui"
});
 
//获取表单区域所有值
var data1 = form.val("formTest");


//第二个参数中的键值是表单元素对应的 name 和 value。

表单验证

<input type="text" lay-verify="email"> 
 
还同时支持多条规则的验证，如下：
<input type="text" lay-verify="required|phone|number">
    

表单自定义验证

//除了内置的校验规则外，你还可以自定义验证规则，通常对于比较复杂的校验，这是非常有必要的。

form.verify({
  username: function(value, item){ //value：表单的值、item：表单的DOM对象
    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
      return '用户名不能有特殊字符';
    }
    if(/(^\_)|(\__)|(\_+$)/.test(value)){
      return '用户名首尾不能出现下划线\'_\'';
    }
    if(/^\d+\d+\d$/.test(value)){
      return '用户名不能全为数字';
    }
    
    //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
    if(value === 'xxx'){
      alert('用户名不能为敏感词');
      return true;
    }
  }
  
  //我们既支持上述函数式的方式，也支持下述数组的形式
  //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
  ,pass: [
    /^[\S]{6,12}$/
    ,'密码必须6到12位，且不能出现空格'
  ] 
});      

//当你自定义了类似上面的验证规则后，你只需要把 key 赋值给输入框的 lay-verify 属性即可：
<input type="text" lay-verify="username" placeholder="请输入用户名">
<input type="password" lay-verify="pass" placeholder="请输入密码">
    
    

3.弹出层 layer

type - 基本层类型

类型：Number，默认：0

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

title - 标题

类型：String/Array/Boolean，默认：'信息'

title支持三种类型的值，若你传入的是普通的字符串，如title :'我是标题'，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false

content - 内容

类型：String/DOM/Array，默认：''

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。譬如：

/!*
 如果是页面层
 */
layer.open({
  type: 1, 
  content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
  type: 1,
  content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
//Ajax获取
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: str //注意，如果str是object，那么需要字符拼接。
  });
});
/!*
 如果是iframe层
 */
layer.open({
  type: 2, 
  content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
}); 
/!*
 如果是用layer.open执行tips层
 */
layer.open({
  type: 4,
  content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});        

skin - 样式类名

类型：String，默认：''

skin不仅允许你传入layer内置的样式class名，还可以传入您自定义的class名。这是一个很好的切入点，意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有：layui-layer-lan**layui-layer-molv，未来我们还会选择性地内置更多，但更推荐您自己来定义。以下是一个自定义风格的简单例子

        
//单个使用
layer.open({
  skin: 'demo-class'
});
//全局使用。即所有弹出层都默认采用，但是单个配置skin的优先级更高
layer.config({
  skin: 'demo-class'
})
//CSS 
body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
body .demo-class .layui-layer-btn a{background:#333;}
body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
…
加上body是为了保证优先级。你可以借助Chrome调试工具，定义更多样式控制层更多的区域。    

area - 宽高

类型：String/Array，默认：'auto'

在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: '500px'，高度仍然是自适应的。当你宽高都要定义时，你可以area: ['500px', '300px']

offset - 坐标

类型：String/Array，默认：垂直水平居中

offset默认情况下不用设置。但如果你不想垂直水平居中，你还可以进行以下赋值：

值	备注
offset: 'auto'	默认坐标，即垂直水平居中
offset: '100px'	只定义top坐标，水平保持居中
offset: ['100px', '50px']	同时定义top、left坐标
offset: 't'	快捷设置顶部坐标
offset: 'r'	快捷设置右边缘坐标
offset: 'b'	快捷设置底部坐标
offset: 'l'	快捷设置左边缘坐标
offset: 'lt'	快捷设置左上角

btn - 按钮

类型：String/Array，默认：'确认'

信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。当您只想自定义一个按钮时，你可以btn: '我知道了'，当你要定义两个按钮时，你可以btn: ['yes', 'no']。当然，你也可以定义更多按钮，比如：btn: ['按钮1', '按钮2', '按钮3', …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推。如：

//eg1       
layer.confirm('纳尼？', {
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});
 
//eg2
layer.open({
  content: 'test'
  ,btn: ['按钮一', '按钮二', '按钮三']
  ,yes: function(index, layero){
    //按钮【按钮一】的回调
  }
  ,btn2: function(index, layero){
    //按钮【按钮二】的回调
    
    //return false 开启该代码可禁止点击该按钮关闭
  }
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
    
    //return false 开启该代码可禁止点击该按钮关闭
  }
  ,cancel: function(){ 
    //右上角关闭回调
    
    //return false 开启该代码可禁止点击该按钮关闭
  }
});

btnAlign - 按钮排列

类型：String，默认：r

你可以快捷定义按钮的排列位置，btnAlign的默认值为r，即右对齐。该参数可支持的赋值如下：

值	备注
btnAlign: 'l'	按钮左对齐
btnAlign: 'c'	按钮居中对齐
btnAlign: 'r'	按钮右对齐。默认值，不用设置

resize - 是否允许拉伸

类型：Boolean，默认：true

默认情况下，你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能，设置 false即可。该参数对loading、tips层无效

success - 层弹出后的成功回调方法

类型：Function，默认：null

当你需要在层创建完毕时即执行一些语句，可以通过该回调。success会携带两个参数，分别是当前层DOM**当前层索引。如：

layer.open({
  content: '测试回调',
  success: function(layero, index){
    console.log(layero, index);
  }
});        
        

yes - 确定按钮回调方法

类型：Function，默认：null

该回调携带两个参数，分别为当前层索引、当前层DOM对象。如：

layer.open({
  content: '测试回调',
  yes: function(index, layero){
    //do something
    layer.close(index); //如果设定了yes回调，需进行手工关闭
  }
}); 

layer.ready(callback) - 初始化就绪

由于我们的layer内置了轻量级加载器，所以你根本不需要单独引入css等文件。但是加载总是需要过程的。当你在页面一打开就要执行弹层时，你最好是将弹层放入ready方法中，如：

//页面一打开就执行弹层
layer.ready(function(){
  layer.msg('很高兴一开场就见到你');
});     

layer.open(options) - 原始核心方法

基本上是露脸率最高的方法，不管是使用哪种方式创建层，都是走layer.open()，创建任何类型的弹层都会返回一个当前层索引，上述的options即是基础参数，另外，该文档统一采用options作为基础参数的标识例子：

var index = layer.open({
  content: 'test'
});
//拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。    

layer.confirm(content, options, yes, cancel) - 询问框

类似系统confirm，但却远胜confirm，另外它不是和系统的confirm一样阻塞你需要把交互的语句放在回调体中。同样的，它的参数也是自动补齐的。

//eg1
layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
  //do something
  
  layer.close(index);
});
//eg2
layer.confirm('is not?', function(index){
  //do something
  
  layer.close(index);
});    

layer.close(index) - 关闭指定层

关于它似乎没有太多介绍的必要，唯一让你疑惑的，可能就是这个index了吧。事实上它非常容易得到。

//当你想关闭当前页的某个层时
var index = layer.open();
var index = layer.alert();
var index = layer.load();
var index = layer.tips();
//正如你看到的，每一种弹层调用方式，都会返回一个index
layer.close(index); //此时你只需要把获得的index，轻轻地赋予layer.close即可
 
//如果你想关闭最新弹出的层，直接获取layer.index即可
layer.close(layer.index); //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的
 
//当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭 
 
//关闭后的回调（layui 2.6.5、layer 3.4.0 新增）
layer.close(index, function(){
  //do something
});