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

互联网 19-12-19

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 均可

更多layui知识请关注PHP中文网layui使用教程栏目。

以上就是layui模块化与非模块化的不同引用方式介绍的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： layui

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

相关资讯

标签推荐