标签页(Tabs)

优质

小牛编辑

128浏览

2023-12-01

标签用于控制不同内容区的切换显示。

Tabs标签布局

我们来看一下标签页的布局

<!-- Tabs容器, 需要带有"tabs"类。必需元素 -->
<div class="tabs">
  <!-- 第一个tab, 需要带有"tab"类和唯一的id -->
  <!-- 第一个tab默认是激活显示状态，通过添加"active"类实现 -->
  <div class="tab active" id="tab1">
    ... Tab 1 内容 ...
  </div>
  <!-- 第二个tab, 需要带有"tab"类和唯一的id -->
  <div class="tab" id="tab2">
    ... Tab 2 内容
  </div>
  <!-- 第三个tab, 需要带有"tab"类和唯一的id -->
  <div class="tab" id="tab3">
    ... Tab 3 内容 ...
  </div>
</div>

其中：

div class="tabs" - 所有标签页的容器，没有它标签页组件将无法工作
div class="tab" - 单独的标签页，需要有唯一的id
div class="tab active" - 激活的标签页，即默认显示的tab，需要"active"类

各标签页间切换

完成标签组件HTML布局后，我们需要控件，以便用户可以在各标签间切换。

我们需要创建链接（<a>标签），它拥有名为"tab-link"的类，并且href属性值和目标标签页的id相同：

<!-- 关联到第一个标签, 需要设置和第一个标签id名相同的href属性(tab1) -->
<a href="#tab1" class="tab-link active">Tab 1</a>
<!-- 关联到第二个标签, 需要设置和第二个标签id名相同的href属性(tab2) -->
<a href="#tab2" class="tab-link">Tab 2</a>
<!-- 关联到第三个标签, 需要设置和第三个标签id名相同的href属性(tab3) -->
<a href="#tab3" class="tab-link">Tab 3</a>

如你所见，第一个标签还有"active"类。它不是必需的，但如果所有这些链接在相同的DOM树层级，内部脚本也会将“active”类添加到处于激活态的标签页上。当你的“active”链接有不同的视觉样式时（比如Buttons Row / Segmented Control或者是标签栏中的链接），这会很有用。

切换多标签

上文描述的表示方法通过ID指定我们要切换到的标签。但有时我们想要用一个标签链接来切换多个标签页，这时我们可以用class代替id。标签面板里的a元素使用“data-tab”属性指向需要切换显示内容区的类（一般对应多块div）。比如：

<!-- 顶部 Tabs -->
<div class="tabs tabs-top">
  <div class="tab tab1 active">...</div>
  <div class="tab tab2">...</div>
  <div class="tab tab3">...</div>
</div>
<!-- 底部 Tabs -->
<div class="tabs tabs-bottom">
  <div class="tab tab1 active">...</div>
  <div class="tab tab2">...</div>
  <div class="tab tab3">...</div>
</div>
<!-- Tabs 控制面板 -->
<div class="tab-links">
  <!-- 将同时切换标签内容区到 .tab1 区块-->
  <a href="#" class="tab-link" data-tab=".tab1">Tab 1</a>
  <!-- 将同时切换标签内容区到 .tab2 区块-->
  <a href="#" class="tab-link" data-tab=".tab2">Tab 2</a>
  <!-- 将同时切换标签内容区到 .tab3 区块-->
  <a href="#" class="tab-link" data-tab=".tab3">Tab 3</a>
</div>

其中，data-tab属性是包括tab/tabs的CSS选择器的字符串。

内联标签页示例

<div class="page-content">
  <div class="content-block">
    <!-- tabs控制面板 -->
    <div class="buttons-row">
      <!-- 关联到第一个tab, 默认激活 -->
      <a href="#tab1" class="tab-link active button">Tab 1</a>
      <!-- 关联到第二个tab -->
      <a href="#tab2" class="tab-link button">Tab 2</a>
      <!-- 关联到第三个tab -->
      <a href="#tab3" class="tab-link button">Tab 3</a>
    </div>
  </div>
  <!-- Tabs, 标签内容区容器 -->
  <div class="tabs">
    <!-- Tab 1, 默认激活 -->
    <div id="tab1" class="tab active">
      <div class="content-block">
        <p>This is tab 1 content</p>
        ...
      </div>
    </div>
    <!-- Tab 2 -->
    <div id="tab2" class="tab">
      <div class="content-block">
        <p>This is tab 2 content</p>
        ...
      </div>
    </div>
    <!-- Tab 3 -->
    <div id="tab3" class="tab">
      <div class="content-block">
        <p>This is tab 3 content</p>
        ...
      </div>
    </div>
  </div>
</div>

导航条标签页示例

<div class="navbar">
  <div class="navbar-inner">
    <div class="center">
      <!-- 导航栏中的按键排控制器 -->
      <div class="buttons-row">
        <!-- 关联到第一个tab的链接，默认激活 -->
        <a href="#tab1" class="tab-link active button">Tab 1</a>
        <!-- 关联到第二个tab的链接 -->
        <a href="#tab2" class="tab-link button">Tab 2</a>
        <!-- 关联到第三个tab的链接 -->
        <a href="#tab3" class="tab-link button">Tab 3</a>
      </div>
    </div>
  </div>
</div>
<div class="pages">
  <div class="page">
    <!-- Tabs, tabs容器, page-content为tabs -->
    <div class="page-content tabs">
      <!-- Tab 1，默认激活 -->
      <div id="tab1" class="tab active">
        <div class="content-block">
<p>This is tab 1 content</p>
...
        </div>
      </div>
      <!-- Tab 2 -->
      <div id="tab2" class="tab">
        <div class="content-block">
<p>This is tab 2 content</p>
...
        </div>
      </div>
      <!-- Tab 3 -->
      <div id="tab3" class="tab">
        <div class="content-block">
<p>This is tab 3 content</p>
...
        </div>
      </div>
    </div>
  </div>
</div>

通过标签栏切换视图的例子：

为何Tab不能是一个独立的视图，具有导航和布局？不，它可以！你可以通过tabs切换视图：

<!-- Tabs, 现在容器是"views" -->
<div class="views tabs toolbar-fixed">
  <!-- Tab 1 同时也是 View 1, 默认激活 -->
  <div id="tab1" class="view tab active">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="center">View 1</div>
      </div>
    </div>
    <div class="pages navbar-fixed">
      <div data-page="home-1" class="page">
        <div class="page-content">
<div class="content-block">
  <p>This is view 1</p>
</div>
        </div>
      </div>
    </div>
  </div>
  <!-- Tab 2 - View 2 -->
  <div id="tab2" class="view tab">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="center">View 2</div>
      </div>
    </div>
    <div class="pages navbar-fixed">
      <div data-page="home-2" class="page">
        <div class="page-content">
<div class="content-block">
  <p>This is view 2</p>
</div>
        </div>
      </div>
    </div>
  </div>
  <!-- Tab 3 - View 3 -->
  <div id="tab3" class="view tab">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="center">View 3</div>
      </div>
    </div>
    <div class="pages navbar-fixed">
      <div data-page="home-3" class="page">
        <div class="page-content">
<div class="content-block">
  <p>This is view 3</p>
</div>
        </div>
      </div>
    </div>
  </div>
  <!-- 带有链接的标签栏 -->
  <div class="toolbar tabbar">
    <div class="toolbar-inner">
      <a href="#tab1" class="tab-link active"><i class="icon demo-icon-1"></i></a>
      <a href="#tab2" class="tab-link"><i class="icon demo-icon-2"></i></a>
      <a href="#tab3" class="tab-link"><i class="icon demo-icon-3"></i></a>
    </div>
  </div>
</div>

动画过渡的标签页

我们也可以对标签页切换加上简单的动画过渡，只需要在div class="tabs"外面加上额外的div class="tabs-animated-wrap"容器：

<div class="navbar">
  <div class="navbar-inner">
    <div class="center">
      <!-- 导航栏中的按键排控制器 -->
      <div class="buttons-row">
        <!-- 关联到第一个tab的链接，默认激活 -->
        <a href="#tab1" class="tab-link active button">Tab 1</a>
        <!-- 关联到第二个tab的链接 -->
        <a href="#tab2" class="tab-link button">Tab 2</a>
        <!-- 关联到第三个tab的链接 -->
        <a href="#tab3" class="tab-link button">Tab 3</a>
      </div>
    </div>
  </div>
</div>
<div class="pages">
  <div class="page">
    <div class="page-content">
      <!-- Tabs动画容器, 在动画过渡时需要 -->
      <div class="tabs-animated-wrap">
        <!-- Tabs, tabs容器 -->
        <div class="tabs">
<!-- Tab 1，默认激活 -->
<div id="tab1" class="tab active">
  ... Tab 1 content ...
</div>
<!-- Tab 2 -->
<div id="tab2" class="tab">
  ... Tab 2 content ...
</div>
<!-- Tab 3 -->
<div id="tab3" class="tab">
  ... Tab 3 content ...
</div>
        </div>
      </div>
    </div>
  </div>
</div>

注意，最外层容器div.tabs-animated-wrap需要一个固定的高度，默认是其父亲节点100%的高度

标签页的JS事件

当你需要在标签切换到激活状态后做一些事情时，标签页事件是很有用的：

事件（Event）	目标（Target）	描述（Description）
show	标签元素<div class="tab">	在目标标签页被切换到可见状态时，事件触发

var myApp = new Framework7();
var $$ = Dom7;
$$('#tab1').on('show', function () {
    myApp.alert('Tab 1 is visible');
});
$$('#tab2').on('show', function () {
    myApp.alert('Tab 2 is visible');
});
$$('#tab3').on('show', function () {
    myApp.alert('Tab 3 is visible');
});

使用JS切换标签页

也可以通过JS切换标签页，我们需要调用以下的App方法：

myApp.showTab(tab)

tab - 要打开的标签页的HTML元素或CSS选择器。必选参数
当标签页切换成功后方法会返回true,否则会返回false

<a href="#" class="show-tab-1">Show Tab 1</a>
<a href="#" class="show-tab-2">Show Tab 2</a>
<a href="#" class="show-tab-3">Show Tab 3</a>

var myApp = new Framework7();
var $$ = Dom7;
$$('.show-tab-1').on('click', function () {
    myApp.showTab('#tab1');
});
$$('.show-tab-2').on('click', function () {
    myApp.showTab('#tab2');
});
$$('.show-tab-3').on('click', function () {
    myApp.showTab('#tab3');
});