Hi there,
I try to use 2 different tabbar for my app but it doesn’t works.
Here the structure of my app :
#main-view (no tabbar no navbar)
#view-1-1
#view-1-2
#view-2-1
#view-2-2
I would like to have 1 tabbar for view #view-1-1 and #view-1-2 and another tabbar for #view-2-1 and #view-2-2
I put display:none on my 2 tabbar at the openning app.
I show tabbar 1 when I choose to see #view-1-1
I show tabbar 2 and hide tabbar 1 when I choose to see #view-2-1
But the link on tabbar doesn’t works.
My index.html :
<div class="toolbar tabbar-labels toolbar-bottom-md" id="menu_foot_1" style="display:none;">
<div class="toolbar-inner">
<a href="#view-1-1" class="tab-link tab-link-active">
<i class="icon f7-icons ios-only">home</i>
<i class="icon f7-icons ios-only icon-ios-fill">home_fill</i>
<i class="icon material-icons md-only">home</i>
<span class="tabbar-label">TAB PRO 1</span>
</a>
<a href="#view-1-2" class="tab-link">
<i class="icon f7-icons ios-only">list</i>
<i class="icon f7-icons ios-only icon-ios-fill">list_fill</i>
<i class="icon material-icons md-only">view_list</i>
<span class="tabbar-label">TAB 1-2</span>
</a>
</div>
</div>
<div class="toolbar tabbar-labels toolbar-bottom-md" id="menu_foot_2" style="display:none;">
<div class="toolbar-inner">
<a href="#view-2-1" class="tab-link tab-link-active">
<i class="icon f7-icons ios-only">home</i>
<i class="icon f7-icons ios-only icon-ios-fill">home_fill</i>
<i class="icon material-icons md-only">home</i>
<span class="tabbar-label">TAB 2-1</span>
</a>
<a href="#view-2-2" class="tab-link">
<i class="icon f7-icons ios-only">list</i>
<i class="icon f7-icons ios-only icon-ios-fill">list_fill</i>
<i class="icon material-icons md-only">view_list</i>
<span class="tabbar-label">TAB 2-2</span>
</a>
</div>
</div>
<div id="view-home" class="view view-main tab tab-active">
<div class="page" data-name="home">
<div class="page-content">
<div class="list">
<ul>
<li>
<a href="#view-1-1" class="item-content item-link display_1_footer">
<div class="item-inner">
<div class="item-title">LINK TO VIEW 1-1</div>
</div>
</a>
</li>
<li>
<a href="#view-2-1" class="item-content item-link display_2_footer">
<div class="item-inner">
<div class="item-title">LINK TO VIEW 2-1</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="view-1-1" class="view tab">
<div class="page" data-name="1-1">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="/view-2-1/" class="switchTo2">
Switch to 2-1
</a>
</div>
<div class="title">VIEW 1-1</div>
</div>
</div>
<div class="page-content">
</div>
</div>
</div>
<div id="view-1-2" class="view tab">
<div class="page" data-name="1-2">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="/view-2-1/" class="switchTo2">
Switch to 2-1
</a>
</div>
<div class="title">VIEW 1-2</div>
</div>
</div>
<div class="page-content">
</div>
</div>
</div>
<div id="view-2-1" class="view tab">
<div class="page" data-name="2-1">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="/view-1-1/" class="switchTo1">
Switch to 1-1
</a>
</div>
<div class="title">VIEW 2-1</div>
</div>
</div>
<div class="page-content">
</div>
</div>
</div>
<div id="view-2-2" class="view tab">
<div class="page" data-name="2-2">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="/view-1-1/" class="switchTo1">
Switch to 1-1
</a>
</div>
<div class="title">VIEW 2-2</div>
</div>
</div>
<div class="page-content">
</div>
</div>
</div>
My app.js :
$$(document).on('click', '.display_1_footer', function (e) {
$$(’#menu_foot_2).hide();
$$(’#menu_foot_1’).show();
});
$$(document).on('click', '.display_2_footer', function (e) {
$$('#menu_foot_1').hide();
$$('#menu_foot_2').show();
});
$$(document).on('click', '.switchTo2, function (e) {
$$('#menu_foot_1').hide();
$$('#menu_foot_2').show();
});
$$(document).on('click', '.switchTo1', function (e) {
$$(’#menu_foot_1’).show();
$$(’#menu_foot_2’).hide();
});
An idea to helping me ?
Thank you