layui模塊化和非模塊化的區(qū)別

發(fā)布時(shí)間：2020-06-16 11:01:54 來源：億速云閱讀：146 作者：Leah 欄目：web開發(fā)

本篇文章為大家探討layui模塊化和非模塊化的區(qū)別，以及layui模塊化與非模塊化的不同引用方式，文章內(nèi)容質(zhì)量較高，有需要的朋友可以學(xué)習(xí)和借鑒。

1、模塊化與非模塊化的區(qū)別

layui中有許多不同的內(nèi)置模塊，如彈出層、日期與時(shí)間選擇器、分頁等不同模塊。

模塊化：使用時(shí)加載相應(yīng)的模塊。

非模塊化：一次性加載所有的模塊。

2、模塊化的引用

引用 ../layui/layui.js

① 通常編寫一個(gè)工具類 layui.util.js（可擴(kuò)展），在jsp頁面中直接引用

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

② 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: ['確定', '重置', '關(guān)閉'], //可以無限個(gè)按鈕,
			　　　　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、非模塊化的引用

引用 ../layui/layui.all.js

通常編寫一個(gè)工具類 layui.util.js（可擴(kuò)展）,在jsp頁面直接引用 layer,laydate....

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

或者直接在jsp頁面使用layui.layer、layui.laydate 均可

看完上述內(nèi)容，你們對(duì)layui模塊化和非模塊化的區(qū)別大概了解了嗎？如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

layui模塊化和非模塊化的區(qū)別

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽