Maison >interface Web >Tutoriel Layui >Introduction aux différentes méthodes de référence de modularisation et de non-modularisation layui
Introduction aux différentes méthodes de référence de modularisation et de non-modularisation layui
- 尚avant
- 2019-12-19 17:03:412147parcourir
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(['layer','laydate'], function() {
layer = layui.layer;
laydate = layui.laydate;
});② 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: '#test' //指定元素
});
});
function openLayui() {
layer.msg('hello');
layer.open({
type : 1,
maxmin : true,
area: ['500px', '300px'],
content : $('#inputId'),
btn: ['确定', '重置', '关闭'], //可以无限个按钮,
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: '80px'
});
parent.$("#inputId").val("button");
return false;
},
btn3: function(index, layero){
alert(index);
return false;
}
});
var index = layer.getFrameIndex(window.name);
layer.title('傻逼', index);
}
</script>
</head>
<body>
<input type="button" onclick="openLayui()" id="inputId" value="弹框" />
<input type="text" id="test"/>
</body>
</html>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;
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!