LoginSignup
0
0

More than 1 year has passed since last update.

[OnsenUI] ons-navigator

Posted at

覚書です

ナビゲータとは

  • 開いたページ情報を保持してくれるもの
  • page属性に与えたDOMを表示してくれるぞ

かんたんなせつめい

生成

bodyの頭とかに置くことがおおいぞ

<body>
    <ons-navigator  id="my-navigator" page="はじめに表示するページ"></ons-navigator>

...
</body>

最初に表示したいファイルが"page.html"ならpage="page.html"でよいぞ

ページの変更

ナビゲータのpage属性を変更してあげるといいぞ
JSから任意のイベントに実装してあげよう

// 任意のページを開いたとき
document.addEventListener('init', function(event) {
  var page = event.target;

  // 開いたページによって処理を分ける
  if (page.id === 'page1') {
    // push-button クラスを持ったボタンとかが押されたとき
    page.querySelector('#push-button').onclick = function() {
      // page2に遷移するぞ
      document.querySelector('#my-navigator').pushPage('page2.html', {data: {title: 'Page 2'}});
    };
});
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0