移动端安卓和IOS开发框架Framework7教程-标签页(Tabs)

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

Tabs标签布局

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

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

复制

其中：

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

各标签页间切换

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

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

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

复制

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

切换多标签

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

1. <!-- 顶部 Tabs -->
2. <div class="tabs tabs-top">
3.   <div class="tab tab1 active">...</div>
4.   <div class="tab tab2">...</div>
5.   <div class="tab tab3">...</div>
6. </div>
7. <!-- 底部 Tabs -->
8. <div class="tabs tabs-bottom">
9.   <div class="tab tab1 active">...</div>
10.   <div class="tab tab2">...</div>
11.   <div class="tab tab3">...</div>
12. </div>
13. <!-- Tabs 控制面板 -->
14. <div class="tab-links">
15.   <!-- 将同时切换标签内容区到 .tab1 区块-->
16.   <a href="#" class="tab-link" data-tab=".tab1">Tab 1</a>
17.   <!-- 将同时切换标签内容区到 .tab2 区块-->
18.   <a href="#" class="tab-link" data-tab=".tab2">Tab 2</a>
19.   <!-- 将同时切换标签内容区到 .tab3 区块-->
20.   <a href="#" class="tab-link" data-tab=".tab3">Tab 3</a>
21. </div>

复制

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

内联标签页示例

1. <div class="page-content">
2.   <div class="content-block">
3.     <!-- tabs控制面板 -->
4.     <div class="buttons-row">
5.       <!-- 关联到第一个tab, 默认激活 -->
6.       <a href="#tab1" class="tab-link active button">Tab 1</a>
7.       <!-- 关联到第二个tab -->
8.       <a href="#tab2" class="tab-link button">Tab 2</a>
9.       <!-- 关联到第三个tab -->
10.       <a href="#tab3" class="tab-link button">Tab 3</a>
11.     </div>
12.   </div>
13.   <!-- Tabs, 标签内容区容器 -->
14.   <div class="tabs">
15.     <!-- Tab 1, 默认激活 -->
16.     <div id="tab1" class="tab active">
17.       <div class="content-block">
18.         <p>This is tab 1 content</p>
19.         ...
20.       </div>
21.     </div>
22.     <!-- Tab 2 -->
23.     <div id="tab2" class="tab">
24.       <div class="content-block">
25.         <p>This is tab 2 content</p>
26.         ...
27.       </div>
28.     </div>
29.     <!-- Tab 3 -->
30.     <div id="tab3" class="tab">
31.       <div class="content-block">
32.         <p>This is tab 3 content</p>
33.         ...
34.       </div>
35.     </div>
36.   </div>
37. </div>

复制

  实例预览

导航条标签页示例

1. <div class="navbar">
2.   <div class="navbar-inner">
3.     <div class="center">
4.       <!-- 导航栏中的按键排控制器 -->
5.       <div class="buttons-row">
6.         <!-- 关联到第一个tab的链接，默认激活 -->
7.         <a href="#tab1" class="tab-link active button">Tab 1</a>
8.         <!-- 关联到第二个tab的链接 -->
9.         <a href="#tab2" class="tab-link button">Tab 2</a>
10.         <!-- 关联到第三个tab的链接 -->
11.         <a href="#tab3" class="tab-link button">Tab 3</a>
12.       </div>
13.     </div>
14.   </div>
15. </div>
16. <div class="pages">
17.   <div class="page">
18.     <!-- Tabs, tabs容器, page-content为tabs -->
19.     <div class="page-content tabs">
20.       <!-- Tab 1，默认激活 -->
21.       <div id="tab1" class="tab active">
22.         <div class="content-block">
23.           <p>This is tab 1 content</p>
24.           ...
25.         </div>
26.       </div>
27.       <!-- Tab 2 -->
28.       <div id="tab2" class="tab">
29.         <div class="content-block">
30.           <p>This is tab 2 content</p>
31.           ...
32.         </div>
33.       </div>
34.       <!-- Tab 3 -->
35.       <div id="tab3" class="tab">
36.         <div class="content-block">
37.           <p>This is tab 3 content</p>
38.           ...
39.         </div>
40.       </div>
41.     </div>
42.   </div>
43. </div>

复制

  实例预览

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

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

1. <!-- Tabs, 现在容器是"views" -->
2. <div class="views tabs toolbar-fixed">
3.   <!-- Tab 1 同时也是 View 1, 默认激活 -->
4.   <div id="tab1" class="view tab active">
5.     <div class="navbar">
6.       <div class="navbar-inner">
7.         <div class="center">View 1</div>
8.       </div>
9.     </div>
10.     <div class="pages navbar-fixed">
11.       <div data-page="home-1" class="page">
12.         <div class="page-content">
13.           <div class="content-block">
14.             <p>This is view 1</p>
15.           </div>
16.         </div>
17.       </div>
18.     </div>
19.   </div>
20.   <!-- Tab 2 - View 2 -->
21.   <div id="tab2" class="view tab">
22.     <div class="navbar">
23.       <div class="navbar-inner">
24.         <div class="center">View 2</div>
25.       </div>
26.     </div>
27.     <div class="pages navbar-fixed">
28.       <div data-page="home-2" class="page">
29.         <div class="page-content">
30.           <div class="content-block">
31.             <p>This is view 2</p>
32.           </div>
33.         </div>
34.       </div>
35.     </div>
36.   </div>
37.   <!-- Tab 3 - View 3 -->
38.   <div id="tab3" class="view tab">
39.     <div class="navbar">
40.       <div class="navbar-inner">
41.         <div class="center">View 3</div>
42.       </div>
43.     </div>
44.     <div class="pages navbar-fixed">
45.       <div data-page="home-3" class="page">
46.         <div class="page-content">
47.           <div class="content-block">
48.             <p>This is view 3</p>
49.           </div>
50.         </div>
51.       </div>
52.     </div>
53.   </div>
54.   <!-- 带有链接的标签栏 -->
55.   <div class="toolbar tabbar">
56.     <div class="toolbar-inner">
57.       <a href="#tab1" class="tab-link active"><i class="icon demo-icon-1"></i></a>
58.       <a href="#tab2" class="tab-link"><i class="icon demo-icon-2"></i></a>
59.       <a href="#tab3" class="tab-link"><i class="icon demo-icon-3"></i></a>
60.     </div>
61.   </div>
62. </div>

复制

  实例预览

动画过渡的标签页

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

1. <div class="navbar">
2.   <div class="navbar-inner">
3.     <div class="center">
4.       <!-- 导航栏中的按键排控制器 -->
5.       <div class="buttons-row">
6.         <!-- 关联到第一个tab的链接，默认激活 -->
7.         <a href="#tab1" class="tab-link active button">Tab 1</a>
8.         <!-- 关联到第二个tab的链接 -->
9.         <a href="#tab2" class="tab-link button">Tab 2</a>
10.         <!-- 关联到第三个tab的链接 -->
11.         <a href="#tab3" class="tab-link button">Tab 3</a>
12.       </div>
13.     </div>
14.   </div>
15. </div>
16. <div class="pages">
17.   <div class="page">
18.     <div class="page-content">
19.       <!-- Tabs动画容器, 在动画过渡时需要 -->
20.       <div class="tabs-animated-wrap">
21.         <!-- Tabs, tabs容器 -->
22.         <div class="tabs">
23.           <!-- Tab 1，默认激活 -->
24.           <div id="tab1" class="tab active">
25.             ... Tab 1 content ...
26.           </div>
27.           <!-- Tab 2 -->
28.           <div id="tab2" class="tab">
29.             ... Tab 2 content ...
30.           </div>
31.           <!-- Tab 3 -->
32.           <div id="tab3" class="tab">
33.             ... Tab 3 content ...
34.           </div>
35.         </div>
36.       </div>
37.     </div>
38.   </div>
39. </div>

复制

  实例预览

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

标签页的JS事件

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

事件（Event） 目标（Target） 描述（Description）

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

1. var myApp = new Framework7();
2. var $$ = Dom7;
3. $$('#tab1').on('show', function () {
4.     myApp.alert('Tab 1 is visible');
5. });
6. $$('#tab2').on('show', function () {
7.     myApp.alert('Tab 2 is visible');
8. });
9. $$('#tab3').on('show', function () {
10.     myApp.alert('Tab 3 is visible');
11. });

复制

  实例预览

使用JS切换标签页

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

myApp.showTab(tab)

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

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

复制

1. var myApp = new Framework7();
2. var $$ = Dom7;
3. $$('.show-tab-1').on('click', function () {
4.     myApp.showTab('#tab1');
5. });
6. $$('.show-tab-2').on('click', function () {
7.     myApp.showTab('#tab2');
8. });
9. $$('.show-tab-3').on('click', function () {
10.     myApp.showTab('#tab3');
11. });
    复制

  实例预览