Heim > Web-Frontend > Layui-Tutorial > Einführung in verschiedene Referenzmethoden der Laui-Modularisierung und Nicht-Modularisierung

Einführung in verschiedene Referenzmethoden der Laui-Modularisierung und Nicht-Modularisierung

Freigeben: 2019-12-19 17:03:41
nach vorne
2070 Leute haben es durchsucht

Einführung in verschiedene Referenzmethoden der Laui-Modularisierung und Nicht-Modularisierung

Die verschiedenen Referenzmethoden von Laui modular und nicht modular:

1. Der Unterschied zwischen modular und nicht modular

Es gibt viele verschiedene integrierte Module in Laui, wie z. B. Popup-Ebene, Datums- und Zeitauswahl, Paging und andere verschiedene Module.

Modularisierung: Laden Sie das entsprechende Modul, wenn Sie es verwenden.

Nicht modular: Alle Module auf einmal laden.

2. Modulare Referenz

Referenz ../layui/layui.js

① Schreiben Sie normalerweise eine Tool-Klasselayui.util.js (Erweiterbar ), direkte Referenz

var layer;var laydate;
layui.use(['layer','laydate'], function() {
    layer = layui.layer;
    laydate = layui.laydate;
});
Nach dem Login kopieren

② JSP-Seite

<%@ 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>
Nach dem Login kopieren

3. Nicht-modulare Referenz

Referenz .. /layui/layui.all.js

Normalerweise schreiben Sie eine Werkzeugklasse namens „layui.util.js“ (erweiterbar) und verweisen direkt auf Layer, „Laydate“...

var layer = layui.layer;
var laydate = layui.laydate;
Nach dem Login kopieren

oder direkt auf der JSP-Seite. Sie können „layui.layer“ und „layui“ verwenden .laydate auf JSP-Seiten

Weitere Informationen zu Laui finden Sie in der Spalte Tutorial zur Verwendung von Laui auf der chinesischen PHP-Website.

Das obige ist der detaillierte Inhalt vonEinführung in verschiedene Referenzmethoden der Laui-Modularisierung und Nicht-Modularisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage