Layui自定义模块基础学习

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jialijuan521_zhang/article/details/73556776

新手刚刚接触layui,在自定义自己的layui模块的时候废了半天劲,最终终于定义了一个模块成功了,特此做此记录

步骤如下:

第一步:新建一个js文件,目录自选(该实例实在项目的根目录下新建一个MyDefinationLayUiModal,js文件在该目录下),采用layui.define方法

layui.define(function(e){

//提示:该模块也可以依赖其他模块,如:layui.define('layer',callback);

var alert_demo2 = {

hello:function(str) {

alert('Hello'+str);

}

};

//输出该模块的接口,第一个参数为模块接口的名称,第二个参数为该模块中的可调用的对象,通过该对象可以调用指定的模块中的方法,该接口的名称必须和js的文件名相同(此处的js的文件为alert_demo.js),否则将模块无法被调用。

e('myalert_demo',alert_demo2);

});

第二歩:调用定义好的模块:

<script type="text/javascript">

//对自定义的模块进行路径的配置:

layui.config({

//base属性,指明js所定义的模块的相对(相对于根目录)路径

base:'MyDefinitionLayUiModal/'

}).extend({

myalert_demo:'myalert_demo'        //key和value必须一样,此值和输出接口接口的名称 //也相同

});

//使用自定义的提示框模块,use方法中的第一个参数为myalert_demo必须和定义的输出接口的名称 //相同

layui.use('alert_demo',function(){

var alert_demo  = layui.myalert_demo;

alert_demo.hello("你好世界,我是自定义模块!!");

});

</script>

到此为止,自定义的模块的基本案例,就此完成,如若有误,请多多指教。不胜感激。

猜你喜欢

转载自blog.csdn.net/jialijuan521_zhang/article/details/73556776