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


Posted in Javascript onSeptember 14, 2019

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自定义模块的使用方法详解

以上这篇基于Layui自定义模块的使用方法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 常用操作方法
Jan 28 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
vue实现分页加载效果
Dec 24 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 Javascript
Python机器学习之决策树和随机森林
Jul 15 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 #Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 #Javascript
Layui Form 自定义验证的实例代码
Sep 14 #Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 #Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 #Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 #Javascript
vue登录注册实例详解
Sep 14 #Javascript
You might like
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
php验证码生成器
2017/05/24 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
python实现apahce网站日志分析示例
2014/04/02 Python
python先序遍历二叉树问题
2017/11/10 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
数字化校园建设方案
2014/05/03 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
党在我心中演讲稿
2014/09/02 职场文书
离职感谢信怎么写
2015/01/22 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
解析目标检测之IoU
2021/06/26 Python