视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
layui定义一个模块并使用的实例
2020-11-27 14:05:38 责编:小采
文档


在使用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');和使用内置模块是一样的

下载本文
显示全文
专题