初识Layui——Layui的使用

释：

已于 2023-08-11 14:02:07 修改

阅读量155

点赞数 4

分类专栏： layui 文章标签： layui 前端 javascript eclipse tomcat

于 2023-08-08 10:29:42 首次发布

本文链接：https://blog.csdn.net/weixin_73817220/article/details/132159668

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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);
});