LayUI LayUI 的安装及使用 LayUI 的介绍 layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。
由国人开发，16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。
官网：https://www.layui.com
官方文档：https://www.layui.com/doc/
LayUI 的特点 （1）layui属于轻量级框架，简单美观。适用于开发后端模式，它在服务端页面上有非常好的效果。
（2）layui是提供给后端开发人员的ui框架，基于DOM驱动。
下载与使用 在 官网首页 下载到 layui 的最新版。目录结构如下：
├─css // css目录 │ │─modules // 模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：） │ │ ├─laydate │ │ ├─layer │ │ └─layim │ └─layui.css // 核心样式文件 ├─font // 字体图标目录 ├─images // 图片资源目录（目前只有layim和编辑器用到的GIF表情） │─lay // 模块核心目录 │ └─modules // 各模块组件 │─layui.js // 基础核心库 └─layui.all.js // 包含layui.js和所有模块的合并文件 获得 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> 还需要声明需要使用的 模块 和 回调函数。参照官方文档，选择自己想要的效果就行。
比如：
<script> // 注意：导航 依赖 element 模块，否则无法进行功能性操作 layui.use('element', function(){ var element = layui.element;
//…
});
</script> 页面元素 布局 布局容器 固定宽度 将栅格放入一个带有 class=“layui-container” 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。
<div class="layui-container">
<div class="layui-row">
……
</div>
</div>
完整宽度
可以不固定容器宽度。将栅格或其它元素放入一个带有 class=“layui-fluid” 的容器中，那么宽度将不会固定，而是 100% 适应
<div class="layui-fluid"> …… </div> 栅格系统 为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 引进了一套具备响应式能力的栅格系统。将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。
栅格布局规则 采用 layui-row 来定义行，如：
<div class="layui-row"></div> 采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：
变量 md 代表的是不同屏幕下的标记 变量 ***** 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12 如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。 列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕）。
可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
可以在列（column）元素中放入你自己的任意元素填充内容
示例：
<h3>常规布局（以中型屏幕桌面为例）：</h3> <div class="layui-row"> <div class="layui-col-md9" style="background-color: #00F7DE;"> 你的内容 9/12 </div> <div class="layui-col-md3" style="background-color: rosybrown;"> 你的内容 3/12 </div> </div> 响应式规则 栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理。
超小屏幕 (手机<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 12 12 12
响应行为 始终按设定的比例水平排列 在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列 在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列 在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列
<h3>平板、桌面端的不同表现：</h3>
<div class="layui-row">
<div class="layui-col-sm6 layui-col-md4"
style="background-color: thistle">
平板≥768px：6/12 | 桌面端≥992px：4/12
</div>
</div>
<div class="layui-row">
<div class="layui-col-sm4 layui-col-md6"
style="background-color: mediumaquamarine;">
平板≥768px：4/12 | 桌面端≥992px：6/12
</div>
</div>
<div class="layui-row"> <div class="layui-col-sm12 layui-col-md8" style="background-color: coral"> 平板≥768px：12/12 | 桌面端≥992px：8/12 </div> </div> 列边距 通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，分别是：
/* 支持列之间为 1px-30px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔 */ layui-col-space1 layui-col-space2 layui-col-space4 layui-col-space5 layui-col-space6 layui-col-space8 layui-col-space10 layui-col-space12 layui-col-space14 layui-col-space15 layui-col-space16 layui-col-space18 layui-col-space20 layui-col-space22 layui-col-space24 layui-col-space25 layui-col-space26 layui-col-space28 layui-col-space30 示例：
<h3>列间距</h3> <div class="layui-row layui-col-space10"> <div class="layui-col-md4" > <!-- 需要在layui-col-md4里面再加一层div --> <div style="background-color: #009688;"> 1/3 </div> </div> <div class="layui-col-md4"> <div style="background-color: burlywood;"> 1/3 </div> </div> <div class="layui-col-md4"> <div style="background-color: silver;"> 1/3 </div> </div> </div> 注：
- layui-col-space：设置后不起作用主要是因为设置的是padding,也就是说是向内缩，所以设置背景色padding也是会添上颜色，看起来好像没有间距一样。可以在里面在加一个div，来达到目的。
- 间距一般不高于30px，如果超过30，建议使用列偏移。 列偏移 对列追加 类似 layui-col-md-offset* 的预设类，从而让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。 如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，让该列向右偏移 3 个列宽度
<h3>列偏移</h3> <div class="layui-row"> <div class="layui-col-md4" style="background-color: rosybrown;"> 4/12 </div> <div class="layui-col-md4 layui-col-md-offset4" style="background-color: cornflowerblue;"> 偏移4列，从而在最右 </div> </div> 注：列偏移可针对不同屏幕的标准进行设定，在当前设定的屏幕下有效，当低于桌面屏幕的规定的临界值，就会堆叠排列。
列嵌套 可以对栅格进行无穷层次的嵌套。在列元素（layui-col-md*）中插入行元素（layui-row），即可完成嵌套。
<h3>列嵌套</h3> <div class="layui-row layui-col-space5"> <div class="layui-col-md5" style="background-color: thistle;"> <div class="layui-row"> <div class="layui-col-md3" style="background-color: burlywood;" > 内部列 </div> <div class="layui-col-md5" style="background-color: indianred;"> 内部列 </div> <div class="layui-col-md4" style="background-color: mediumaquamarine;"> 内部列 </div> </div> </div> </div> 基本元素 按钮 用法 向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为*layui-btn-{type}*的class来定义其它按钮风格。
<!-- 基础按钮 --> <button type="button" class="layui-btn">一个标准的按钮</button> <a rel="nofollow" href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a> <div class="layui-btn">一个按钮</div> 主题 名称 组合 原始 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” 示例：
<!-- 不同主题的按钮 --> <button class="layui-btn">默认按钮</button> <button class="layui-btn layui-btn-primary">原始按钮</button> <button class="layui-btn layui-btn-normal">百搭按钮</button> <button class="layui-btn layui-btn-warm">暖色按钮</button> <button class="layui-btn layui-btn-danger">警告按钮</button> <button class="layui-btn layui-btn-disabled">禁用按钮</button> 尺寸 尺寸 组合 大型 class=“layui-btn layui-btn-lg” 默认 class=“layui-btn” 小型 class=“layui-btn layui-btn-sm” 迷你 class=“layui-btn layui-btn-xs” <!-- 不同尺寸的按钮 --> <button class="layui-btn layui-btn-primary layui-btn-lg">大型</button> <button class="layui-btn">默认</button> <button class="layui-btn layui-btn-sm layui-btn-danger">小型</button> <button class="layui-btn layui-btn-xs">迷你</button> 圆角 layui-btn-radius
<button class="layui-btn layui-btn-radius">默认按钮</button> <button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button> <button class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button> <button class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button> <button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button> <button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button> 图标 <button type="button" class="layui-btn"> <i class="layui-icon"></i> 添加 </button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary"> <i class="layui-icon">ဂ</i> 刷新 </button> 导航 导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边。面包屑结构简单，支持自定义分隔符。
依赖加载模块：element
实现步骤：
引入的资源
<link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> 依赖加载模块
<script type="text/javascript"> // 注意：导航 依赖 element 模块，否则无法进行功能性操作 layui.use('element', function(){ var element = layui.element;
});
</script> 显示指定类型的导航
水平导航 <ul class="layui-nav"> <li class="layui-nav-item"><a rel="nofollow" href="">最新活动</a></li> <li class="layui-nav-item layui-this"><a rel="nofollow" href="">产品</a></li> <li class="layui-nav-item"><a rel="nofollow" href="">大数据</a></li> <li class="layui-nav-item"> <a rel="nofollow" href="javascript:;">解决方案</a> <dl class="layui-nav-child"> <!-- 二级菜单 --> <dd><a rel="nofollow" href="">移动模块</a></dd> <dd><a rel="nofollow" href="">后台模版</a></dd> <dd><a rel="nofollow" href="">电商平台</a></dd> </dl> </li> <li class="layui-nav-item"><a rel="nofollow" href="">社区</a></li> </ul> 垂直/侧边导航 <ul class="layui-nav layui-nav-tree" > <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> --> <li class="layui-nav-item layui-nav-itemed"> <a rel="nofollow" href="javascript:;">默认展开</a> <dl class="layui-nav-child"> <dd><a rel="nofollow" href="javascript:;">选项1</a></dd> <dd><a rel="nofollow" href="javascript:;">选项2</a></dd> <dd><a rel="nofollow" href="">跳转</a></dd> </dl> </li> <li class="layui-nav-item"> <a rel="nofollow" href="javascript:;">解决方案</a> <dl class="layui-nav-child"> <dd><a rel="nofollow" href="">移动模块</a></dd> <dd><a rel="nofollow" href="">后台模版</a></dd> <dd><a rel="nofollow" href="">电商平台</a></dd> </dl> </li> <li class="layui-nav-item"><a rel="nofollow" href="">产品</a></li> <li class="layui-nav-item"><a rel="nofollow" href="">大数据</a></li> </ul> 水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：
水平导航：layui-nav 垂直导航需要追加class：layui-nav-tree 侧边导航需要追加class：layui-nav-tree layui-nav-side 导航主题 通过对导航追加CSS背景类，让导航呈现不同的主题色
<!-- 如定义一个墨绿背景色的导航 --> <ul class="layui-nav layui-bg-move" > … </ul> 水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝） 垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）
面包屑 <span class="layui-breadcrumb"> <a rel="nofollow" href="">首页</a> <a rel="nofollow" href="">国际新闻</a> <a rel="nofollow" href="">亚太地区</a> <a><cite>正文</cite></a> </span> 你还可以通过设置属性 lay-separator="" 来自定义分隔符。例如：
<span class="layui-breadcrumb" lay-separator="-"> <a rel="nofollow" href="">首页</a> <a rel="nofollow" href="">国际新闻</a> <a rel="nofollow" href="">亚太地区</a> <a><cite>正文</cite></a> </span> 选项卡 导航菜单可应用于头部和侧边，支持响应式，支持删除选项卡等功能。
依赖加载模块：element
实现步骤 引入的资源
<link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> 依赖加载模块
<script type="text/javascript"> // 注意：选项卡 依赖 element 模块，否则无法进行功能性操作 layui.use('element', function(){ var element = layui.element;
});
</script> 加载HTML
<div class="layui-tab"> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户管理</li> <li>权限分配</li> <li>商品管理</li> <li>订单管理</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">内容1</div> <div class="layui-tab-item">内容2</div> <div class="layui-tab-item">内容3</div> <div class="layui-tab-item">内容4</div> <div class="layui-tab-item">内容5</div> </div> </div> 选项卡风格 默认风格：layui-tab 简洁风格需要追加class：layui-tab-brief 卡片风格需要追加class：layui-tab-card 带删除的选项卡 可以对父层容器设置属性 lay-allowClose=“true” 来允许Tab选项卡被删除
<div class="layui-tab" lay-allowClose="true"> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户管理</li> <li>权限分配</li> <li>商品管理</li> <li>订单管理</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">内容1</div> <div class="layui-tab-item">内容2</div> <div class="layui-tab-item">内容3</div> <div class="layui-tab-item">内容4</div> <div class="layui-tab-item">内容5</div> </div> </div> 表格 常规用法 <table class="layui-table"> <colgroup> <col width="150"> <col width="200"> <col> </colgroup> <thead> <tr> <th>昵称</th> <th>加入时间</th> <th>签名</th> </tr> </thead> <tbody> <tr> <td>贤心</td> <td>2016-11-29</td> <td>人生就像是一场修行</td> </tr> <tr> <td>许闲心</td> <td>2016-11-28</td> <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td> </tr> </tbody> </table> 基础属性 属性名 属性值 备注 lay-even 无 用于开启 隔行 背景，可与其它属性一起使用 lay-skin=“属性值” line （行边框风格） row （列边框风格） nob （无边框风格） 若使用默认风格不设置该属性即可 lay-size=“属性值” sm （小尺寸） lg （大尺寸） 若使用默认尺寸不设置该属性即可 你所需要的基础属性写在table标签上，例如：
<!-- 一个带有隔行背景，且行边框风格的大尺寸表格 --> <table class="layui-table" lay-even lay-size="lg" lay-skin="row"> <colgroup> <col width="150"> <col width="200"> <col> </colgroup> <thead> <tr> <th>昵称</th> <th>加入时间</th> <th>签名</th> </tr> </thead> <tbody> <tr> <td>贤心</td> <td>2016-11-29</td> <td>人生就像是一场修行</td> </tr> <tr> <td>许闲心</td> <td>2016-11-28</td> <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td> </tr> </tbody> </table> 表单 依赖加载模块：form
在一个容器中设定 class=“layui-form” 来标识一个表单元素块
<form class="layui-form" action="">
</form> 基本的行区块结构，它提供了响应式的支持。可以换成其他结构，但必须要在外层容器中定义class=“layui-form”，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类
下拉选择框
<select name="city" lay-verify="">
<option value="">请选择一个城市</option>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="0571">杭州</option>
</select>
属性selected可设定默认项
属性disabled开启禁用，select和option标签都支持
<select name="city" lay-verify="">
<option value="010">北京</option>
<option value="021" disabled>上海（禁用效果）</option>
<option value="0571" selected>杭州</option>
</select>
可以通过 optgroup 标签给select分组
<select name="quiz">
<option value="">请选择</option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市？</option>
</optgroup>
<optgroup label="学生时代">
<option value="你的工号">你的工号？</option>
<option value="你最喜欢的老师">你最喜欢的老师？</option>
</optgroup>
</select>
通过设定属性 lay-search 来开启搜索匹配功能
<select name="city" lay-verify="" lay-search>
<option value="010">layer</option>
<option value="021">form</option>
<option value="0571" selected>layim</option>
</select>
复选框
<h2>默认风格：</h2>
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆">
<input type="checkbox" name="" title="禁用" disabled>
<h2>原始风格：</h2> <input type="checkbox" name="" title="写作" lay-skin="primary" checked> <input type="checkbox" name="" title="发呆" lay-skin="primary"> <input type="checkbox" name="" title="禁用" lay-skin="primary" disabled> 属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title） 属性checked可设定默认选中 属性lay-skin可设置复选框的风格 （原始风格：lay-skin=“primary”） 设置*value=“1”*可自定义值，否则选中时返回的就是默认的on 开关 将复选框checkbox，通过设定 lay-skin=“switch” 形成了开关风格
<input type="checkbox" name="xxx" lay-skin="switch"> <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked> <input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭"> <input type="checkbox" name="aaa" lay-skin="switch" disabled> 属性checked可设定默认开 属性disabled开启禁用 属性lay-text可自定义开关两种状态的文本 （两种文本用 “|” 隔开） 设置*value=“1”可自定义值，否则选中时返回的就是默认的on 单选框 <input type="radio" name="sex" value="nan" title="男"> <input type="radio" name="sex" value="nv" title="女" checked> <input type="radio" name="sex" value="" title="中性" disabled> 属性title可自定义文本 属性disabled开启禁用 设置value=“xxx”*可自定义值，否则选中时返回的就是默认的on 文本域 <textarea name="remark" required lay-verify="required" placeholder="请输入个人介绍" class="layui-textarea"></textarea> class=“layui-textarea”：layui.css提供的通用CSS类 组装行内表单 <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> class=“layui-inline”：定义外层行内 class=“layui-input-inline”：定义内层行内 忽略美化渲染 可以对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格。
<input type="radio" name="sex" value="nan" title="男" lay-ignore> 表单方框风格 通过追加 layui-form-pane 的class，来设定表单的方框风格。
<form class="layui-form layui-form-pane" action=""> <!-- 内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则 会看起来比较别扭），如： --> <div class="layui-form-item" pane> <label class="layui-form-label">单选框</label> <div class="layui-input-block"> <input type="radio" name="sex" value="男" title="男"> <input type="radio" name="sex" value="女" title="女" checked> </div> </div> </form> 组件示例 弹出层 模块加载名称：layer，独立版本：layer.layui.com
使用场景 由于layer可以独立使用，也可以通过Layui模块化使用。所以请按照你的实际需求来选择。
场景 用前准备 调用方式
- 作为独立组件使用 如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。 通过script标签引入layer.js后，直接用即可。
- layui 模块化使用 如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js 通过*layui.use(‘layer’, callback)*加载模块 作为独立组件使用 layer
<!-- 引入好layer.js后，直接用即可 --> <script src="layer.js"></script> <script> layer.msg('hello'); </script> 在 layui 中使用 layer
layui.use('layer', function(){ var layer = layui.layer;
layer.msg('hello'); }); 基础参数 type - 基本层类型
类型：Number，默认：0
可传入的值有： 0（信息框，默认） 1（页面层） 2（iframe层） 3（加载层） 4（tips层） title - 标题
类型：String/Array/Boolean，默认：'信息'
title支持三种类型的值： 若传入的是普通的字符串，如 title :'我是标题'，那么只会改变标题文本； 若需要自定义样式，可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式； 若你不想显示标题栏，可以 title: false； content - 内容
类型：String/DOM/Array，默认：''
content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM。 /* 信息框 */ layer.open({ type:0, title:"系统消息", // content可以传入任意的文本或html content:"Hello" });
/* 页面层 */ layer.open({ type:1, title:"系统消息", // content可以传入任意的文本或html content:"<div style='height:100px;width:200px'>Hello</div>" });
/* iframe */ layer.open({ type:2, title:"系统消息", // content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['url', 'no'] content:"http://www.baidu.com" // content:["http://www.baidu.com",'no'] });
/* tips层 */ layer.open({ type: 4, content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM });
area - 宽高
类型：String/Array，默认：'auto'
在默认状态下，layer是宽高都自适应的。 当定义宽度时，你可以area: '500px'，高度仍然是自适应的。 当宽高都要定义时，你可以area: ['500px', '300px']。 icon - 图标
注：信息框和加载层的私有参数。
类型：Number，默认：-1（信息框）/0（加载层）
信息框默认不显示图标。当你想显示图标时，默认层可以传入0-6。如果是加载层，可以传入0-2。 // eg1 layer.alert('酷毙了', {icon: 1}); // eg2 layer.msg('不开心。。', {icon: 5}); // eg3 layer.load(1); // 风格1的加载 示例
// eg1 layer.alert('很高兴见到你
