您的位置 首页 技术

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

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

在使用layui的过程,有几个方法需要被多个js引用,所以我按照文档,自定义了一个layui的模块,下面实现过程(推荐: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定义一个模块并使用的实例的详细内容,更多请关注24课堂在线网其它相关文章!

本文来自网络,不代表24小时课堂在线立场,转载请注明出处:https://www.24ketang.cn/11015.html

为您推荐

返回顶部