基于Layui自定义模块的使用方法详解
2019-09-14 22:48
1931 查看
layui是一个极其不错的前端UI框架、是后端程序员的福音。总之如果你是一个后端开发者、如果你苦于你的界面“惨不忍睹”、选择layui来开发是个极好的选择。
之前的项目也有使用过layui、只是没有过多的关注其框架本身。对于项目上、拿来即用即可!
为什么要自定义模块呢?好处很多、比如可以大量重用代码......
我也是一个极其懒惰的人、总是想办法让代码可重用
根据layui官方的文档说明、首先第一步是要确定你要扩展的模块名称
我现在做的是登录功能、因此我的扩展模块名叫 login
使用layui.define()方法来扩展模块、当然模块中你也可以使用layui的其他方法、如下
layui.define('layer', callback);
在定义扩展模块的时候、我需要使用layui的layer模块、然后在回调函数中定义自己的方法
layui.define(["layer","jquery"],function (exports) { var obj = { login : function (url,data,$,targetUrl) { $.post(url,{code:data.code},function (res) { if (res.code&&res.code==400){ layer.msg(res.msg,{icon:1},function () { window.location.href = targetUrl; }); }else{ layer.msg(res.msg,{icon:1},function () { window.location.href = targetUrl; }); } }); } } exports("login",obj); });
上述代码中定义了一个login模块、以便在我登录的时候、不需要写过度的代码即可实现登录、让页面看起来更清爽【无任何杂质】
那么模块定义完了、怎么使用呢?
<script type="text/javascript"> layui.config({ base: '/static/admin/js/module/'//模块存放的目录 }).use(['jquery','element','form','login'],function () { var $ = layui.jquery, form = layui.form, element = layui.element, login = layui.login; form.on("submit(subBtn)",function (data) { //获取表单的值 var field = data.field; login.login("{:url('Login/doLogin')}",field,$,"{:url('Index/index')}"); return false; }); }); </script>
嗯、就这样、在登录的时候、直接将参数传递过去即可、在上述代码中url部分是使用TP的方法生成的、这里不用过多的研究【如果你是写前端的话】。
嗯、就这样、整个模块定义完成!!展示的效果如下
以上这篇基于Layui自定义模块的使用方法详解就是小编分享给大家的全部内容了,希望能给大家一个参考
您可能感兴趣的文章:
相关文章推荐
- 详解Python使用simplejson模块解析JSON的方法
- PHP 基于Yii框架中使用smarty模板的方法详解
- 基于nginx实现缓存功能及uptream模块详细使用方法
- 关于MySQL的存储函数(自定义函数)的定义和使用方法详解
- 详解Python中使用base64模块来处理base64编码的方法
- 基于RestTemplate的使用方法(详解)
- Dojo初探之2:设置dojoConfig详解,dojoConfig参数详解+Dojo中预置自定义AMD模块的四种方式(基于dojo1.11.2)
- nodejs 使用 js 模块的方法实例详解
- python之mock模块基本使用方法详解
- python自定义模块和开源模块使用方法
- AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
- Android自定义Toolbar使用方法详解
- 基于JQuery的Ajax方法使用详解
- Dojo初探之2:设置dojoConfig详解,dojoConfig参数详解+Dojo中预置自定义AMD模块的四种方式(基于dojo1.11.2)
- Python3导入自定义模块的三种方法详解
- Python 常用模块 re 使用方法详解
- 基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
- Python 的MySQLConnector模块使用方法详解
- 详解Python中使用base64模块来处理base64编码的方法
- 如何发布一个自定义Node.js模块到NPM(详细步骤,附Git使用方法)