Onsen UI 2.0 Splitter и pushPage не работают вместе

Question

Я сделал основную вкладку (tab1.html), где у вас есть меню для изменения параметров или перехода к настройкам ... Теперь я хочу, чтобы вы могли щелкнуть по кнопке на главном tab (tab1.html), чтобы перейти к другому oner (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;">&nbsp;&nbsp;&nbsp;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;">&nbsp;&nbsp;&nbsp;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;">&nbsp;&nbsp;&nbsp;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> 

И окончательный Л.Ю. javscript:

//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'); 
} 

Если вы установите «ONS-navigator'-тег перед разветвитель сплиттер не работает. Если вы установите его после него, вы получите такие ошибки, как: myNavigator имеет значение null или pushPage уже запущен.

Answer 1

Мне кажется, что у вас могут возникнуть проблемы с вложением двух элементов (сплиттер и навигатор). Оба они должны действовать как контейнеры для фактических страниц. Поэтому, если вы хотите использовать оба, вы должны поместить его внутри другого.

Если у вас есть что-то вроде:

<ons-navigator id="pushpage_navigator"> 
    <ons-page> 
    <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>1</ons-list-item> 
      <ons-list-item onclick="fn.load('tab6.html')" tappable>6</ons-list-item> 
      <ons-list-item onclick="fn.load('tab8.html')" tappable>8</ons-list-item> 
      </ons-list> 
     </ons-page> 
     </ons-splitter-side> 
     <ons-splitter-content id="content" page="tab1.html"></ons-splitter-content> 
    </ons-splitter> 
    </ons-page> 
</ons-navigator> 

Таким образом, вы будете иметь доступ как к сплиттер и штурмана с самого начала. Demo.

Если я вас неправильно понял или у вас возникли дополнительные проблемы, не стесняйтесь комментировать, и я могу соответствующим образом обновить свой ответ.