layUI及layer的用法

一、 layUI 的用法

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

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

c . 基本语法理解

------- 模块化：
// 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的用法 （弹出层效果组件）
a. 介绍：
layUI衍生出了三个组件：layer 弹出层效果组件
layDate 日期选择器组件
layIM 即时通信组件 ---- 不常用

     layui 包含了layer，只是layer被独立出来成了一个单独的项目

b . 使用：
1>. layer下载：(案例)
http://layer.layui.com/
将下载好的文件夹中的layer文件夹直接拖进去

 2> . 引用：
       <script src="jQuery的路径"></script> <!-- 你必须先引入     jQuery1.8或以上版本 -->
       <script src="layer.js的路径"></script>

 3> . 写法：
       直接写用法即可，例如：
       <script>
          layer.msg('Hello World');  // 弹出
       </script>

  4> .具体用法解读：
        http://layer.layui.com/