本篇文章为大家探讨layui模块化和非模块化的区别,以及layui模块化与非模块化的不同引用方式,文章内容质量较高,有需要的朋友可以学习和借鉴。
1、模块化与非模块化的区别
layui中有许多不同的内置模块,如弹出层、日期与时间选择器、分页等不同模块。
模块化:使用时加载相应的模块。
非模块化:一次性加载所有的模块。
2、模块化的引用
引用 ../layui/layui.js
① 通常编写一个工具类 layui.util.js(可扩展),在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: ['确定', '重置', '关闭'], //可以无限个按钮, 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
通常编写一个工具类 layui.util.js(可扩展),在jsp页面直接引用 layer,laydate....
var layer = layui.layer; var laydate = layui.laydate;
或者直接在jsp页面使用layui.layer、layui.laydate 均可
看完上述内容,你们对layui模块化和非模块化的区别大概了解了吗?如果想了解更多相关文章内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。