Framework7选项卡 Framework7选项卡|Framework7

本文概述

标签版面
在标签之间切换
切换多个标签

Framework7选项卡是一组按逻辑分组的内容, 可帮助你在它们之间快速移动并像手风琴一样节省空间。
标签版面请参见Framework7选项卡的布局：

< !-- Tabs wrapper, should have "tabs" class. It is a required element --> < div class = "tabs"> < !-- The tab, should have "tab" class and unique id attribute --> < !-- The tab is active by default - "active" class --> < div class = "tab active" id = "tab1"> ...The content for Tab 1 goes here ...< /div> < !-- The second tab, should have "tab" class and unique id attribute --> < div class = "tab" id = "tab2"> ... The content for Tab 2 goes here ...< /div> < /div>

这里：

< div class =“ tabs”> ：它是所有选项卡的必需包装。如果我们错过了, 制表符将根本无法使用。
< div class =“ tab”> ：它是一个选项卡, 应具有唯一的id属性。
< div class =“ tab active”> ：它是一个活动标签, 它使用其他活动类使标签可见（活动）。

在标签之间切换如果希望用户可以在选项卡之间切换, 请在选项卡布局中使用某些控制器。为此, 你应使用tab-link类和href属性等于目标tab的id属性创建链接（< a> 标记）：
< ！-这里的链接用于激活第一个选项卡, 具有与第一个选项卡（tab1）的id属性相同的href属性（＃tab1）->
< a href = http://www.srcmini.com/“ #tab1” class = “ tab-link active” > 标签1 < /a>
< ！-这里的链接用于激活第二个选项卡, 具有与第二个选项卡（tab2）的id属性相同的href属性（＃tab2）->
< a href = http://www.srcmini.com/“ #tab2” class = “ tab-link” > 标签2 < /a>
< a href = http://www.srcmini.com/“ #tab3” class = “ tab-link” > 标签3 < /a>
切换多个标签如果你具有单个选项卡链接, 并且想要在多个选项卡之间切换, 请使用类, 而不要使用ID和data-tab属性。

< !-- For Top Tabs--> < div class = "tabs tabs-top"> < div class = "tab tab1 active"> ...< /div> < div class = "tab tab2"> ...< /div> < div class = "tab tab3"> ...< /div> < /div> < !-- For Bottom Tabs --> < div class = "tabs tabs-bottom"> < div class = "tab tab1 active"> ...< /div> < div class = "tab tab2"> ...< /div> < div class = "tab tab3"> ...< /div> < /div> < !-- For Tabs links --> < div class = "tab-links"> < !-- Links are switch top and bottom tabs to .tab1 --> < a href = "http://www.srcmini.com/#" class = "tab-link" data-tab = ".tab1"> Tab 1< /a> < !-- Links are switch top and bottom tabs to .tab2 --> < a href = "http://www.srcmini.com/#" class = "tab-link" data-tab = ".tab2"> Tab 2< /a> < !-- Links are switch top and bottom tabs to .tab3 --> < a href = "http://www.srcmini.com/#" class = "tab-link" data-tab = ".tab3"> Tab 3< /a> < /div>

tab-link的data-tab属性包含目标选项卡的CSS选择器。
【Framework7选项卡】Framework7中使用了不同类型的选项卡：

指数	标签类型	描述
1)	内联标签	内联选项卡是内联分组的集合, 使你可以在它们之间快速切换。
2)	从导航栏切换选项卡	我们可以在导航栏中放置标签, 以方便你在标签之间进行切换。
3)	从选项卡栏切换视图	单个选项卡可用于在具有自己的导航和布局的视图之间切换。
4)	动画标签	你可以使用简单的过渡（动画）来切换标签。
5)	可滑动标签	你可以通过使用选项卡的tabs-swipeable-wrap类来创建具有简单过渡的可滑动选项卡。
6)	标签JavaScript事件	当使用选项卡的JavaScript代码时, 可以使用JavaScript事件。
7)	使用JavaScript显示标签	你可以使用JavaScript方法切换或显示标签。