- 学习网址: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文件中存放了项目名:
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时的模块名一致
});