您的位置：首页 > 产品设计 > UI/UE

layui搭建框架及测试

2017-12-26 21:28 232 查看
学习网址：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
                                                前端
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航