目录
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.引入<link rel="stylesheet" href="../layui/css/layui.css">和<script src="../layui/layui.js"></script>
可能需要添加绝对路径
因为这两串代码经常用到,所以我将他们统一存放在了head.jsp文件里,再通过<%@include file="/commen/head.jsp"%>引入
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="/commen/head.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/config.js"></script>
<title>引入layui</title>
-- 使用layui
<script>
//一般直接写在一个js文件中
layui.use([ 'jquery' ,'test1'], function() {
let $ = layui.jquery;
let t=layui.test1;
$("#mi").click(function() {
t.hello();
})
});
</script>
</head>
<body>
<input type="text" id="test" />
<button id="mi">hello</button>
</body>
</html>
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模块
具体见第一块代码
<script>
//一般直接写在一个js文件中
layui.use([ 'jquery' ,'test1'], function() {
let $ = layui.jquery;
let t=layui.test1;
$("#mi").click(function() {
t.hello();
})
});
</script>
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 吧!但愿她能成为你长远的开发伴侣,化作你方寸屏幕前的亿万字节!
——亲,养成好习惯,点个不要钱的赞吧!