详解layui模块化与非模块化的不同引用方式

layui模块化与非模块化的不同引用方式:

1、模块化与非模块化的区别

layui中有许多不同的内置模块,如弹出层、日期与时间选择器、分页等不同模块。

模块化:使用时加载相应的模块。

非模块化:一次性加载所有的模块。

2、模块化的引用

引用 ../layui/layui.js

① 通常编写一个工具类 layui.util.js(可扩展),在jsp页面中直接引用

var layer;var laydate;
layui.use(['layer','laydate'], function() {
    layer = layui.layer;
    laydate = layui.laydate;
});

② jsp页面

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/layui/layui.all.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/layui/layui_util.js"></script>

<script type="text/javascript">
	
  	$(function(){
		  laydate.render({
		        elem: '#test' //指定元素
		   });
  	});
  	
	function openLayui() {
		  layer.msg('hello');
		    layer.open({
			    type : 1,
			    maxmin : true,
			    area: ['500px', '300px'],
			    content : $('#inputId'),
			    btn: ['确定', '重置', '关闭'], //可以无限个按钮,
			    btn1: function(index, layero){
				      alert(parent.$("#inputId").val());
				      //layer.close(parent.layer.getFrameIndex(window.name));
				      layer.close(index);
			    },
			    btn2: function(index, layero){
				      layer.style(index, {
				          width: '80px'
				      });
				      parent.$("#inputId").val("button");
				      return false;
			    },
			    btn3: function(index, layero){
				      alert(index);
				      return false; 	
			    }
		   });
		  var index = layer.getFrameIndex(window.name);
		  layer.title('傻逼', index);
		
	}
</script>
</head>
<body>
	  <input type="button" onclick="openLayui()" id="inputId" value="弹框" />
	  <input type="text" id="test"/>
</body>
</html>

3、非模块化的引用

引用 ../layui/layui.all.js

通常编写一个工具类 layui.util.js(可扩展),在jsp页面直接引用 layer,laydate....

var layer = layui.layer;
var laydate = layui.laydate;

或者直接在jsp页面使用layui.layer、layui.laydate 均可

Image placeholder
前端答疑
未设置
  64人点赞

没有讨论,发表一下自己的看法吧

推荐文章
详解layui后台框架的搭建

layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到

详解layui.layer独立组件

layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。目前,laye

Kafka 集群在马蜂窝大数据平台的优化与应用扩展

马蜂窝技术原创文章,更多干货请订阅公众号:mfwtechKafka是当下热门的消息队列中间件,它可以实时地处理海量数据,具备高吞吐、低延时等特性及可靠的消息异步传递机制,可以很好地解决不同系统间数据的

jquery easyui和layui的区别是什么?

jqueryeasyuijQueryEasyUI是一组基于jQuery的UI插件集合体,而jQueryEasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复

InnoDB到底支不支持哈希索引,为啥不同的人说的不一样?

继续回答水友提问(最近问MySQL的多):沈老师,我在网上看到不同的资料,有的说InnoDB支持哈希索引,有的说不支持,到底哪个是正确的呢?对于InnoDB的哈希索引,确切的应该这么说:(1)Inno

对话OceanBase资深总监韩鸿源:数据库是技术能力,云是使用方式,两者不应是竞争关系

5月10日,在第十届中国数据库技术大会(DTCC2019)上,蚂蚁金服的金融级分布式关系数据库OceanBase2.0,在经过200名数据库领域三年以上的从业者投票和专业评委的评选下,高分荣获了“年度

【python测试开发栈】帮你总结python random模块高频使用方法

随机数据在平时写python脚本时会经常被用到,比如随机生成0和1来控制逻辑、或者从列表中随机选择一个元素(其实抽奖程序也类似,就是从公司所有人中随机选择中奖用户)等等。这篇文章,就帮大家整理在pyt

【python测试开发栈】帮你总结python time模块高频使用方法

在平时写python脚本时,时间是我们经常用到的数据,比如:时间戳、前端展示的对应格式的时间等,在python中主要有三个和时间处理相关的模块:time、datetime、calendar,这篇文章主

共享内存在不同系统的应用与优劣详解

共享内存是一种使计算机程序能够同时共享内存资源以实现更高性能和更少冗余数据副本的技术。共享系统内存可以在单处理器系统、并行多处理器或集群微处理器上运行。对于分布式系统会有一些差异,但共享内存也可以其上

Oracle数据库不同损坏级别的恢复详解

墨墨导读:在DBA的日常工作中不可避免存在着数据库的损坏,本文将主要介绍Oracle数据库遇到不同损坏级别下的应该采用的恢复方法,供读者在遇到此类情景时,能的找到适合自己的恢复方法,提高工作效率。数据

layui封装模块基础教程

layui是国人开发的一款非常简洁的UI框架,使用了模块化加载方式,因此在使用过程中我们难免需要添加自己的模块,本教程就教大家封装一个简单的模块。平常使用中,ajax可以说使用广泛,所以这里我们添加一

【THE LAST TIME】深入浅出 JavaScript 模块化

前言Thelasttime,Ihavelearned【THELASTTIME】一直是我想写的一个系列,旨在厚积薄发,重温前端。也是对自己的查缺补漏和技术分享。欢迎大家多多评论指点吐槽。系列文章均首发于

模块化编程-内置函数笔记

内置函数 内置函数就是在系统安装完python解释器时,由python解释器给提供好的函数 range()函数 如果你确实需要遍历一个数字序列,内置函数range()会派上用场。它生成算术级数

模块化编程-内置函数笔记

内置函数 内置函数就是在系统安装完python解释器时,由python解释器给提供好的函数 range()函数 如果你确实需要遍历一个数字序列,内置函数range()会派上用场。它生成算术级数

模块化编程-内置函数笔记

内置函数 内置函数就是在系统安装完python解释器时,由python解释器给提供好的函数 range()函数 如果你确实需要遍历一个数字序列,内置函数range()会派上用场。它生成算术级数

模块化编程-内置函数笔记

内置函数 内置函数就是在系统安装完python解释器时,由python解释器给提供好的函数 range()函数 如果你确实需要遍历一个数字序列,内置函数range()会派上用场。它生成算术级数

模块化编程-高阶函数笔记

递归函数 递归函数就是定义了一个函数,然后在函数内,自己调用了自己这个函数递归函数内必须要有结束,不然就会一只调用下去,直到调用的层数越来越多,栈溢出递归函数是一层一层的进入,再一层一层的返回 初

模块化编程-内置函数笔记

内置函数 内置函数就是在系统安装完python解释器时,由python解释器给提供好的函数 range()函数 如果你确实需要遍历一个数字序列,内置函数range()会派上用场。它生成算术级数

MySQL Batched Key Access (BKA)原理和设置使用方法举例

MySQL5.6版本开始增加了提高表join性能的算法:BatchedKeyAccess(BKA)的新特性。BKA算法原理:将外层循环的行/结果集存入joinbuffer,内存循环的每一行数据与整个b

static使用方法

(1)在非静态的成员方法中技能访问非静态的成员也能访问静态的成员;(静态成员被所有对象共享)(2)在静态的成员方法中只能访问静态的成员不能访问非静态的成员(调用静态方法时,可能还没有创建对象)(3)只

阿里提出针对多目标优化的全新算法框架,同时提升电商推荐场景 GMV 和 CTR

在推荐系统中,多目标优化一直是热门话题,阿里巴巴的XiaoLin、HongjieChen等人针对推荐中的多目标优化问题提出了一种基于帕累托效率的优化算法框架,并应用在电商推荐场景中,对GMV和CTR

工程师笔记:我对数据库系统云原生化的一些思考

作者|张敏(于期)阿里云智能高级技术专家划重点我眼中的云原生我认为的云原生关键能力我眼中的云原生化技术手段我对数据库云原生化的思考伴随着云原生技术越来越热门,阿里内部关于CloudNative、Ser

甲骨文将自动化的安全特性植入云中!

在一年一度的OpenWorld大会上,甲骨文公司重点介绍了自治Linux、合作伙伴生态,以及在云计算领域的新功能扩展,包括云的可访问性,更严格的安全选项,虚拟基础设施层面的改进,向系统注入更多的智能化

智能数据可视化的5个步骤

如今,许多企业正在利用模型、数据分析、数据可视化和仪表板等措施实现数据驱动。例如商业领袖注重提升客户体验,技术领导者注重分析速度和网站指标,应用程序团队在其应用程序中嵌入分析程序等等。这意味着更多的开

技术苍穹与平台沃土:华为构筑产业数字化的太极之道

产业数字化正在今天经历快速变化。自华为企业BG发布数字平台之后的7个月里,产业智能已经达成了广泛的行业共识、驱动传统经济向数字经济快速过渡被提升为国家战略,大量技术、人才、资金涌入产业数字化浪潮当中。