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模块化与非模块化的不同引用方式介绍的详细内容，更多请关注24课堂在线网其它相关文章！
