一、介绍
在使用layui之前,我们先要了解一下layui是什么?
我觉得用作者贤心的一句话来概括就好了:为后端程序员设计的前端框架。
更加详细的描述是:这是一个封装了各种css和js、Ajax等等的前端框架,其封装程度之高,有时甚至对程序员来说不大友好。但对于前端技术一般的人来说,layui不失为一个好的工具。
二、开始使用layui
官网地址:layui
使用方式:下载后导入项目,然后引用即可
<script th:src="@{/jquery-3.3.1.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}" />
先要引用jquery,然后再引用layui.js和layui.css。
为什么一定要本地呢?没有CDN?
上面说了,layui封装得太“好”了,程序员的自主性受到限制,这个时候需要修改layui的源码,比如css的样式——这也是layui的正确用法,而不只是简单地使用。
layui的模块:layui是模块化的,包括form,layer,laydate,laypage等等模块,正是这些模块组成了完整的layui。使用layui的时候,需要指明自己使用的模块。
开始使用layui:
<script>
layui.use(['mod1', 'mod2'],function(args){
var mo1 = layui.mod1
,mo2 = layui.mod2;
});
</script>
##三、layui表单
下面以HTML中最常见的form表单来演示layui的使用。
html部分:
<fieldset class="layui-elem-field layui-field-title" style="margin-top:30px;">
<legend style="text-align:center;">注册新账户</legend>
</fieldset>
<form id="reform" class="layui-form layui-form-pane" th:action="@{/user/register.html}" method="POST">
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" name="email" lay-verify="email" placeholder="请输入" autocomplete="off" class="layui-input" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" />
</div>
</div>
<div class="layui-form-item">
<label