I have created a main tab called tab1.html with a menu for changing options or accessing settings. Now, I want to add a button on tab1.html that takes you to another tab, tab4.html. However, I am facing an issue where both the menu (splitter) and pushpage function do not work together. How can I solve this problem?
<ons-splitter>
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item onclick="fn.load('tab1.html')" tappable>
<ons-icon icon="home" style="color: #1e88e5;"></ons-icon><p style="opacity: 0.6;"> Startseite</p>
</ons-list-item>
<ons-list-item onclick="fn.load('tab6.html')" tappable>
<ons-icon icon="user" style="color: #1e88e5;"></ons-icon><p style="opacity: 0.6;"> Mein Profil</p>
</ons-list-item>
<ons-list-item onclick="fn.load('tab8.html')" tappable>
<ons-icon icon="sliders" style="color: #1e88e5;"></ons-icon><p style="opacity: 0.6;"> Einstellungen</p>
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="tab1.html"></ons-splitter-content>
</ons-splitter>
And here is the navigator setup for transitioning to page 4:
<ons-navigator id="pushpage_navigator" page="tab1.html"></ons-navigator>
Next, let's take a look at tab1.html:
<ons-template id="tab1.html">
<ons-page>
<div class="left"> <!--left-->
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<button onclick="change()" />
</ons-page>
Moving on to tab4.html, which will be accessed from tab1.html:
<ons-template id="tab4.html">
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Clock View</div>
</ons-toolbar>
</ons-page>
</ons-template>
Lastly, we have the JavaScript functions defined:
//ONSEN UI 2.0
window.fn = {};
window.fn.open = function() {
var menu = document.getElementById('menu');
menu.open();
};
window.fn.load = function(page) {
var content = document.getElementById('content');
var menu = document.getElementById('menu');
content.load(page)
.then(menu.close.bind(menu));
};
function change()
{
var myNavigator = document.getElementById('pushpage_navigator');
myNavigator.pushPage('tab4.html');
}
The issue arises when placing the 'ons-navigator' tag before the splitter, causing it to malfunction. On the other hand, placing it after the splitter leads to errors like 'myNavigator is null' or 'pushPage is already running'.