使用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定义一个模块并使用的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于Layui自定义模块的使用方法详解

    layui是一个极其不错的前端UI框架.是后端程序员的福音.总之如果你是一个后端开发者.如果你苦于你的界面"惨不忍睹".选择layui来开发是个极好的选择. 之前的项目也有使用过layui.只是没有过多的关注其框架本身.对于项目上.拿来即用即可! 为什么要自定义模块呢?好处很多.比如可以大量重用代码...... 我也是一个极其懒惰的人.总是想办法让代码可重用 根据layui官方的文档说明.首先第一步是要确定你要扩展的模块名称 我现在做的是登录功能.因此我的扩展模块名叫 login 使用

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

    在使用layui的过程,有几个方法需要被多个js引用,所以我按照文档,自定义了一个layui的模块,下面实现过程 先定义一个模块 //定义模块 layui.define(['form'], function(exports){ var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功 var $ = layui.$; var obj = { changeParentPlace: function (parentId,tagId,levelPlace) {

  • seaJs的模块定义和模块加载浅析

    SeaJS 是由玉伯开发的一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块和css模块样式.SeaJS非常小巧,小巧在于压缩和gzip后体积只有4K,而且接口和方法也非常少,SeaJS 就两个核心:模块定义和 模块的加载及依赖关系.SeaJS非常强大,SeaJS可以加载任意 JavaScript 模块和css模块样式,SeaJS会保证你在使用一个模块时,已经将所依赖的其他模块载入到脚本运行环境中.玉伯的说法,SeaJS可以让你享受写代码的乐趣,

  • 在java中如何定义一个抽象属性示例详解

    前言 本文主要给大家介绍的是在java中定义一个抽象属性的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: Abstract关键字通常被用于类和方法,用来把某些行为的实现委托给子类.由于Java不支持抽象属性,如果你试图将类属性标记为抽象,将会得到一个编译时错误. 在本教程中,我们将介绍两种定义抽象属性的方法,这些抽象属性可以由子类进行设置,而且不使用Abstract 关键字. 实用案例 假设我们想要实现一个记录事务的日志模块,用来记录特定事务的信息.我们希望这个模块是抽

  • Python模块的定义，模块的导入，__name__用法实例分析

    Python模块的定义，模块的导入，__name__用法实例分析

    本文实例讲述了Python模块的定义,模块的导入,__name__用法.分享给大家供大家参考,具体如下: 相关内容: 什么是模块 模块的导入 模块的导入 自模块的导入 同级目录导入 不同级目录导入 目录内导入目录外 目录外导入目录内 __name__ 什么是模块: 在Python中,模块就是一个个方法和类的仓库,如果我们想要使用某个模块中的某个方法或类,那么我们就需要导入对应的模板. [python有内置方法.类,所以有些方法我们并不需要导入模块] 模块的使用:模块.函数 ,     模块.类

  • 第三节--定义一个类

    +-------------------------------------------------------------------------------+ | = 本文为Haohappy读<<Core PHP Programming>>  | = 中Classes and Objects一章的笔记  | = 翻译为主+个人心得  | = 为避免可能发生的不必要的麻烦请勿转载,谢谢  | = 欢迎批评指正,希望和所有PHP爱好者共同进步!  | = PHP5研究中心: htt

  • 第三节 定义一个类 [3]

    当你声明一个类,你需要列出对象应有的所有变量和所有函数-被称为属性和方法. 3.1.1中显示了一个类的构成. 注意在大括号({})内你只能声明变量或者函数. 3.1.2中显示了如何在一个类中定义三个属性和两个方法. 3.1.1 class Name extends Another Class { Access Variable Declaration Access Function Declaration } 3.1.2 <?php //定义一个跟踪用户的类 class User { //属性

  • python通过定义一个类实例作为ftp回调方法

    本文实例讲述了python通过定义一个类实例作为ftp回调方法.分享给大家供大家参考.具体实现方法如下: class Writer: def __init__(self, file): self.f = open(file, "w") def __call__(self, data): self.f.write(data) self.f.write('\n') print data FILENAME = "AutoIndent.py" writer = Writer

  • 对new functionName()定义一个函数的理解

    比如定义一个函数的两种调用方法: 复制代码 代码如下: function getInfo() { var info = { message: "message" }; return info; } 1.var info1 = getInfo(); 2.var info2 = new getInfo(); 1和2有什么区别吗?info1和info2得到的值是一样的吗? 第1种很简单,用的也很多,就是执行一个函数,并接受函数的返回值并赋给info1对象: 第2种情况一般就很少见了.首先,函

  • js中定义一个变量并判断其是否为空的方法

    js中定义一个变量 var params=null;判断params不为空的方法: 复制代码 代码如下: if(params && params.hasOwnProperty("name")){} 其中:console.info(params);//结果为:Object {}

  • php定义一个参数带有默认值的函数实例分析

    本文实例分析了php定义一个参数带有默认值的函数用法.分享给大家供大家参考.具体分析如下: php的函数参数可以指定默认值,指定默认值后,调用时如果不给该参数赋值,则该参数就使用默认值 <?php function capitalize( $str, $each=TRUE ) { $str = strtolower($str); if ($each === TRUE) { $str = ucwords ($str); } else { $str = strtoupper($str); } ech

随机推荐