Introduction to different reference methods of layui modularization and non-modularization-Layui Tutorial-php.cn

Introduction to different reference methods of layui modularization and non-modularization

尚

Release： 2019-12-19 17:03:41

forward

2046 people have browsed it

Introduction to different reference methods of layui modularization and non-modularization

The different reference methods of layui modular and non-modular:

1. The difference between modular and non-modular

There are many different built-in modules in layui, such as pop-up layers, date and time pickers, paging and other different modules.

Modularization: Load the corresponding module when using it.

Non-modular: Load all modules at once.

2. Modular reference

Reference ../layui/layui.js

① Usually write a tool class layui.util.js (Extensible), directly reference

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

Copy after login

in the jsp page ② jsp page

<%@ 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: &#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>
</head>
<body>
	　　<input type="button" onclick="openLayui()" id="inputId" value="弹框" />
	　　<input type="text" id="test"/>
</body>
</html>

Copy after login

3, non-modular reference

Reference .. /layui/layui.all.js

Usually write a tool class layui.util.js (extensible), directly reference layer, laydate....

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

Copy after login

or directly on the jsp page You can use layui.layer and layui.laydate on jsp pages.

For more layui knowledge, please pay attention to the layui usage tutorial column on the PHP Chinese website.

The above is the detailed content of Introduction to different reference methods of layui modularization and non-modularization. For more information, please follow other related articles on the PHP Chinese website!