请选择 进入手机版 | 继续访问电脑版
MSIPO技术圈 首页 IT技术 查看内容

layui实现选项卡(万字博客!!!)

2023-07-13

今日金句

努力不一定会被看到,但成功会

前言

在上篇博客中,我们用layui实现了后台首页的重要部分——左侧树形菜单,本篇博客将带你通过点击左侧树形菜单实现动态打开选项卡Tab

一、什么是Tab选项卡

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

二、Tab分类

参考地址:layui分页

2.1 默认风格

在这里插入图片描述

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>默认风格的Tab</legend>
</fieldset>
 
<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. 高度默认自适应,也可以随意固宽。
      <br>2. Tab进行了响应式处理,所以无需担心数量多少。
    </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 动态Tab

在这里插入图片描述

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>动态操作Tab</legend>
</fieldset>
 
<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="11">网站设置</li>
    <li lay-id="22">用户管理</li>
    <li lay-id="33">权限分配</li>
    <li lay-id="44">商品管理</li>
    <li lay-id="55">订单管理</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="site-demo-button" style="margin-bottom: 0;">
  <button class="layui-btn site-demo-active" data-type="tabAdd">新增Tab项</button>
  <button class="layui-btn site-demo-active" data-type="tabDelete">删除:商品管理</button>
  <button class="layui-btn site-demo-active" data-type="tabChange">切换到:用户管理</button>
</div>
 

2.3 Hash Tab

在这里插入图片描述

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>Hash地址定位</legend>
</fieldset>
<div class="layui-tab" lay-filter="test">
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="11">网站设置</li>
    <li lay-id="22">用户管理</li>
    <li lay-id="33">权限分配</li>
    <li lay-id="44">商品管理</li>
    <li lay-id="55">订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
      点击该Tab的任一标题,观察地址栏变化,再刷新页面。选项卡将会自动定位到上一次切换的项
    </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.4 简洁Tab

在这里插入图片描述

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>简洁风格的Tab</legend>
</fieldset>
 
<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" style="height: 100px;">
    <div class="layui-tab-item layui-show">内容不一样是要有,因为你可以监听tab事件(阅读下文档就是了)</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.5 卡片Tab

在这里插入图片描述

 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>卡片风格的Tab</legend>
</fieldset>
 
<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">默认宽度是相对于父元素100%适应的,你也可以固定宽度。</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.6 响应式Tab

当容器的宽度不足以显示全部的选项时,即会自动出现展开图标。

在这里插入图片描述

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>当Tab数超过一定宽度</legend>
</fieldset>
 
<div class="layui-tab layui-tab-card" style="width: 290px;">
  <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. 宽度足够,就不会出现右上图标;宽度不够,就会开启展开功能。
      <br>2. 如果你的宽度是自适应的,Tab会自动判断是否需要展开,并适用于所有风格。
    </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.7 带删除的Tab

在这里插入图片描述

与其他类别Tab相比没有什么特别的结构,就是多了个属性 lay-allowClose=“true”

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>带删除功能的Tab</legend>
</fieldset>
 
<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" style="height: 150px;">
    <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

相关阅读

热门文章

    手机版|MSIPO技术圈 皖ICP备19022944号-2

    Copyright © 2024, msipo.com

    返回顶部