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

天蝎座的程序猿
401 阅读1分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第17天。[点击查看活动详情]

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

参考地址：layui.org.cn/doc/element… 2.导入数据表及无限级分类

  1. 数据导入请参考资料中的db.sql

  2. 无限级分类：父亲找儿子的过程，将对应的儿子放在父亲下面，形成树结构。（递归算法）

3.实现左侧菜单后台代码 4.前端左侧菜单绑定

附录一：

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

1.什么是Tab选项卡 Tab广泛应用于Web页面，因此我们也对其进行了良好的支持（简约风格、卡片风格、响应式Tab以及带删除的Tab等等）。Layui内置多种Tab风格，支持删除选项卡、并提供响应式支持。

2.Tab分类 参考地址：layui.org.cn/doc/element… 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卡片风格

      <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"

      <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选项卡

 2）切换到指定选项卡

element.tabChange('tabs', name); 3）动态添加选项卡

     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第一个选项卡的删除图标

    .layui-tab-title>li:first-child>i{
        display:none;
    }
</style>

附录四：首页tab选项卡及body样式处理 以上就是今天的分享！！！

avatar
文章
阅读
粉丝