初识Layui——Layui的使用

目录

1. 获取layui

2. 开始使用

3. 定义layui模块

4. 使用layui模块

5. 建立入口文件

---

1. 获取layui

1. 去官网首页下载（layui已停止维护）

2. 互联网搜索

目录结构如下：

├─css //css目录

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

│ │ ├─laydate

│ │ ├─layer

│ │ └─layim

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

├─font //字体图标目录

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

│─lay //模块核心目录

│ └─modules //各模块组件

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

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

2. 开始使用

1.将文件部署到项目

2.引入和

可能需要添加绝对路径

因为这两串代码经常用到，所以我将他们统一存放在了head.jsp文件里，再通过<%@include file="/commen/head.jsp"%>引入

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/commen/head.jsp"%>






-- 使用layui



	
	hello

3. 定义layui模块

layui.define(function(exports){
  var obj = {
    //模块1
    hello: function(str){
      alert('Hello '+ (str||'test1'));
    },
    //模块2
    hello1: function(str){
      alert('Hello1 '+ (str||'test1'));
    }
  };
  
  //输出test接口--test1需要与本文件名一致
  exports('test1', obj);
}); 

4. 使用layui模块

具体见第一块代码

5. 建立入口文件

建立一个入口文件，并通过 layui.use() 方式来加载该入口文件

layui.config({
  base: 'js/model/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
  test: 'test' //如果 mymod.js 是在根目录，也可以不用设定别名
});

上述的 test即为你js/model目录下的 test.js，它的内容应该如下：

layui.define(function(exports){
  var obj = {
    hello: function(str){
      alert('Hello '+ (str||'test1'));
    },
  hello1: function(str){
      alert('Hello1 '+ (str||'test1'));
    }
  };
  
  //输出test接口 ---注意，这里是模块输出的核心，模块名必须和use时的模块名一致
  exports('test1', obj);
});  

也许通过上面的阅读，你已经大致了解如何使用 layui 了，但真正用于项目远不止如此，你需要继续阅读后面的文档，尤其是【基础说明】那么，从现在开始，尽情地拥抱 layui 吧！但愿她能成为你长远的开发伴侣，化作你方寸屏幕前的亿万字节！

                                                                             ——亲，养成好习惯，点个不要钱的赞吧！