使用layui定义一个模块并使用的例子

 更新时间:2019年09月14日 22:57:07   作者:fireaco  
今天小编就为大家分享一篇使用layui定义一个模块并使用的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

在使用layui的过程,有几个方法需要被多个js引用,所以我按照文档,自定义了一个layui的模块,下面实现过程

先定义一个模块

//定义模块
layui.define(['form'], function(exports){

  var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
  var $ = layui.$;

  var obj = {
    changeParentPlace: function (parentId,tagId,levelPlace) {
      $.ajax({
        url:ctx + '/base/place/changeParentPlace',
        type:'get',
        data:{
          parentId:parentId
        },
        dataType:'json',
        success:function (data) {
          $("#" + tagId).empty();
          $("#" + tagId).append('<option value="">请选择</option>');
          if(data.result != null && data.result.length != 0) {
            $.each(data.result,function(i,place) {
              if(levelPlace == place.name) {
                $("#" + tagId).append('<option selected value="'+place.id+'">'+place.name+'</option>')
              }else {
                $("#" + tagId).append('<option value="'+place.id+'">'+place.name+'</option>')
              }
            })
          }
          form.render('select'); //刷新select选择框渲染
        }
      })
    }
  }

  //输出模块
  exports('common', obj);
});

定义方法使用layui.define

define中的第一个参数可以加载一些layui中内置的模块来使用,第二个回调方法中定义一些公共的方法

exports的第一参数是这个模块起的名字,第二个参数是一个对象该对象中定义了这三个方法

设置模块

//设置模块
layui.config({
  base: ctx + '/js/app/modules/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
  common:'common'
});

定义模块使用layui.config

base定义的是定义模块的js所在目录

common是设置的别名,'common'是目录中的文件名(.js自动加)

//调用模块

layui.use(['common'], function(){
  var common = layui.common;

  common.changeParentPlace($("#firstLevelId").val(),'secondLevelId');

});

先将common模块use出来,调用代码如上common.changeParentPlace($("#firstLevelId").val(),'secondLevelId');和使用内置模块是一样的

以上这篇使用layui定义一个模块并使用的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解JS中continue关键字和break关键字的区别

    详解JS中continue关键字和break关键字的区别

    在javascript中continue的作用是退出当前次循环,break的作用则是一旦当前循环有break那么直接退出整个循环。本文将通过一些示例为大家详细讲讲二者的区别,感兴趣的可以了解一下
    2022-08-08
  • 用jquery.sortElements实现table排序

    用jquery.sortElements实现table排序

    实现table排序,网上有很多解决方案,很多都基于jQuery,最后我选择用sortElements,实现很简单
    2014-05-05
  • 使用Js让Html中特殊字符不被转义

    使用Js让Html中特殊字符不被转义

    怎么让<textarea></textarea>之间包含的文本原封不动的显示出来呢?下面小编就为大家介绍一下具体的实现方法吧
    2013-11-11
  • JS+Canvas实现贪吃蛇小游戏

    JS+Canvas实现贪吃蛇小游戏

    这篇文章介绍了JS+Canvas实现贪吃蛇小游戏,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • uni-app小程序实现微信在线聊天功能(私聊/群聊)

    uni-app小程序实现微信在线聊天功能(私聊/群聊)

    这篇文章主要介绍了uni-app小程序实现微信在线聊天(私聊/群聊),今天记录一下项目核心功能的实现过程。页面UI以及功能逻辑全部来源于微信,即时聊天业务的实现使用socket.io,前端使用uni-app开发,后端服务器基于node实现,数据库选择mongoDB,需要的朋友可以参考下
    2023-02-02
  • 使用javaScript实现鼠标拖拽事件

    使用javaScript实现鼠标拖拽事件

    这篇文章主要为大家详细介绍了使用javaScript实现鼠标拖拽事件的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 18个高频使用的JS工具方法总结

    18个高频使用的JS工具方法总结

    这篇文章主要为大家分享一下18个在项目中使用很高频的JS工具方法,希望大家能够知其然也知其所以然,不要只会调用 api,也要会写 api,快跟随小编一起学习一下吧
    2022-04-04
  • JS脚本加载后执行相应回调函数的操作方法

    JS脚本加载后执行相应回调函数的操作方法

    本文主要讲解怎么在成功加载 js 文件后再执行相应回调任务,对JS脚本加载后执行相应回调函数的操作方法感兴趣的朋友,通过本文学习下吧
    2018-02-02
  • 简易的JS计算器实现代码

    简易的JS计算器实现代码

    这篇文章主要为大家详细介绍了JS简易的计算器实现代码,,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • javascript实用方法总结

    javascript实用方法总结

    本文这里给大家总结了一些常用的javascript方法,都是些短小精悍的小代码,提高执行效率,这里推荐给大家。
    2015-02-02

最新评论