Tabs allow to simply switch between different content.
Let's look at Tabs layout:
<!-- Tabs wrapper, shoud have "tabs" class. Required element -->
<div class="tabs">
<!-- First tab, should have "tab" class and unique id attribute -->
<!-- First tab is active by default - additional "active" class -->
<div class="tab active" id="tab1">
... Tab 1 content goes here ...
</div>
<!-- Second tab, should have "tab" class and unique id attribute -->
<div class="tab" id="tab2">
... Tab 2 content goes here ...
</div>
<!-- Third tab, should have "tab" class and unique id attribute -->
<div class="tab" id="tab3">
... Tab 3 content goes here ...
</div>
</div>
Where:
div class="tabs"
- required wrapper for all tabs. If you miss this element, tabs will not work!div class="tab"
- single tab. Should have unique id
attributediv class="tab active"
- single active tab. Tab which is active (visible) by default, should have additional "active" classAfter we have our tabs layout we need some contoller so user can switch between them.
To make it work we need to create links (<a>
tags) with "tab-link" class and href
attribute equal to the id
attribute of target tab:
<!-- Link that activates first tab, has the same href attribute (#tab1) as the id attribute of first tab (tab1) -->
<a href="#tab1" class="tab-link active">Tab 1</a>
<!-- Link that activates 2nd tab, has the same href attribute (#tab2) as the id attribute of 2nd tab (tab2) -->
<a href="#tab2" class="tab-link">Tab 2</a>
<!-- Link that activates 3rd tab, has the same href attribute (#tab2) as the id attribute of 3rd tab (tab3) -->
<a href="#tab3" class="tab-link">Tab 3</a>
As you may see, first link also has "active" class. It is not required, but if all this links will be on the same DOM tree level (the same-level children of mutual parent), then script will also change this "active" class on link related to active tab. It is useful when your "active" link has different visual style (like buttons Buttons Row / Segmented Control or links in Tab bar)
Such notation as above uses ID attributes to specify tabs we need to switch to. But sometimes we may have situation when we need to switch few tabs using one tab-link, for this case we may use classes instead of IDs and "data-tab" attribute for tab-link. For example:
<!-- Top Tabs -->
<div class="tabs tabs-top">
<div class="tab tab1 active">...</div>
<div class="tab tab2">...</div>
<div class="tab tab3">...</div>
</div>
<!-- Bottom Tabs -->
<div class="tabs tabs-bottom">
<div class="tab tab1 active">...</div>
<div class="tab tab2">...</div>
<div class="tab tab3">...</div>
</div>
<!-- Tabs links -->
<div class="tab-links">
<!-- This links will switch top and bottom tabs to .tab1 -->
<a href="#" class="tab-link" data-tab=".tab1">Tab 1</a>
<!-- This links will switch top and bottom tabs to .tab2 -->
<a href="#" class="tab-link" data-tab=".tab2">Tab 2</a>
<!-- This links will switch top and bottom tabs to .tab3 -->
<a href="#" class="tab-link" data-tab=".tab3">Tab 3</a>
</div>
Where data-tab
attribute of tab-link contains CSS selector of target tab/tabs
<div class="page-content">
<div class="content-block">
<!-- Buttons row as tabs controller -->
<div class="buttons-row">
<!-- Link to 1st tab, active -->
<a href="#tab1" class="tab-link active button">Tab 1</a>
<!-- Link to 2nd tab -->
<a href="#tab2" class="tab-link button">Tab 2</a>
<!-- Link to 3rd tab -->
<a href="#tab3" class="tab-link button">Tab 3</a>
</div>
</div>
<!-- Tabs, tabs wrapper -->
<div class="tabs">
<!-- Tab 1, active by default -->
<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">
<!-- Buttons row as tabs controller in navbar-->
<div class="buttons-row">
<!-- Link to 1st tab, active -->
<a href="#tab1" class="tab-link active button">Tab 1</a>
<!-- Link to 2nd tab -->
<a href="#tab2" class="tab-link button">Tab 2</a>
<!-- Link to 3rd tab -->
<a href="#tab3" class="tab-link button">Tab 3</a>
</div>
</div>
</div>
</div>
<div class="pages">
<div class="page">
<!-- Tabs, tabs wrapper, pate-content are tabs now -->
<div class="page-content tabs">
<!-- Tab 1, active by default -->
<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>
Why single Tab could not be a seprate View with its own navigation and layout? It can, so you can just switch Views as tabs:
<!-- Tabs, now tabs wrapper is "views" -->
<div class="views tabs toolbar-fixed">
<!-- Tab 1 - View 1, active by default -->
<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 2 - 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>
<!-- Tab bar with tab links -->
<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>
It is also possible to switch tabs with simple transition. This requires additional div class="tabs-animated-wrap"
wrapper for div class="tabs"
:
<div class="navbar">
<div class="navbar-inner">
<div class="center">
<!-- Buttons row as tabs controller in navbar-->
<div class="buttons-row">
<!-- Link to 1st tab, active -->
<a href="#tab1" class="tab-link active button">Tab 1</a>
<!-- Link to 2nd tab -->
<a href="#tab2" class="tab-link button">Tab 2</a>
<!-- Link to 3rd 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 animated wrapper, required to switch tabs with transition -->
<div class="tabs-animated-wrap">
<!-- Tabs, tabs wrapper -->
<div class="tabs">
<!-- Tab 1, active by default -->
<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>
Note that animted tabs wrapper (div class="tabs-animated-wrap") should be a fixed height. By default, it is 100% height of its parent
It is also possible to switch tabs with simple transition. This requires additional div class="tabs-swipeable-wrap"
wrapper for div class="tabs"
.
In this example let's put tab links in Subnavbar and we will use page-content as tab to keep scrolling position for each tab separately:
<div class="pages navbar-fixed">
<div data-page="home" class="page with-subnavbar">
<div class="navbar">
<div class="navbar-inner">
<div class="center">Swipeable Tabs</div>
<div class="subnavbar">
<!-- Buttons row as tabs controller in Subnavbar-->
<div class="buttons-row">
<!-- Link to 1st tab, active -->
<a href="#tab1" class="button active tab-link">Tab 1</a>
<!-- Link to 2nd tab -->
<a href="#tab2" class="button tab-link">Tab 2</a>
<!-- Link to 3rd tab -->
<a href="#tab3" class="button tab-link">Tab 3</a>
</div>
</div>
</div>
</div>
<!-- Tabs swipeable wrapper, required to switch tabs with swipes -->
<div class="tabs-swipeable-wrap">
<!-- Tabs, tabs wrapper -->
<div class="tabs">
<!-- Tab 1, active by default -->
<div id="tab1" class="page-content tab active">
<div class="content-block">
... Tab 1 content ...
</div>
</div>
<!-- Tab 2 -->
<div id="tab2" class="page-content tab">
<div class="content-block">
... Tab 2 content ...
</div>
</div>
<!-- Tab 3 -->
<div id="tab3" class="page-content tab">
<div class="content-block">
... Tab 3 content ...
</div>
</div>
</div>
</div>
</div>
</div>
Tabs events could be very useful when you need to do something in JavaScript when some Tabs becomes active:
Event | Target | Description |
---|---|---|
tab:show | Tab Element<div class="tab"> | Event will be triggered when Tab becomes visible/active |
tab:hide | Tab Element<div class="tab"> | Event will be triggered when Tab becomes invisible/inactive |
var myApp = new Framework7();
var $$ = Dom7;
$$('#tab1').on('tab:show', function () {
myApp.alert('Tab 1 is visible');
});
$$('#tab2').on('tab:show', function () {
myApp.alert('Tab 2 is visible');
});
$$('#tab3').on('tab:show', function () {
myApp.alert('Tab 3 is visible');
});
It is also possible to show tab (switch tabs) using JavaScript. We should call the following App method:
myApp.showTab(tab, animated)
<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');
});