View Source Improve this doc

ons-navigator

ページスタックの管理とナビゲーション機能を提供するコンポーネント。画面上への出力はありません。

使い方 # 

<ons-navigator animation="slide" var="app.navi">
  <ons-page>
    <ons-toolbar>
      <div class="center">Title</div>
    </ons-toolbar>

    <p style="text-align: center">
      <ons-button modifier="light" ng-click="app.navi.pushPage('page.html');">Push</ons-button>
    </p>
  </ons-page>
</ons-navigator>

<ons-template id="page.html">
  <ons-page>
    <ons-toolbar>
      <div class="center">Title</div>
    </ons-toolbar>

    <p style="text-align: center">
      <ons-button modifier="light" ng-click="app.navi.popPage('page.html');">Pop</ons-button>
    </p>
  </ons-page>
</ons-template>

実例 #

See the Pen Alert, confirm and prompt dialogs by Onsen & Monaca (@onsen) on CodePen.

Open in New Window

関連情報 #

属性 #

名前 型 / デフォルト値 概要
page String ナビゲーターが初期化された時に表示するページを指定します。 Optional
var String このナビゲーターを参照するための名前を指定します。 Optional
ons-prepush Expression "prepush"イベントが発火された時の挙動を独自に指定できます。 Optional
ons-prepop Expression "prepop"イベントが発火された時の挙動を独自に指定できます。 Optional
ons-postpush Expression "postpush"イベントが発火された時の挙動を独自に指定できます。 Optional
ons-postpop Expression "postpop"イベントが発火された時の挙動を独自に指定できます。 Optional
ons-destroy Expression "destroy"イベントが発火された時の挙動を独自に指定できます。 Optional

メソッド概要 #

シグネチャ 概要
pushPage(pageUrl, [options]) 指定したpageUrlを新しいページスタックに追加します。新しいページが表示されます。
insertPage(index, pageUrl, [options]) 指定したpageUrlをページスタックのindexで指定した位置に追加します。
popPage([options]) 現在表示中のページをページスタックから取り除きます。一つ前のページに戻ります。
replacePage(pageUrl, [options]) 現在表示中のページをを指定したページに置き換えます。
resetToPage(pageUrl, [options]) ページスタックをリセットし、指定したページを表示します。
getCurrentPage() 現在のページを取得します。pushPage()やresetToPage()メソッドの引数を取得できます。
getPages() ナビゲーターの持つページスタックの一覧を取得します。
getDeviceBackButtonHandler() バックボタンハンドラを取得します。デフォルトの挙動を変更することができます。
on(eventName, listener) イベントリスナーを追加します。
once(eventName, listener) 一度だけ呼び出されるイベントリスナーを追加します。
off(eventName, [listener]) イベントリスナーを削除します。もしイベントリスナーを指定しなかった場合には、そのイベントに紐づく全てのイベントリスナーが削除されます。

イベント概要 #

名前 概要
prepush pageがpushされる直前に発火されます。
prepop pageがpopされる直前に発火されます。
postpush pageがpushされてアニメーションが終了してから発火されます。
postpop pageがpopされてアニメーションが終わった後に発火されます。

メソッド

pushPage(pageUrl, [options]) #

指定したpageUrlを新しいページスタックに追加します。新しいページが表示されます。

パラメーター
名前 型 概要
pageUrl String pageのURLか、もしくはons-templateで宣言したテンプレートのid属性の値を指定できます。
options Object オプションを指定するオブジェクト。
options.animation String アニメーション名を指定します。"slide", "simpleslide", "lift", "fade", "none"のいずれかを指定できます。
options.onTransitionEnd Function pushPage()による画面遷移が終了した時に呼び出される関数オブジェクトを指定します。

insertPage(index, pageUrl, [options]) #

指定したpageUrlをページスタックのindexで指定した位置に追加します。

パラメーター
名前 型 概要
index Number スタックに挿入する位置のインデックスを指定します。
pageUrl String pageのURLか、もしくはons-templateで宣言したテンプレートのid属性の値を指定できます。
options Object オプションを指定するオブジェクト。
options.animation String アニメーション名を指定します。"slide", "simpleslide", "lift", "fade", "none"のいずれかを指定できます。

popPage([options]) #

現在表示中のページをページスタックから取り除きます。一つ前のページに戻ります。

パラメーター
名前 型 概要
options Object オプションを指定するオブジェクト。
options.animation String アニメーション名を指定します。"slide", "simpleslide", "lift", "fade", "none"のいずれかを指定できます。
options.onTransitionEnd Function このメソッドによる画面遷移が終了した際に呼び出される関数オブジェクトを指定します。

replacePage(pageUrl, [options]) #

現在表示中のページをを指定したページに置き換えます。

パラメーター
名前 型 概要
pageUrl String pageのURLか、もしくはons-templateで宣言したテンプレートのid属性の値を指定できます。
options Object オプションを指定するオブジェクト。
options.animation String アニメーション名を指定できます。"slide", "simpleslide", "lift", "fade", "none"のいずれかを指定できます。
options.onTransitionEnd Function このメソッドによる画面遷移が終了した際に呼び出される関数オブジェクトを指定します。

resetToPage(pageUrl, [options]) #

ページスタックをリセットし、指定したページを表示します。

パラメーター
名前 型 概要
pageUrl String pageのURLか、もしくはons-templateで宣言したテンプレートのid属性の値を指定できます。
options Object オプションを指定するオブジェクト。
options.animation String アニメーション名を指定できます。"slide", "simpleslide", "lift", "fade", "none"のいずれかを指定できます。
options.onTransitionEnd Function このメソッドによる画面遷移が終了した際に呼び出される関数オブジェクトを指定します。

getCurrentPage(): Object #

現在のページを取得します。pushPage()やresetToPage()メソッドの引数を取得できます。

返り値: 現在のpageオブジェクト。

getPages(): List #

ナビゲーターの持つページスタックの一覧を取得します。

返り値: pageオブジェクトの配列。

getDeviceBackButtonHandler(): Object #

バックボタンハンドラを取得します。デフォルトの挙動を変更することができます。

返り値: デバイスのバックボタンハンドラを返します。

on(eventName, listener) #

イベントリスナーを追加します。

パラメーター
名前 型 概要
eventName String イベント名を指定します。
listener Function このイベントが発火された際に呼び出される関数オブジェクトを指定します。

once(eventName, listener) #

一度だけ呼び出されるイベントリスナーを追加します。

パラメーター
名前 型 概要
eventName String イベント名を指定します。
listener Function イベントが発火した際に呼び出される関数オブジェクトを指定します。

off(eventName, [listener]) #

イベントリスナーを削除します。もしイベントリスナーを指定しなかった場合には、そのイベントに紐づく全てのイベントリスナーが削除されます。

パラメーター
名前 型 概要
eventName String イベント名を指定します。
listener Function 削除するイベントリスナーを指定します。

イベント

prepush #

pageがpushされる直前に発火されます。

パラメーター
名前 型 概要
event Object Event object.
event.navigator Object コンポーネントのオブジェクト。
event.currentPage Object 現在のpageオブジェクト。
event.cancel Function この関数を呼び出すと、push処理がキャンセルされます。

prepop #

pageがpopされる直前に発火されます。

パラメーター
名前 型 概要
event Object Event object.
event.navigator Object コンポーネントのオブジェクト。
event.currentPage Object 現在のpageオブジェクト。
event.cancel Function この関数を呼び出すと、pageのpopがキャンセルされます。

postpush #

pageがpushされてアニメーションが終了してから発火されます。

パラメーター
名前 型 概要
event Object Event object.
event.navigator Object コンポーネントのオブジェクト。
event.enterPage Object pushされたpageオブジェクト。
event.leavePage Object 以前のpageオブジェクト。

postpop #

pageがpopされてアニメーションが終わった後に発火されます。

パラメーター
名前 型 概要
event Object Event object.
event.navigator Object コンポーネントのオブジェクト。
event.enterPage Object popされて表示されるページのオブジェクト。
event.leavePage Object popされて消えるページのオブジェクト。

議論 #