PHP前端开发

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

百变鹏仔 1个月前 (11-16) #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"&gt;<meta><title>Insert title here</title><script></script><script></script><script></script><script>  	$(function(){	laydate.render({	    elem: &#39;#test&#39; //指定元素	 });  	});  	function openLayui() {	layer.msg(&#39;hello&#39;);	layer.open({		type : 1,		maxmin : true,		area: [&#39;500px&#39;, &#39;300px&#39;],		content : $(&#39;#inputId&#39;),		btn: [&#39;确定&#39;, &#39;重置&#39;, &#39;关闭&#39;], //可以无限个按钮,		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: &#39;80px&#39;			});			parent.$("#inputId").val("button");			return false;		},		btn3: function(index, layero){			alert(index);			return false; 			}	 });	var index = layer.getFrameIndex(window.name);	layer.title(&#39;傻逼&#39;, 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使用教程栏目。