layui模块化与非模块化的不同引用方式介绍-木庄网络博客

本文摘自PHP中文网，作者尚，侵删。

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>