Я сделал главную вкладку (tab1.html), где у вас есть меню для изменения параметров или перехода к настройкам... Теперь я хочу, чтобы вы могли нажать кнопку на главной вкладке (tab1.html), чтобы перейти к другому ( tab4.html). Проблема в том, что он не работает вместе, поэтому меню (разделитель) и функция pushpage; / Как это решить? Разделитель для меню:
<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>
И навигатор, откуда вы должны попасть на 4 страницу:
<ons-navigator id="pushpage_navigator" page="tab1.html"></ons-navigator>
Затем 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>
И tab4.html, где вы должны прийти из 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">Uhrzeitenansicht</div>
</ons-toolbar>
</ons-page>
</ons-template>
И, наконец, javascript:
//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');
}
Если вы установите тег on-navigator перед сплиттером, сплиттер не будет работать. Если вы установите его после него, вы получите такие ошибки, как: myNavigator имеет значение null или pushPage уже запущен.
