[size=13.3333px]├─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文件中存放了项目名：
request.setAttribute("ctp", ctp);%>
模块化的用法：
我们推荐你遵循 layui 的模块规范建立一个入口文件，并通过 layui.use() 方式来加载该入口文件，如下所示：
- <code class="language-html"><body>
- 我的简单的lay_ui测试
- <scriptsrcscriptsrc="${ctp}/static/layui/layui.js"></script>
- <script>
- layui.config({
- base:'${ctp}/common/' //你存放新模块的目录，即index.js的文件目录，注意，不是layui的模块目录
- }).use('index');//加载入口
- </script>
- </body></code>
结果会出现一个黑底白字：Hello world
在common路径下有文件index.js文件：
- /**
- 项目JS主入口
- 以依赖layui的layer和form模块为例
- **/
layui.define(['layer','form'],function(exports){//注意，这里的['layer','form']是指依赖的模块- varlayer = layui.layer
,form= layui.form;
layer.msg('Hello World');
exports('index',{});//注意，这里是模块输出的核心，模块名必须和use时的模块名一致
});
更多免费技术资料可关注：annalin1203
