0

オプションを変更したり、設定に移動したりするためのメニューがあるメイン タブ (tab1.html) を作成しました...メイン タブ (tab1.html) のボタンをクリックして、別のタブに移動できるようにしたいと思います ( tab4.html)。問題は、メニュー (スプリッター) とプッシュページ機能の両方が一緒に機能しないことです;/ どうすれば解決できますか? メニューのスプリッター:

<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>

そして、tab1.html から来る必要がある tab4.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');
}

スプリッターの前に「ons-navigator」タグを設定すると、スプリッターは機能しません。後で設定すると、次のようなエラーが発生します: myNavigator is null or pushPage is already running.

4

1 に答える 1

3

2 つの要素 (スプリッターとナビゲーター) の入れ子に問題があるように見えます。どちらも実際のページのコンテナとして機能するはずです。したがって、両方を使用する場合は、一方を他方の内側に配置する必要があります。

次のようなものがある場合：

<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>

このようにして、最初からスプリッターとナビゲーターの両方にアクセスできます。デモ。

どういうわけかあなたを誤解した場合、またはさらに問題がある場合は、お気軽にコメントしてください。それに応じて回答を更新できます。

于 2016-09-20T23:06:34.437 に答える