layui框架使用方法详解

轩逸飞梦

于 2019-01-07 15:15:10 发布

阅读量2.3w

点赞数 21

分类专栏： layui 文章标签： layui html 框架详解前端

本文链接：https://blog.csdn.net/qq_19898283/article/details/86000942

版权

layui 专栏收录该内容

1 篇文章

订阅专栏

前言

首先我们先了解一下什么是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字符串的形式显示出来。