【LayUI】之动态树&动态选项卡Tab&iframe使用

Myth丶恋晨 2024-04-08 11:05 6阅读 0赞

**目录**

1.左侧导航

2.导入数据表及无限级分类

3.实现左侧菜单后台代码

4.前端左侧菜单绑定

附录一：

附录二：判断选项卡是否已经打开

1.什么是Tab选项卡

2.Tab分类

附录一：什么是lay-filter

附录二：iframe

附录三：如何隐藏tab第一个选项卡的删除图标

附录四：首页tab选项卡及body样式处理

--------------------

## 1.左侧导航 ##

>  **导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。  
> 面包屑结构简单，支持自定义分隔符。**

####  参考地址：[http://layui.org.cn/doc/element/nav.html][http_layui.org.cn_doc_element_nav.html] ####

##  **2.导入数据表及无限级分类** ##

>  **1) 数据导入请参考资料中的db.sql  
>   
> 2) 无限级分类：父亲找儿子的过程，将对应的儿子放在父亲下面，形成树结构。（递归算法）**

##  **3.实现左侧菜单后台代码** ##

##  **4.前端左侧菜单绑定** ##

####    附录一： ####

#### 附录二：判断选项卡是否已经打开 ####

$(".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简约风格**

**2.2 Tab卡片风格**

**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** ####

#### **附录三：如何隐藏tab第一个选项卡的删除图标** ####

#### 附录四：首页tab选项卡及body样式处理 ####

## 以上就是今天的分享！！！ ##

[http_layui.org.cn_doc_element_nav.html]: http://layui.org.cn/doc/element/nav.html