layui搭建框架及测试

学习网址：http://www.layui.com/doc/
下载地址：官网首页：http://www.layui.com/
目录分析：

├─css //css目录

02. │ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）

03. │ │ ├─laydate

04. │ │ ├─layer

05. │ │ └─layim

06. │ └─layui.css //核心样式文件

07. ├─font //字体图标目录

08. ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）

09. │─lay //模块核心目录

10. │ └─modules //各模块组件

11. │─layui.js //基础核心库

12. └─layui.all.js //包含layui.js和所有模块的合并文件

将下载好的文件夹内的layui文件夹和jquery.min.js放到一个文件夹下，并拖到文件夹static中

<%@include file="/common/common.jsp" %>
<link rel="stylesheet" type="text/css" href="${ctp }/static/layui/css/layui.css"> 
<script type="text/javascript" src="${ctp }/static/layui/layui.js"></script>
<script type="text/javascript" src="${ctp}/static/easy_ui/jquery.easyui.min.js"></script>

搭建环境;而common.jsp文件中存放了项目名：

<% String ctp = request.getContextPath();

request.setAttribute("ctp", ctp);%>

简单试用一下：

模块化的用法：

我们推荐你遵循 layui 的模块规范建立一个入口文件，并通过 layui.use() 方式来加载该入口文件，如下所示：

<body>
   我的简单的lay_ui测试
   <scriptsrc="${ctp}/static/layui/layui.js"></script>
   <script>
   layui.config({
     base:'${ctp}/common/' //你存放新模块的目录，即index.js的文件目录，注意，不是layui的模块目录
   }).use('index');//加载入口
   </script> 
</body>

结果会出现一个黑底白字：Hello world

在common路径下有文件index.js文件：

/**
 项目JS主入口
 以依赖layui的layer和form模块为例
**/   
layui.define(['layer','form'],function(exports){//注意，这里的['layer','form']是指依赖的模块
 var layer = layui.layer
 ,form= layui.form;
 
 layer.msg('Hello World');
 
 exports('index',{});//注意，这里是模块输出的核心，模块名必须和use时的模块名一致
});

layui搭建框架及测试

猜你喜欢