layUI及layer用法了解

一、 layUI 的用法

1、 layUI下载：

1>.npm下载：npm install layui-src
2>.下载：http://www.layui.com/
将下载好的压缩文件夹中的layui文件夹直接拖入项目中

2、引用组件：

./layui/css/layui.css
./layui/layui.js //提示：如果是采用非模块化方式，此处可换成：./layui/layui.all.js

3、基本语法理解

• 模块化：

// layui模块的定义
layui.define([mods], function(exports){
//……
exports('mod', api);
});

// layui模块的使用
layui.use(['mod1', 'mod2'], function(args){ // 用layui.use() 来加载对应模块 ***** 基本写法
var mod = layui.mod1;
//…… // 填写用法
});

• 非模块化：

//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
;!function(){
var layer = layui.layer
,form = layui.form; // 引用模块 layer, form
layer.msg('Hello World'); // 直接使用
}();

常见依赖加载模块：

form: 表单
layer: 弹层组件文档
element: 导航，选项卡、进度条、面板
laydate:
.....
不用依赖加载模块：布局，颜色，图标，动画，按钮

具体用法解读：

http://www.layui.com/doc/

二、 layer的用法 （弹出层效果组件）

注意：

1、layUI衍生出了三个组件：
layer 弹出层效果组件
layDate 日期选择器组件
layIM 即时通信组件 ---- 不常用
2、layui 包含了layer，只是layer被独立出来成了一个单独的项目

1、 layer下载：(案例)

http://layer.layui.com/
将下载好的文件夹中的layer文件夹直接拖进去

2、引用：

3、 写法：

直接写用法即可，例如：

具体用法解读：

http://layer.layui.com/