【LayUI】之动态树&动态选项卡Tab&iframe使用
amp 使用 动态 iframe tab layui 选项卡
2023-06-13 09:13:10 时间
目录
1.左侧导航
导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边,是整个网页画龙点晴般的存在。 面包屑结构简单,支持自定义分隔符。
参考地址:http://layui.org.cn/doc/element/nav.html
2.导入数据表及无限级分类
1) 数据导入请参考资料中的db.sql 2) 无限级分类:父亲找儿子的过程,将对应的儿子放在父亲下面,形成树结构。(递归算法)
3.实现左侧菜单后台代码
4.前端左侧菜单绑定
附录一:
<iframe frameborder="0" src="' + url+ '" scrolling="auto" style="width:100%;height:100%"></iframe>
附录二:判断选项卡是否已经打开
$(".layui-tab-title li[lay-id='" + name + "']").length > 0
1.什么是Tab选项卡
Tab广泛应用于Web页面,因此我们也对其进行了良好的支持(简约风格、卡片风格、响应式Tab以及带删除的Tab等等)。Layui内置多种Tab风格,支持删除选项卡、并提供响应式支持。
2.Tab分类
参考地址:http://layui.org.cn/doc/element/tab.html
2.1 Tab简约风格
<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>
2.2 Tab卡片风格
<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" style="height: 100px;">
<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 class="layui-tab-item">6</div>
</div>
</div>
2.3 响应式Tab
当容器的宽度不足以显示全部的选项时,即会自动出现展开图标。
2.4 带删除的Tab
与默认相比没有什么特别的结构,就是多了个属性 lay-allowClose="true"
<div class="layui-tab" 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 class="layui-tab-item">6</div>
</div>
</div>
2.5 动态Tab
1)根据模块名称判断是否已经存在tab选项卡
$(".layui-tab-title li[lay-id='" + name + "']").length > 0
2)切换到指定选项卡
element.tabChange('tabs', name);
3)动态添加选项卡
// 新增一个Tab项
element.tabAdd('tabs', {
title : name,
content : tabContent,
id : name
})
// 切换刷新
element.tabChange('tabs', name);
注:tabs为tab选项卡的lay-filter=""
<div class="layui-tab" lay-filter="tabs" lay-allowClose="true" style="margin:0px;">
附录一:什么是lay-filter
事件过滤器。你可能会在很多地方看到他,他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器
附录二:iframe
<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>
附录三:如何隐藏tab第一个选项卡的删除图标
<style>
.layui-tab-title>li:first-child>i{
display:none;
}
</style>
附录四:首页tab选项卡及body样式处理
以上就是今天的分享!!!
相关文章
- Fabric.js 使用纯色遮挡画布(前景色)
- 音视频&流媒体的原理以及基础入门知识
- iOS小技能:本地化(Internationalization & Localization)
- iOS小技能: 用纯代码开发界面的过程 & 图片使用的相关注意事项
- WAIC 2022 | 澜舟科技创始人&CEO 周明:基于预训练语言模型的可控文本生成研究与应用
- jQuery中的筛选&文档处理——案例
- ATT&CK实战系列——红队实战(二)
- 【爬虫】使用requests&xpath爬取东方Project图片
- 【学习笔记】Git&Github的基本使用
- 子域名申请及使用 & 腾讯云
- jsp之session学习:session.setAttribute(String name,Object value)&session.getAttribute(String name);
- 使用 Preload&Prefetch 优化前端页面的资源加载「建议收藏」
- 公开测序原始数据如何高速下载:Aspera的Q&A,站长使用经验总结~
- ChatGpt折腾&接入教程&在线体验
- 使用 arxiv-sanity &paperwithcode 跟进最新研究领域的文章
- 精益产品开发 —— 精益思想 & 精益价值观
- JERRY PicGo & Gitee 网站图床搭建说明
- 《Drools7.0.0.Final规则引擎教程》注释&错误信息详解编程语言
- 使用Apache&花生壳架设Web服务器
- php&&逻辑与运算符使用说明
- 浅析PHP按位与或(^、&)
- 探讨:php中在foreach中使用foreach($arras&$value)这种类型的解释
- 浅析c#范型中的特殊关键字where&default
- PHP引用(&)各种使用方法实例详解