Home > Article > Web Front-end > Introduction to different reference methods of layui modularization and non-modularization

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

尚forward: 2019-12-19 17:03:412032browse

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;
});

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>

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;

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!

php layui JS 选择器

Statement：

This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Introduction to the use of layui framework form formsNext article：Introduction to the use of layui framework form forms

See more

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

Related articles