这篇博客介绍了layui的基础学习，包括layui的简介、引入方式，特别是模块化与非模块化的使用。文章详细讲解了CSS内置基础类，如布局、辅助、文本等，并通过实例展示了选项卡、按钮、form表单、导航栏、日期、表单和菜单的使用方法。对于每个组件，作者提供了代码示例和截图，帮助读者快速理解和应用。
layui 部分学习参考
本文是对官方文档的部分归纳整理，仅供参考
1.简介
layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。
其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。
layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
2.引入
layui分为两种包（模块化、非模块化）
非模块化引的是 layui.all.js ,里面包含的所有组件
模块化引的是 layui.js ，引入你所需要的
在实际开发时，如果你一上来就引了个全包会加大与服务器HTTP时的通信压力，所以我推荐大家使用 layui 时使用模块化的方式去实现 layui 的功能，按模块去熟悉 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>
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
});
</script>
</body>
</html>
3.CSS内置基础类
布局 / 容器
| 类名（class） | 说明 |
|---|---|
| layui-main | 用于设置一个宽度为 1140px 的水平居中块（无响应式） |
| layui-inline | 用于将标签设为内联块状元素 |
| layui-box | 用于排除一些UI框架（如Bootstrap）强制将全部元素设为box-sizing: border-box所引发的尺寸偏差 |
| layui-clear | 用于消除浮动（一般不怎么常用，因为layui几乎没用到浮动） |
| layui-btn-container | 用于定义按钮的父容器。（layui 2.2.5 新增） |
| layui-btn-fluid | 用于定义流体按钮。即宽度最大化适应。（layui 2.2.5 新增） |
辅助
| 类名（class） | 说明 |
|---|---|
| layui-icon | 用于图标 |
| layui-elip | 用于单行文本溢出省略 |
| layui-unselect | 用于屏蔽选中 |
| layui-disabled | 用于设置元素不可点击状态 |
| layui-circle | 用于设置元素为圆形 |
| layui-show | 用于显示块状元素 |
| layui-hide | 用于隐藏元素 |
文本
| 类名（class） | 说明 |
|---|---|
| layui-text | 定义一段文本区域（如文章），该区域内的特殊标签（如a、li、em等）将会进行相应处理 |
| layui-word-aux | 灰色标注性文字，左右会有间隔 |
背景色
| 类名（class） | 说明 |
|---|---|
| layui-bg-red | 用于设置元素赤色背景 |
| layui-bg-orange | 用于设置元素橙色背景 |
| layui-bg-green | 用于设置元素墨绿色背景（主色调） |
| layui-bg-cyan | 用于设置元素藏青色背景 |
| layui-bg-blue | 用于设置元素蓝色背景 |
| layui-bg-black | 用于设置元素经典黑色背景 |
| layui-bg-gray | 用于设置元素经典灰色背景 |
字体大小和颜色
layui-font-12 （12px 的字体）
layui-font-14 （14px 的字体）
layui-font-16 （16px 的字体）
layui-font-18 （18px 的字体）
layui-font-20 （20px 的字体）
layui-font-red （红色字体）
layui-font-orange （橙色字体）
layui-font-green （绿色字体）
layui-font-cyan （青色字体）
layui-font-blue （蓝色字体）
layui-font-black （黑色字体）
layui-font-gray （灰色字体）
4.简单的使用（代码+截图）
（1）选项卡
table
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">标题一</li>
<li class="layui-bg-blue">标题二</li>
<li>标题三</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">标题一对应的内容1</div>
<div class="layui-tab-item">标题二对应的内容2</div>
<div class="layui-tab-item">标题三对应的内容3</div>
</div>
</div>
Tab选项卡
<div class="layui-tab">
<ul class="layui-tab-title ">
<li class="layui-this layui-bg-blue">网站设置</li>
<li class=" layui-bg-blue">用户管理</li>
<li class=" layui-bg-blue">权限分配</li>
<li class=" layui-bg-blue">商品管理</li>
<li class=" layui-bg-blue">订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
另一种模式
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content"></div>
</div>
更多风格请访问：Layui官网之Tab选项卡
（2）按钮
按钮颜色、大小、样式请访问官网：按钮详情
<div class="layui-btn-container">
<button class="layui-btn layui-btn-normal" test-active="test-form">按钮</button>
<button class="layui-btn layui-btn-disabled">禁止使用</button>
</div>
<div class="layui-btn-container">
<button class="layui-btn layui-btn-normal" test-active="test-form">按钮</button>
</div>
（3）form表单
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">请输入：</label>
<div class="layui-input-inline">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">辅助文字</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码框：</label>
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">辅助文字</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择框：</label>
<div class="layui-input-inline">
<select name="offer" lay-verify="required">
<option value =""></option><!-- 占位置：显示请选择 -->
<option value="0" selected>JAVA（默认）</option>
<option value="1" disabled>C(禁用)</option>
<option value="2">Python</option>
<option value="3">C++</option>
</select>
</div>
<div class="layui-input-inline">
<select name="fenzu">
<option value="">请选择</option>
<optgroup label="语言喜好">
<option value="你工作的第一个城市">这是我最喜欢的语言</option>
<option value="你工作的第一个城市">这是我最讨厌的语言</option>
</optgroup>
<optgroup label="学习情况">
<option value="你的工号">我精通这门语言</option>
<option value="你最喜欢的老师">略懂</option>
</optgroup>
</select>
</div>
<div class="layui-input-inline"><!-- 带搜索框的选择 -->
<select name="city" lay-verify="" lay-search>
<option value ="">个人评级</option>
<option value="000">a</option>
<option value="001">b</option>
<option value="002">c</option>
<option value="003" >d</option>
<option value="004" >e</option>
<option value="005" >d--</option>
<option value="005" >b++</option>
<option value="005" >c++</option>
<option value="005" >a++</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选框：</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男" checked/>
<input type="radio" name="sex" value="女" title="女" />
<input type="radio" name="sex" value="" title="中性" disabled>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">爱好：</label>
<div class="layui-input-block">
<input type="checkbox" title="吃" />
<input type="checkbox" title="喝" />
<input type="checkbox" title="睡" checked>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-block">
<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<script>
//Demo
layui.use('form', function(){
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>
（4）导航栏
顶部导航
<ul class="layui-nav layui-bg-green" lay-filter="" >
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
<li class="layui-nav-item">
<a href="">控制台<span class="layui-badge">9</span></a>
</li>
<li class="layui-nav-item">
<a href="">个人中心<span class="layui-badge-dot"></span></a>
</li>
<li class="layui-nav-item">
<a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">修改信息</a></dd>
<dd><a href="javascript:;">安全管理</a></dd>
<dd><a href="javascript:;">退了</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默认展开</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">选项1</a></dd>
<dd><a href="javascript:;">选项2</a></dd>
<dd><a href="">跳转</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
</ul>
侧边导航栏
必须导入element
<script>
layui.use(['layer', 'form','element'], function(){
var layer = layui.layer
,form = layui.form
,element = layui.element;
});
</script>
水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：
垂直导航需要追加class：layui-nav-tree
侧边导航需要追加class：layui-nav-tree layui-nav-side
面包屑
<span class="layui-breadcrumb" lay-separator="-"><!-- 默认分隔符为/，可以自定义 -->
<a href="">计算机</a>
<a href="">编程语言</a>
<a href="">Java</a>
<a><cite>Spring</cite></a>
</span>
（5）日期
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layDate快速使用</title>
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
<input type="text" class="layui-input" id="test1">
</div>
<script src="./layui/layui.js"></script>
<script>
layui.use('laydate', function(){
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#test1' //指定元素
});
});
</script>
</body>
</html>
（6）表单
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>语言</th>
<th>学习时间</th>
<th>学习情况</th>
</tr>
</thead>
<tbody>
<tr>
<td>Java</td>
<td>2021-4-6</td>
<td>略懂</td>
</tr>
<tr>
<td>C</td>
<td>2021-4-6</td>
<td>略懂</td>
</tr>
<tr>
<td>C++</td>
<td>2021-4-6</td>
<td>略懂</td>
</tr>
</tbody>
</table>
（7）菜单
<div class="layui-panel">
<ul class="layui-menu" id="docDemoMenu1">
<li lay-options="{id: 100}">
<div class="layui-menu-body-title">menu item 1</div>
</li>
<li lay-options="{id: 101}">
<div class="layui-menu-body-title">
<a href="#">menu item 2 <span class="layui-badge-dot"></span></a>
</div>
</li>
<li class="layui-menu-item-divider"></li>
<li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
<div class="layui-menu-body-title">
menu item 3 group <i class="layui-icon layui-icon-up"></i>
</div>
<ul>
<li lay-options="{id: 1031}">menu item 3-1</li>
<li lay-options="{id: 1032}">
<div class="layui-menu-body-title">menu item 3-2</div>
</li>
</ul>
</li>
<li class="layui-menu-item-divider"></li>
<li lay-options="{id: 104}">
<div class="layui-menu-body-title">menu item 4</div>
</li>
<li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
<div class="layui-menu-body-title">
menu item 5
<i class="layui-icon layui-icon-right"></i>
</div>
<div class="layui-panel layui-menu-body-panel">
<ul>
<li lay-options="{id: 1051}">
<div class="layui-menu-body-title">menu item 5-1</div>
</li>
<li lay-options="{id: 1051}">
<div class="layui-menu-body-title">menu item 5-2</div>
</li>
</ul>
</div>
</li>
<li lay-options="{id: 106}">
<div class="layui-menu-body-title">menu item 6</div>
</li>
</ul>
</div>
可以看到，它实则是一个 ul li 的层级嵌套，当需要出现「菜单组」和「子级菜单」时，只需要添加相对应的 class 类名即可。
菜单类型
| 类型 | html | 说明 |
|---|---|---|
| 常规菜单项 | < li>< /li > | 无需添加特定 class |
| 可收缩菜单组 | < li class=“layui-menu-item-group layui-menu-item-down” lay-options="{type: ‘group’}">< /li> | 其中layui-menu-item-down为初始展开；layui-menu-item-up为初始收缩。 |
| 横向父子菜单 | < li class=“layui-menu-item-parent” lay-options="{type: ‘parent’}">< /li> | 其子级菜单的结构参照上文的「菜单结构」，主要是需包含一层面板元素。 |
| 分割线 | < li class=“layui-menu-item-divider”>< /li> | 一条横线，用于更好地划分菜单区域 |
其子级菜单遵循的列表类型也是一样的。需要注意的是，「可收缩菜单组」的子菜单仅需要再嵌套一层 ul 即可；而「横向父子菜单」还需要套一层 div class=“layui-panel layui-menu-body-panel”，以便让子菜单层次更加分明。
菜单项函数
lay-options="{}"这个属性就是我们所说的菜单项参数。当点击菜单列表时，回调中将会返回该属性所配置的全部参数，其中type参数是组件内部约定的，其它参数可以随意命名。
<li lay-options="{
id: 100
,title: 'menu item 1'
,type: '' //支持的类型有：group、parent，具体用法参见上文
,aaa: '任意参数'
}">内容</li>
事件触发
<div class="layui-panel">
<ul class="layui-menu" id="docDemoMenu1">
<li lay-options="{id: 100}">
<div class="layui-menu-body-title">menu item 1</div>
</li>
</ul>
</div>
layui.use('dropdown', function(){
var dropdown = layui.dropdown;
//菜单点击事件，其中 docDemoMenu1 对应的是菜单结构上的 id 指
dropdown.on('click(docDemoMenu1)', function(options){
var othis = $(this); //当前菜单列表的 DOM 对象
console.log(options); //菜单列表的 lay-options 中的参数
});
});
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
