layui 加载第三方插件

1. 使用模块

Layui的模块加载采用核心的 layui.use(mods, callback)方法，当你的JS 需要用到Layui模块的时候，我们更推荐你采用预先加载，因为这样可以避免到处写layui.use的麻烦。你应该在最外层如此定义：

layui.use(['form', 'upload'], function(){  //如果只加载一个模块，可以不填数组。如：layui.use('form')
  var form = layui.form //获取form模块
  ,upload = layui.upload; //获取upload模块
  
  //监听提交按钮
  form.on('submit(test)', function(data){
    console.log(data);
  });
  
  //实例化一个上传控件
  upload({
    url: '上传接口url'
    ,success: function(data){
      console.log(data);
    }
  })
});

2. 内置模块

layui 提供了一些常见的模块可以直接使用，非常方便：

• 弹出层 layer
• 日期与时间选择 laydate
• 即时通讯 layim
• 分页 laypage
• 模板引擎 laytpl
• 数据表格 table
• 表单 form
• 文件上传 upload
• 穿梭框 transfer
• 树形组件 tree
• 颜色选择器 colorpicker
• 常用元素操作 element
• 滑块 slider
• 评分 rate
• 轮播 carousel
• 流加载 flow
• 工具集 util
• 代码修饰器 code

3. 扩展一个 layui 模块

第一步：确认模块名，假设为：mymod，然后新建一个mymod.js文件放入项目任意目录下（注意：不用放入layui目录）
第二步：编写test.js 如下：

//提示：模块也可以依赖其它模块，如：layui.define('layer', callback);
layui.define(function(exports){ 
  var obj = {
    hello: function(str){
      alert('Hello '+ (str||'mymod'));
    }
  };
  
  //输出test接口
  exports('mymod', obj);
});

第三步：设定扩展模块所在的目录，然后就可以在别的JS文件中使用了

//config的设置是全局的
layui.config({
  base: '/res/js/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
  mymod: 'mymod' //如果 mymod.js 是在根目录，也可以不用设定别名
  ,mod1: 'admin/mod1' //相对于上述 base 目录的子目录
});
 
//你也可以忽略 base 设定的根目录，直接在 extend 指定路径（主要：该功能为 layui 2.2.0 新增）
layui.extend({
  mod2: '{/}http://cdn.xxx.com/lib/mod2' // {/}的意思即代表采用自有路径，即不跟随 base 路径
})
 
//使用拓展模块
layui.use(['mymod', 'mod1'], function(){
  var mymod = layui.mymod
  ,mod1 = layui.mod1
  ,mod2 = layui.mod2;
  
  mymod.hello('World!'); //弹出 Hello World!
});

4. 加载第三方插件为layui模块

如果是加载第三方插件，需要改为layui模块式的加载，如sortable插件：

layui.define(function(exports){
	// 插入sotable.js源码
	
    exports('sortable', null);
});

使用：

layui.config({
    base: '../layadmin/layuiadmin/'
}).extend({
    index: 'lib/index', //主入口模块
    sortable: 'business/sortable'
}).use(['index','sortable'], function() {
    new Sortable($(".view-content")[0],{
        animation: 150
    });
});