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模块、以便在我登录的时候、不需要写过度的代码即可实现登录、让页面看起来更简洁
那么模块定义完了、怎么使用呢?
我们遵循 layui 的模块规范建立一个入口文件,并通过 layui.use() 方式来加载该入口文件,最终使用
<script type="text/javascript">
layui.config({
base: '/static/admin/js/module/'//存放新模块的目录,注意,不是layui的模块目录
}).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;
// url部分是使用TP的方法生成的、这里不用过多的研究
login.login("{:url('Login/doLogin')}",field,$,"{:url('Index/index')}");
return false;
});
});
</script>
在登录的时候、直接将参数传递过去即可。展示的效果如下
Layui自定义模块的使用方式的更多相关文章
- layui自定义模块
想把用了layui的页面的一些函数抽取公用,直接引入外部js不可行,只能用layui的模块功能.官网没有说明,但模块名必须和文件名一致 新建yananmod.js文件,内容如下: layui.defi ...
- 17.python自定义模块的导入方式
1.直接用import导入 最后运行main.py可以看到命令行窗口输出了一句:你好,这样就完成了. 2.通过sys模块导入自定义模块的路径path 3.在环境变量中找到自定义模块 这个方法原理就是利 ...
- layui 自定义模块
新建模块目录modules 新建common.js layui.define(['jquery'], function (exports) { var $ = layui.jquery; var ob ...
- python学习笔记:模块——自定义模块的3种导入方式
一.定义 模块就是用一堆的代码实现了一些功能的代码的集合,通常一个或者多个函数写在一个.py文件里,而如果有些功能实现起来很复杂,那么就需要创建n个.py文件,这n个.py文件的集合就是模块.如果不懂 ...
- Python3导入自定义模块的3种方式
前话 最近跟着廖雪峰的教程学到 模块 这一节.关于如何自定义一个模块,如果大家不懂的话还请先看下面这篇博文 ↓ http://www.liaoxuefeng.com/wiki/001431608955 ...
- python基础知识8——模块1——自定义模块和第三方开源模块
模块的认识 模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需 ...
- Python开发【第一篇】Python基础之自定义模块和内置模块
为什么要有模块,将代码归类.模块,用一砣代码实现了某个功能的代码集合. Python中叫模块,其他语言叫类库. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代 ...
- nginx自定义模块编写-实时统计模块--转载
原文:http://www.vimer.cn/2012/05/nginx%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A8%A1%E5%9D%97%E7%BC%96%E5%86%99- ...
- Python 第五篇(下):系统标准模块(shutil、logging、shelve、configparser、subprocess、xml、yaml、自定义模块)
目录: shutil logging模块 shelve configparser subprocess xml处理 yaml处理 自定义模块 一,系统标准模块: 1.shutil:是一种高层次的文件操 ...
随机推荐
- Appium+Python移动端(Android)自动化测试环境搭建
一.安装JDK 下载好jdk安装包后直接下一步直至安装完成即可,安装完JDK后配置环境变量 :计算机→属性→高级系统设置→高级→环境变量: 系统变量→新建 JAVA_HOME 变量 变量值填写jdk的 ...
- PHP csv文件30w+数据导入mysql数据库
<?php class Add { public function data() { ini_set('memory_limit', '-1'); //PHP内存设置 $handle=fopen ...
- 《NVM-Express-1_4-2019.06.10-Ratified》学习笔记(8.8)-- Reservations
8.8 Reservations 预订 NVMe的reservation预订功能,用于让两个或多个主机能够协调配合的访问共享namespace.使用这些功能的协议和方式超出了本规格说明书的范围.对这些 ...
- 获取 Android APP 版本信息工具类(转载)
获取 Android APP 版本信息工具类 获取手机APP版本信息工具类 1.获取版本名称 2.获取版本号 3.获取App的名称 package com.mingyue.nanshuibeidiao ...
- SSM项目中的.tld文件是什么,有什么作用?怎么自定义tld文件
原文链接:https://www.cnblogs.com/guaishoubiubiu/p/8721277.html TLD术语解释:标签库描述文件,如要在JSP页面中使用自定义JSP标签,必须首先定 ...
- kuangbin专题 专题九 连通图 HDU 4738 Caocao's Bridges
题目链接:https://vjudge.net/problem/HDU-4738 题目:tarjan求桥,坑点: 题目说是分岛任务...如果所有岛之间没有完全连通,就不需要执行任务了...答案直接是0 ...
- LVS-DR模式搭建
出于对架构的兴趣,一有时间我就会了解一下如何搭建一个高并发,高可用,可扩展的服务器运行环境.LVS-DR究竟现在的企业运用频率有多高其实我也不清楚,本文是下班之余断断续续研究搭建笔录,并且仅仅在vir ...
- AcWing 9. 分组背包问题
#include <iostream> #include <algorithm> using namespace std; ; int n, m; int v[N][N], w ...
- [前端] html限制input输入数字和小数
限制input只能输入数字和小数 html代码 <input type="text" style="width:50px" name="widt ...
- Strange Bank(找零问题)
题目描述 为了使取钱变得困难,某家银行在一次操作中只允许其客户提取下列金额之一: 1日元(日本的货币) 6日元,62(=36)日元,63(=216)日元,… 9日元,92(=81)日元,93(=729 ...