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页面
nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><meta><title>Insert title here</title><script></script><script></script><script></script><script> $(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><input><input>
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使用教程栏目。