layui框架使用方法详解

前言

首先我们先了解一下什么是layui。

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。

layui框架结构

  ├─css //css目录│  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）│  │  ├─laydate│  │  ├─layer│  │  └─layim│  └─layui.css //核心样式文件├─font  //字体图标目录├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）│─lay //模块核心目录│  └─modules //各模块组件│─layui.js //基础核心库└─layui.all.js //包含layui.js和所有模块的合并文件

快速上手

首先，我们先获得（下载） layui 的最新版，链接地址：https://res.layui.com/static/download/layui/layui-v2.4.5.zip

然后解压部署到我们的静态资源目录下，

然后引入到我们的工程里面，在这里，只需要引入两个文件。

<link rel="stylesheet" type="text/css" href="${path}/public/layui/css/layui.css">
<script type="text/javascript" src="${path}/public/layui/layui.js"></script>

不需要管其他文件，只需要这两个就可以使用layui前端框架了。

基础入门

照葫芦画瓢


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>开始使用layui</title><link rel="stylesheet" href="layui/css/layui.css">
</head>
<body><!-- 你的HTML代码 --><script src="layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){var layer = layui.layer,form = layui.form;layer.msg('Hello World');
});
</script>
</body>
</html>

进阶学习：使用layui的内置form实现页面提交

这里，我们新建一个页面实例

部署基本布局

<!DOCTYPE html>
<html>
<head><title>layui-form使用</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="layui/css/layui.css">
</head><body><script type="text/javascript" src="layui/layui.js"></script><script type="text/javascript">//一般直接写在一个js文件中layui.use(['layer', 'form'], function(){var layer = layui.layer,form = layui.form;});</script>
</body>
</html>

html写法教程

在body下写入标签，

<form class="layui-form" action=""><div class="layui-form-item"><!-- 提示语 --><label class="layui-form-label">输入框</label><!-- 行级显示 --><div class="layui-input-block"><!-- 输入框 --><input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><!-- 行级显示 --><div class="layui-input-block"><!-- 提交按钮 --><button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button></div></div>
</form>

在这里，有许多小伙伴已经注意到了，我加了一些元素块。

class="layui-form" 一般写在父级标签，用来标识一个表单元素块，可以实现装饰表单并通过内置的 form模块 来完成各种交互。

lay-verify="required" 一般用于input标签，它的作用是必填。当你标记了这个，然后直接点击提交按钮，就会出现提示

以弹框的方式弹出，省略了非空判断。

lay-submit 这个标记的作用是使用内置form的交互，没有了它，就不能正常提交了。

lay-filter="formDemo" 这个标记的作用是相当于给它起个名字。

js写法教程

<script type="text/javascript">//一般直接写在一个js文件中layui.use(['layer', 'form'], function(){var layer = layui.layer,form = layui.form;//监听提交form.on('submit(formDemo)', function(data){layer.msg(JSON.stringify(data.field));return false;});});
</script>

layui.use 是用来加载使用layui的内置模块用到form的话，就在里面加'form'

submit(formDemo) submit是提交，括号连得是你自定义的方法，前面有介绍到。

data.field 这个方法是用来获取你表单里面输入框的值

JSON.stringify(）是让data.field以json字符串的形式显示出来。

好处就是不需要写过多的页面装饰，只需要引入两个文件，然后使用class方法即可使用这款美丽的前端框架啦。

更多教程方法详情看官网：https://www.layui.com/doc/