Introduction aux différentes méthodes de référence de modularisation et de non-modularisation layui-Tutoriel Layui-php.cn

Introduction aux différentes méthodes de référence de modularisation et de non-modularisation layui

尚

Libérer： 2019-12-19 17:03:41

avant

2051 Les gens l'ont consulté

Introduction aux différentes méthodes de référence de modularisation et de non-modularisation layui

Les différentes méthodes de référence de layui modulaire et non modulaire :

1. La différence entre modulaire et non modulaire

Il existe de nombreux modules intégrés différents dans layui, tels que la couche contextuelle, le sélecteur de date et d'heure, la pagination et d'autres modules différents.

Modularisation : Chargez le module correspondant lors de son utilisation.

Non modulaire : chargez tous les modules en même temps.

2. Référence modulaire

Référence ../layui/layui.js

① Écrivez généralement une classe d'outils layui.util.js (Extensible ), référence directement

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

Copier après la connexion

② page jsp

<%@ 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>

Copier après la connexion

3. Référence non modulaire

référence .. /layui/layui.all.js.

Écrivez généralement une classe d'outils layui.util.js (extensible), référencez directement le calque, laydate....

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

Copier après la connexion

ou directement sur la page jsp Vous pouvez utiliser layui.layer et layui .laydate sur les pages jsp

Pour plus de connaissances sur Layui, veuillez faire attention à la colonne Tutoriel d'utilisation de Layui sur le site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!