View Source Improve this doc

ons-sliding-menu

スライディングメニューを表現するためのコンポーネントで、片方のページが別のページの上にオーバーレイで表示されます。above-pageで指定されたページは、横からスライドして表示します。

使い方 # 

<ons-sliding-menu var="app.menu" main-page="page.html" menu-page="menu.html" max-slide-distance="200px" type="reveal" side="left">
</ons-sliding-menu>

<ons-template id="page.html">
  <ons-page>
   <p style="text-align: center">
     <ons-button ng-click="app.menu.toggleMenu()">Toggle</ons-button>
   </p>
  </ons-page>
</ons-template>

<ons-template id="menu.html">
  <ons-page>
    <!-- menu page's contents -->
  </ons-page>
</ons-template>

実例 #

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

Open in New Window

関連情報 #

属性 #

名前 型 / デフォルト値 概要
var String このスライディングメニューを参照するための名前を指定します。 Optional
menu-page String 左に位置するメニューページのURLを指定します。 Optional
main-page String 右に位置するメインページのURLを指定します。 Optional
swipeable Boolean スワイプ操作を有効にする場合に指定します。 Optional
swipe-target-width String スワイプの判定領域をピクセル単位で指定します。画面の端から指定した距離に達するとページが表示されます。 Optional
max-slide-distance String menu-pageで指定されたページの表示幅を指定します。ピクセルもしくは%の両方で指定できます（例: 90%, 200px） Optional
direction String menu-pageで指定されたページが画面のどちら側から表示されるかを指定します。leftもしくはrightのいずれかを指定できます。 Optional
type String スライディングメニューのアニメーションです。"reveal"（デフォルト）、"push"、"overlay"のいずれかを指定できます。 Optional
ons-preopen Expression "preopen"イベントが発火された時の挙動を独自に指定できます。 Optional
ons-preclose Expression "preclose"イベントが発火された時の挙動を独自に指定できます。 Optional
ons-postopen Expression "postopen"イベントが発火された時の挙動を独自に指定できます。 Optional
ons-postclose Expression "postclose"イベントが発火された時の挙動を独自に指定できます。 Optional
ons-destroy Expression "destroy"イベントが発火された時の挙動を独自に指定できます。 Optional

メソッド概要 #

シグネチャ 概要
setMainPage(pageUrl, [options]) 中央部分に表示されるページをpageUrlに指定します。
setMenuPage(pageUrl, [options]) メニュー部分に表示されるページをpageUrlに指定します。
openMenu([options]) メニューページを表示します。
closeMenu([options]) メニューページを非表示にします。
toggleMenu([options]) 現在の状況に合わせて、メニューページを表示もしくは非表示にします。
isMenuOpened() メニューページが開いている場合はtrue、そうでない場合はfalseを返します。
getDeviceBackButtonHandler() ons-sliding-menuに紐付いているバックボタンハンドラを取得します。
setSwipeable(swipeable) スワイプで開閉するかどうかを設定する。
on(eventName, listener) イベントリスナーを追加します。
once(eventName, listener) 一度だけ呼び出されるイベントリスナーを追加します。
off(eventName, [listener]) イベントリスナーを削除します。もしイベントリスナーを指定しなかった場合には、そのイベントに紐づく全てのイベントリスナーが削除されます。

イベント概要 #

名前 概要
preopen スライディングメニューが開く前に発火します。
postopen スライディングメニューが開き終わった後に発火します。
preclose スライディングメニューが閉じる前に発火します。
postclose スライディングメニューが閉じ終わった後に発火します。

メソッド

setMainPage(pageUrl, [options]) #

中央部分に表示されるページをpageUrlに指定します。

パラメーター
名前 型 概要
pageUrl String pageのURLか、ons-templateで宣言したテンプレートのid属性の値を指定します。
options Object オプションを指定するオブジェクト。
options.closeMenu Boolean trueを指定すると、開いているメニューを閉じます。
options.callback Function ページが読み込まれた後に呼び出される関数オブジェクトを指定します。

setMenuPage(pageUrl, [options]) #

メニュー部分に表示されるページをpageUrlに指定します。

パラメーター
名前 型 概要
pageUrl String pageのURLか、ons-templateで宣言したテンプレートのid属性の値を指定します。
options Object オプションを指定するオブジェクト。
options.closeMenu Boolean trueを指定すると、開いているメニューを閉じます。
options.callback Function メニューページが読み込まれた後に呼び出される関数オブジェクトを指定します。

openMenu([options]) #

メニューページを表示します。

パラメーター
名前 型 概要
options Object オプションを指定するオブジェクト。
options.callback Function メニューが開いた後に呼び出される関数オブジェクトを指定します。

closeMenu([options]) #

メニューページを非表示にします。

パラメーター
名前 型 概要
options Object オプションを指定するオブジェクト。
options.callback Function メニューが閉じられた後に呼び出される関数オブジェクトを指定します。

toggleMenu([options]) #

現在の状況に合わせて、メニューページを表示もしくは非表示にします。

パラメーター
名前 型 概要
options Object オプションを指定するオブジェクト。
options.callback Function メニューが開き終わった後か、閉じ終わった後に呼び出される関数オブジェクトです。

isMenuOpened(): Boolean #

メニューページが開いている場合はtrue、そうでない場合はfalseを返します。

返り値: メニューが開いていればtrueとなります。

getDeviceBackButtonHandler(): Object #

ons-sliding-menuに紐付いているバックボタンハンドラを取得します。

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

setSwipeable(swipeable) #

スワイプで開閉するかどうかを設定する。

パラメーター
名前 型 概要
swipeable Boolean スワイプで開閉できるようにする場合にはtrueを指定します。

on(eventName, listener) #

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

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

once(eventName, listener) #

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

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

off(eventName, [listener]) #

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

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

イベント

preopen #

スライディングメニューが開く前に発火します。

パラメーター
名前 型 概要
event Object イベントオブジェクトです。
event.slidingMenu Object イベントが発火したSlidingMenuオブジェクトです。

postopen #

スライディングメニューが開き終わった後に発火します。

パラメーター
名前 型 概要
event Object イベントオブジェクトです。
event.slidingMenu Object イベントが発火したSlidingMenuオブジェクトです。

preclose #

スライディングメニューが閉じる前に発火します。

パラメーター
名前 型 概要
event Object イベントオブジェクトです。
event.slidingMenu Object イベントが発火したSlidingMenuオブジェクトです。

postclose #

スライディングメニューが閉じ終わった後に発火します。

パラメーター
名前 型 概要
event Object イベントオブジェクトです。
event.slidingMenu Object イベントが発火したSlidingMenuオブジェクトです。

議論 #