layui
页面元素
一. 导航
- 先引入layui.css和layui.js
<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
<script type="text/javascript" src="layui-v2.6.8/layui/layui.js" ></script>
- 加载 element模块
<script type="text/javascript">
//导航，依赖element模块
layui.use('element',function(){
var element = layui.element;
});
</script>
<!--
导航
水平导航：layui-nav
layui-nav-item 表示的是导航的子项
layui-this 表示当前被选中的项
layui-nav-child 表示的是二级菜单
垂直导航：layui-nav layui-nav-tree
侧边导航：layui-nav layui-nav-tree layui-nav-side
导航的主题颜色
layui-bg-颜色
墨绿 molv
藏青cyan
艳蓝blue
面包屑导航
<span class="layui-breadcrumb" lay-separator="|">
通过lay-separator="分隔符"设置面包屑导航的分隔符
-->
1.水平导航
- layui-this指向当前页面分类
<!--水平导航 layui-nav-->
<ul class="layui-nav">
<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="">大数据</a></li>
<li class="layui-nav-item">
<a href="">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模块</a></dd>
<dd><a href="">电商模块</a></dd>
</dl>
</li>
</ul>
结果展示：
2.垂直导航
<!--垂直导航 layui-nav layui-nav-tree-->
<ul class="layui-nav layui-nav-tree">
<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="">大数据</a></li>
<li class="layui-nav-item">
<a href="">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模块</a></dd>
<dd><a href="">电商模块</a></dd>
</dl>
</li>
</ul>
3.侧面导航
<!--侧边导航 layui-nav layui-nav-tree layui-nav-side -->
<ul class="layui-nav layui-nav-tree layui-nav-side">
<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="">大数据</a></li>
<li class="layui-nav-item">
<a href="">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模块</a></dd>
<dd><a href="">电商模块</a></dd>
</dl>
</li>
</ul>
4.设置导航的主题颜色
<!--设置导航的主题颜色 <ul class="layui-nav layui-nav-tree layui-nav-side layui-bg-cyan">-->
<ul class="layui-nav layui-nav-tree layui-nav-side layui-bg-cyan">
<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="">大数据</a></li>
<li class="layui-nav-item">
<a href="">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模块</a></dd>
<dd><a href="">电商模块</a></dd>
</dl>
</li>
</ul>
结果展示：
5.面包屑导航
<cite></cite>选中状态
<!--面包屑导航-->
<span class="layui-breadcrumb">
<a href="">首页 </a>
<a href="">国际新闻 <span class="layui-badge">99</span></a>
<a href="">亚太地区</a>
<a><cite>正文<span class="layui-badge-dot"></span></cite></a>
</span>
结果展示：
- 用指定分隔符来分隔
<!--设置属性 lay-separator="-"/lay-separator="|" 来自定义分隔符-->
<spanclass="layui-breadcrumb" lay-separator="|">
<a href="">首页 </a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
结果展示：
徽章详细请查看官方文档：https://www.layui.com/doc/element/badge.html
导航详细请查看官方文档：https://www.layui.com/doc/element/nav.html
二.选项卡
1.实现步骤
1.1引入资源(layui.css和layui.js)
<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
<script type="text/javascript" src="layui-v2.6.8/layui/layui.js" ></script>
1.2依赖加载模块
<script type="text/javascript">
//选项卡也是依赖element模块
layui.use('element',function(){
var element = layui.element;
});
</script>
1.3加载HTML
<div class="layui-tab">
<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 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>
结果展示：
2.选项卡风格
- 默认风格：layui-tab
- 简约风格需要追加class：layui-tab-brief
- 卡片风格需要追加class：layui-tab-card
2.1简约风格
<div class="layui-tab layui-tab-brief">
<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 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>
结果展示：
2.2卡片风格
<div class="layui-tab layui-tab-card">
<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 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>
结果展示：
2.3带删除的选项卡
<!--带删除的选项卡-->
<!--对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除-->
<div class="layui-tab layui-tab-card" lay-allowClose="true">
<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 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>
结果展示：
选项卡详细请查看官方文档：https://www.layui.com/doc/element/tab.html
三.表格
- 引入layui.css
<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
<!--
表格
class="layui-table"
常用属性
lay-even 如果设置了该属性，则可以显示隔行换色的效果
lay-skin="属性值" 设置表格边框风格
line （行边框风格）
row （列边框风格）
nob （无边框风格）
lay-size="属性值" 设置表格的尺寸
sm （小尺寸）
lg （大尺寸）
-->
- eg1：
<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>lucky</td>
<td>2021-8-15</td>
<td>人生就像是一场修行</td>
</tr>
<tr>
<td>lover</td>
<td>2020-1-28</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
</tbody>
</table>
结果展示：
- eg2：
<table class="layui-table" lay-even lay-skin="line" lay-size="lg">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>昵称</th>
<th>加入时间</th>
<th>签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>白娘子</td>
<td>2021-11-29</td>
<td>人生就像是一场修行</td>
</tr>
<tr>
<td>许仙</td>
<td>2021-11-28</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
<tr>
<td>小青</td>
<td>2021-5-7</td>
<td>人生就像是一场修行</td>
</tr>
<tr>
<td>许闲心</td>
<td>2021-1-28</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
</tbody>
</table>
结果展示：
表格详细请查看官方文档：https://www.layui.com/doc/element/table.html
四.表单
1.实现步骤
1.1引入资源(layui.css和layui.js)
<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
<script type="text/javascript" src="layui-v2.6.8/layui/layui.js" ></script>
1.2依赖加载模块
<!--加载模块-->
<script type="text/javascript">
//加载form表单
layui.use('form',function(){
var from = layui.form;
});
</script>
1.3加载HTML
- 在一个容器中设定 class=“layui-form” 来标识一个表单元素块
- 基本的行区块结构，它提供了响应式的支持。但必须要在外层容器中定义class=“layui-form”，form模块才能正常工作。
2.输入框
- required：注册浏览器所规定的必填字段
- lay-verify：注册form模块需要验证的类型
- class=“layui-input”：layui.css提供的通用CSS类
<!--
表单
常用属性：
required 浏览器固定的必填字段
lay-verify 需要验证的类型(required表示必填项)
class="layui-input" 提供通用的样式
class="layui-input-block" 占据全部宽度
class="layui-input-inline" 占据部分宽度
文本框
placeholder 当文本框为空时，默认显示的文本信息
autocomplete 表单元素是否自动填充(当浏览器中缓存中存在相同的name属性的值时，会填充)
-->
<!--在一个容器中设定 class="layui-form" 来标识一个表单元素块-->
<form action="" class="layui-form">
<!--基本的行区块结构，它提供了响应式的支持。但必须要在外层容器中定义class="layui-form"，form模块才能正常工作。-->
<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-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>
</div>
</form>
结果展示：
3.下拉选择框
- 通过selected属性设置默认选中项selected="selected"相当于selected
- 通过disabled属性开启禁用,可以设置select和option标签(禁用下拉框和禁用下拉选项)
- 可以通过optgroup标签给select分组
- 通过设置lay-search属性开启搜索匹配功能
<select name="city" lay-verify="required" disabled="disabled">
<option value="">请选择一个城市</option>
<option value="010">北京</option>
<option value="020">上海</option>
<option value="030" selected="selected">广州</option>
<option value="040" disabled="disabled">陕西</option>
</select>
<!--分组-->
<select name="quiz">
<option value="">请选择</option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市？</option>
</optgroup>
<optgroup label="学生时代">
<option value="你的工号">你的工号？</option>
<option value="你最喜欢的老师">你最喜欢的老师？</option>
</optgroup>
</select>
<!--开启搜索匹配-->
<select name="city" lay-verify="" lay-search>
<option value="">请选择</option>
<option value="010">layer</option>
<option value="020">form</option>
<option value="030">layim</option>
</select>
4.复选框
- 通过title属性设置自定义文本(如果不需要显示文本，则不设置title属性)
- 通过checked属性设置被选中的项
- 通过lay-skin属性设置复选框的样式效果(lay-skin="primary"表示原始效果)
- 通过disabled属性禁用属性
<!--复选框-->
<div class="layui-form-item">
<label class="layui-form-label">爱好</label>
<div class="layui-input-block">
<!--复选框-->
<!--默认效果-->
<input type="checkbox" name="hobby" title="唱歌" checked="checked" value="sing" />
<input type="checkbox" name="hobby" title="跳舞" value="dance" />
<input type="checkbox" name="hobby" title="画画" disabled="disabled" />
<!--原始效果-->
<input type="checkbox" name="hobby" title="唱歌" lay-skin="primary" value="sing" />
<input type="checkbox" name="hobby" title="跳舞" lay-skin="primary" value="dance" />
<input type="checkbox" name="hobby" title="画画" lay-skin="primary" disabled="disabled" />
</div>
</div>
结果展示：
5.开关
- 将复选框，设置lay-skin="switch"形成开关风格
- 通过lay-text=“打开的值|关闭的值"来设定开关的两种状态的文本，通过”|"分隔
- 通过checked设置默认打开状态
- 通过disabled属性禁用开关
- 通过value属性设置选中的值
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="aa" lay-skin="switch" />
<input type="checkbox" name="bb" lay-skin="switch" checked="checked"/>
<input type="checkbox" name="cc" lay-skin="switch" checked="checked" lay-text="on|off"/>
<input type="checkbox" name="dd" lay-skin="switch" checked="checked" lay-text="打开|关闭" value="打开"/>
<input type="checkbox" name="ee" lay-skin="switch" checked="checked" lay-text="打开|关闭" disabled="disabled"/>
</div>
</div>
结果展示：
6.单选框
- 属性title可自定义文本
- 通过checked设置默认打开状态
- 通过disabled属性禁用开关
- 通过value属性设置选中的值，否则选中时返回的就是默认的on
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="nan" title="男"/>
<input type="radio" name="sex" value="nv" title="女" checked="checked"/>
<input type="radio" name="sex" value="" title="中性" disabled="disabled"/>
</div>
</div>
结果展示：
7.文本域
- class=“layui-textarea”：layui.css提供的通用CSS类
<div class="layui-form-item">
<label class="layui-form-label">简介</label>
<div class="layui-input-inline">
<!--文本域-->
<textarea name="remark" required="required" lay-verify="required" placeholder="请输入个人简介"
class="layui-textarea"></textarea>
</div>
</div>
结果展示：
8.组装行内表单
- class="layui-inline"定义外层行内
- class=“layui-input-inline” 定义内层行内
<div class="layui-form-item">
<!--定义外层行内-->
<div class="layui-inline">
<label class="layui-form-label">范围</label>
<div class="layui-input-inline">
<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input"/>
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline">
<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input"/>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input type="password" name="upwd" placeholder="请输入密码" autocomplete="off" class="layui-input"/>
</div>
</div>
</div>
结果展示：
9.忽略美化渲染
<div class="layui-form-item">
<label class="layui-form-label">原始效果</label>
<div class="layui-input-inline">
<!--可以对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格-->
<input type="radio" name="sex" value="nan" title="男" lay-ignore>
</div>
</div>
结果展示：
10.表格方框风格
- 通过追加 layui-form-pane 的class，来设定表单的方框风格
<form class="layui-form layui-form-pane" action="">
<!--内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭），如：-->
<div class="layui-form-item" pane>
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
</div>
</div>
</form>
结果展示：
表单详细请查看官方文档：https://www.layui.com/doc/element/form.html
1775
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
