layui 加载第三方插件_layui引用第三方插件_优小U的博客-程序员秘密

技术标签: layuiadmin  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
    });
});
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zy1281539626/article/details/112738949

智能推荐

java redis 抽奖_GitHub - zenmin/luckdraw: 年会抽奖程序 Java开发 可内定中奖人员 一键导入员工 使用简单..._二营长的意大利炮ii的博客-程序员秘密

LuckDrawJava开发 包含后端+前端可内定中奖人员支持Excel表格一键导入员工使用技术:RedisEasyPOIVue程序截图运行程序(Windows环境)2、解压release包3、双击“运行程序.bat”4、使用RedisDesktopManager点击下载连接本地redis,默认端口63795、进入redis console db0 执行命令set TOKEN xxxx(你的令牌)...

ceph-luminous版本搭建过程_weixin_33719619的博客-程序员秘密

一、环境准备1、本次搭建环境为centos7.2版本2、本次搭建机器为ceph-node1 192.168.13.72ceph-node2 192.168.13.84二、ceph搭建前环境准备1、准备ceph-deploy的镜像源vim /etc/yum.repos.d/ceph.repo[Ceph]name=Ceph packages for $basearchbaseur...

Groovy探索之MOP 七 运行期内的方法和属性分析_iteye_3224的博客-程序员秘密

Groovy探索之MOP 七 运行期内的方法和属性分析在Groovy语言里,运行期内的方法和属性分析有三种方式,它们分别是:第一, 继承自Java语言的反射方式。第二, 使用"respondsTo"和"hasProperty"方法。第三, 使用"hasMetaMethod"和"hasMetaProperty"方法。以上三种方法都能在运行期内分析某个方法或属性是否存...

swiftUI设置TextField的placeholder自定义文本颜色_程序员里的战斗机的博客-程序员秘密

SwiftUI。如何更改TextField的默认的颜色首先目前没有api直接在下面点然后就可以调用要自己写创建自己的custom,View以在所有地方使用struct CustomTextField: View { var placeholder: Text @Binding var text: String var editingChanged: (Bool)->() = { _ in } var commit: ()->() = { } var

03 基于umi搭建React快速开发框架(封装列表增删改查)_weixin_33842328的博客-程序员秘密

前言大家在做业务系统的时候,很多地方都是列表增删改查,做这些功能占据了大家很长时间,如果我们有类似的业务,半个小时就能做出一套那是不是很爽呢。这样我们就可以有更多的时间学习一些新的东西。我们这套框架对此做了下封装,适合的小伙伴也可以借鉴封装到自己的框架当中去。核心思想用的React高阶组件解耦,接下来我们看看怎么用。基础用法导入...

UKF详解_江湖 路人的博客-程序员秘密

UKF匀速直线运动目标跟踪 无迹卡尔曼滤波运行结果 无迹卡尔曼滤波 代码: function UKFclc;clear;T=1; % 采样周期N=60/T; % 采样次数X=zeros(4,N); % 初始化真实轨迹矩阵...

随便推点

okhttp3中的设计模式_okhttp里面的设计模式_曾志刚的博客-程序员秘密

okhttp库的火热程度,相信不需要我多作说明了,网上关于该库的使用和源码分析的文章有如恒河沙数。我就不在这方面凑热闹了,本文从设计模式的角度来谈谈okhttp中都能找到哪些模式。本文所示okhttp版本为3.11.0。Builder 这个应该是很明显的了。OkHttpClient、Request、Response、MultipartBody、HttpUrl等等随处可见,还如下面表示定义在R...

EIGRP负载均衡过程全解_weixin_33851177的博客-程序员秘密

对于路由方面的负载均衡,我们常说的就是eigrp这个负载均衡问题了。那么在这个方面,可以从两个角度进行分析,包括对等和非对等。那么我们将把这两个内容串联到设置过程中为大家讲解,加深一下印象。1、EIGRP默认支持四条链路的不等代价的负载均衡(所有路由基本上都支持);2、使用下面命令可支持六条: router EIGRP 10 maximum...

IntelliJ IDEA快捷键_gnail_oug的博客-程序员秘密

熟练使用快捷键,能提高不少效率,从eclipse转站IntelliJ idea还没有多长时间,对idea的快捷键还不太熟悉,下面是idea使用过程中收集的快捷键:Ctrl+E     最近的文件Ctrl+Alt+Enter     在当前行前插入一行Shift+Enter     在当前行下面增加一行Ctrl+Alt+O     自动删除

北邮通信土著--非技术路线备忘录 (摘自北邮人论坛)_linteng2003的博客-程序员秘密

<br />作者:5yearszz<br />  <br />谨此文,感谢求职漫漫路帮助过我、与我分享过的兄弟姐妹!共勉~<br />北邮七载,想留下些东西,为母校能继续保持就业传统之优势,尽微薄贡献!<br />                                          <br />校园<br />  <br />理工科背景申请各类行业非纯技术岗位可行性分析,欢迎拍砖。专业背景或求职意向不符,请绕行。<br />  <br />专业背景:<br

Postman报错Error:certificate has expired_ssl error: certificate has expired_gsls200808的博客-程序员秘密

最近,postman访问公司域名频繁报这个错,但是用powershell/curl/网页请求确不报。postman临时解决方案:File--&gt;Setting 把SSL certificate verification 选项关闭。从Chrome浏览器小锁点进去,证书链泛域名解析是正常的,日期在范围内,从证书链开始查一直查到根都是在日期内的。肯定是哪里出了问题。postman控制台也看不出什么问题。难道是HTTPS被劫持了?没办法,拿大杀器wireshark抓包试试。跟踪正常请求和异常

Luogu4492 [HAOI2018]苹果树 【动态规划】_weixin_30553837的博客-程序员秘密

题目分析:思路不难想,考虑三个dp状态$f,g,d$。$g[i]$表示有$i$个点的堆的数量$d[i]$表示有$i$个点的情况下所有的方案数中点到根的距离和$f[i]$表示要求的答案。不难发现$g[i]=i!$,然后$d[i]$就枚举左子树大小,然后把左右子树单独的$d[j]$加起来,最后对于每种方案都加上$i-1$,也就是$d[i] = g[i]*(i-1)+\sum_{j=...

推荐文章

热门文章

相关标签