【Monaca】Onsen UI ons-splitterとons-navigatorを組み合わせる

Monacaの「Onsen UI V2 JS Splitter」のサンプルやOnsen UIのons-splitterの実例では、ons-splitter-contentのloadメソッドでページの切り替えを行っていますが、ons-navigatorを組み合わせてページ遷移を行うサンプルがないので、どのようにすればよいか悩む方も多いと思います。

ons-splitter-content内にons-navigatorを組み込み、メニューで項目を選択した場合、ons-splitter-contentではなく、ons-navigatorのページを切り替えることで実現できます。

ons-navigatorのresetToPageメソッドでページを切り替えます。
pushPageメソッドで次ページに遷移し、popPageメソッドで前ページに戻ります。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    ons.ready(function() {
      console.log("Onsen UI is ready!");
    });

    window.fn = {};
    window.fn.open = function() {
      var menu = document.getElementById('menu');
      menu.open();
    };
    window.fn.load = function(page) {
      var navigator = document.getElementById("navigator");
      if (navigator) {
        navigator.resetToPage(page, { animation: "slide" }).then(function () {
          var menu = document.getElementById('menu');
          if (menu) {
            menu.close();
          }
        });
      }
    };
    window.fn.pushPage = function (page) {
      var navigator = document.getElementById("navigator");
      if (navigator) {
        navigator.pushPage(page, { animation: "slide" });
      }
    };
    window.fn.popPage = function () {
      var navigator = document.getElementById("navigator");
      if (navigator) {
        navigator.popPage({ animation: "slide" });
      }
    };

    if (ons.platform.isIPhoneX()) {
      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
    }
  </script>
</head>
<body>
  <ons-splitter>
    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
      <ons-page>
        <ons-list>
          <ons-list-item onclick="fn.load('a.html')" tappable>
            ページA
          </ons-list-item>
          <ons-list-item onclick="fn.load('b.html')" tappable>
            ページB
          </ons-list-item>
          <ons-list-item onclick="fn.load('c.html')" tappable>
            ページC
          </ons-list-item>
        </ons-list>
      </ons-page>
    </ons-splitter-side>
    <ons-splitter-content id="content">
      <ons-navigator id="navigator" page="a.html"></ons-navigator>
    </ons-splitter-content>
  </ons-splitter>

  <template id="a.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="fn.open()">
            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          ページA
        </div>
      </ons-toolbar>
      <p style="text-align: center; padding-top: 20px;">
        <ons-button onclick="fn.pushPage('d.html')">ページD</ons-button>
      </p>
    </ons-page>
  </template>

  <template id="b.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="fn.open()">
            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          ページB
        </div>
      </ons-toolbar>
      <p style="text-align: center; padding-top: 20px;">
        <ons-button onclick="fn.pushPage('d.html')">ページD</ons-button>
      </p>
    </ons-page>
  </template>

  <template id="c.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="fn.open()">
            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          ページC
        </div>
      </ons-toolbar>
      <p style="text-align: center; padding-top: 20px;">
        <ons-button onclick="fn.pushPage('d.html')">ページD</ons-button>
      </p>
    </ons-page>
  </template>

  <template id="d.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="fn.open()">
            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          ページD
        </div>
      </ons-toolbar>
      <p style="text-align: center; padding-top: 20px;">
        <ons-button onclick="fn.popPage()">戻る</ons-button>
      </p>
    </ons-page>
  </template>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

<!DOCTYPE HTML>

<html>

<head>

ons.ready(function() {

console.log("Onsen UI is ready!");

});

window.fn = {};

window.fn.open = function() {

var menu = document.getElementById('menu');

menu.open();

};

window.fn.load = function(page) {

var navigator = document.getElementById("navigator");

if (navigator) {

navigator.resetToPage(page, { animation: "slide" }).then(function () {

var menu = document.getElementById('menu');

if (menu) {

menu.close();

}

});

}

};

window.fn.pushPage = function (page) {

var navigator = document.getElementById("navigator");

if (navigator) {

navigator.pushPage(page, { animation: "slide" });

}

};

window.fn.popPage = function () {

var navigator = document.getElementById("navigator");

if (navigator) {

navigator.popPage({ animation: "slide" });

}

};

if (ons.platform.isIPhoneX()) {

document.documentElement.setAttribute('onsflag-iphonex-portrait', '');

document.documentElement.setAttribute('onsflag-iphonex-landscape', '');

}

</script>

</head>

<body>

<ons-splitter>

<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>

<ons-page>

<ons-list>

<ons-list-item onclick="fn.load('a.html')" tappable>

ページA

</ons-list-item>

<ons-list-item onclick="fn.load('b.html')" tappable>

ページB

</ons-list-item>

<ons-list-item onclick="fn.load('c.html')" tappable>

ページC

</ons-list-item>

</ons-list>

</ons-page>

</ons-splitter-side>

<ons-splitter-content id="content">

<ons-navigator id="navigator" page="a.html"></ons-navigator>

</ons-splitter-content>

</ons-splitter>

<ons-page>

<ons-toolbar>

<ons-toolbar-button onclick="fn.open()">

<ons-icon icon="ion-navicon, material:md-menu"></ons-icon>

</ons-toolbar-button>

</div>

ページA

</div>

</ons-toolbar>

<ons-button onclick="fn.pushPage('d.html')">ページD</ons-button>

</p>

</ons-page>

</template>

<ons-page>

<ons-toolbar>

<ons-toolbar-button onclick="fn.open()">

<ons-icon icon="ion-navicon, material:md-menu"></ons-icon>

</ons-toolbar-button>

</div>

ページB

</div>

</ons-toolbar>

<ons-button onclick="fn.pushPage('d.html')">ページD</ons-button>

</p>

</ons-page>

</template>

<ons-page>

<ons-toolbar>

<ons-toolbar-button onclick="fn.open()">

<ons-icon icon="ion-navicon, material:md-menu"></ons-icon>

</ons-toolbar-button>

</div>

ページC

</div>

</ons-toolbar>

<ons-button onclick="fn.pushPage('d.html')">ページD</ons-button>

</p>

</ons-page>

</template>

<ons-page>

<ons-toolbar>

<ons-toolbar-button onclick="fn.open()">

<ons-icon icon="ion-navicon, material:md-menu"></ons-icon>

</ons-toolbar-button>

</div>

ページD

</div>

</ons-toolbar>

<ons-button onclick="fn.popPage()">戻る</ons-button>

</p>

</ons-page>

</template>

</body>

</html>

【Monaca】Onsen UI ons-splitterとons-navigatorを組み合わせる

【Cordova】phonegap-plugin-mobile-accessibilityプラグインがインストールできない

シンプル体重管理アクティブなインストールデバイス数が2万を突破しました！

2024年11月
月	火	水	木	金	土	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

【Monaca】Onsen UI ons-splitterとons-navigatorを組み合わせる

Recommended Posts

【Cordova】admob-plusプラグインにおいて広告が表示されない場合の対処方法

【Cordova】cordova-plugin-local-notificationプラグインの通知clickイベントが発火しない場合の対処方法

【Cordova】ビルド時にgradleの「journal-1.lock」ファイルロックが発生した場合の対処方法