ons-dialog

現在のスクリーンにダイアログを表示します。

使い方 #

<script>
  ons.ready(function() {
    ons.createDialog('dialog.html').then(function(dialog) {
      dialog.show();
    });
  });
</script>

<script type="text/ons-template" id="dialog.html">
  <ons-dialog cancelable>
    ...
  </ons-dialog>
</script>

実例 #

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

関連情報 #

属性 #

名前 型 / デフォルト値 概要
var String このダイアログを参照するための名前を指定します。 Optional
modifier String ダイアログの表現を指定します。 Optional
cancelable この属性があると、ダイアログが表示された時に、背景やバックボタンをタップした時にダイアログを閉じます。 Optional
disabled この属性がある時、ダイアログはdisabled状態になります。 Optional
animation String
default
ダイアログを表示する際のアニメーション名を指定します。"none"もしくは"default"を指定できます。 Optional
mask-color String
rgba(0, 0, 0, 0.2)
背景のマスクの色を指定します。"rgba(0, 0, 0, 0.2)"がデフォルト値です。 Optional
ons-preshow Expression "preshow"イベントが発火された時の挙動を独自に指定できます。 Optional
ons-prehide Expression "prehide"イベントが発火された時の挙動を独自に指定できます。 Optional
ons-postshow Expression "postshow"イベントが発火された時の挙動を独自に指定できます。 Optional
ons-posthide Expression "posthide"イベントが発火された時の挙動を独自に指定できます。 Optional
ons-destroy Expression "destroy"イベントが発火された時の挙動を独自に指定できます。 Optional

メソッド概要 #

シグネチャ 概要
show([options]) ダイアログを開きます。
hide([options]) ダイアログを閉じます。
isShown() ダイアログが表示されているかどうかを返します。
destroy() ダイアログを破棄して、DOMツリーから取り除きます。
getDeviceBackButtonHandler() バックボタンハンドラを取得します。デフォルトの挙動を変更することができます。
setCancelable(cancelable) ダイアログを表示した際に、ユーザがそのダイアログをキャンセルできるかどうかを指定します。
isCancelable() このダイアログがキャンセル可能かどうかを返します。
setDisabled(disabled) このダイアログをdisabled状態にするかどうかを設定します。
isDisabled() このダイアログがdisabled状態かどうかを返します。
on(eventName, listener) イベントリスナーを追加します。
once(eventName, listener) 一度だけ呼び出されるイベントリスナを追加します。
off(eventName, [listener]) イベントリスナーを削除します。もしイベントリスナーが指定されなかった場合には、そのイベントに紐付いているイベントリスナーが全て削除されます。

イベント概要 #

名前 概要
preshow ダイアログが表示される直前に発火します。
postshow ダイアログが表示された直後に発火します。
prehide ダイアログが隠れる直前に発火します。
posthide ダイアログが隠れた後に発火します。

メソッド

show([options]) #

ダイアログを開きます。

パラメーター
名前 概要
options Object オプションを指定するオブジェクト。
options.animation String アニメーション名を指定します。"none", "fade", "slide"のいずれかを指定します。
options.callback Function ダイアログが表示され終わった後に呼び出される関数オブジェクトを指定します。

hide([options]) #

ダイアログを閉じます。

パラメーター
名前 概要
options Object オプションを指定するオブジェクト。
options.animation String アニメーション名を指定します。"none", "fade", "slide"のいずれかを指定できます。
options.callback Function ダイアログが隠れた後に呼び出される関数オブジェクトを指定します。

isShown(): Boolean #

ダイアログが表示されているかどうかを返します。

返り値: ダイアログが表示されている場合にtrueを返します。

destroy() #

ダイアログを破棄して、DOMツリーから取り除きます。

getDeviceBackButtonHandler(): Object #

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

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

setCancelable(cancelable) #

ダイアログを表示した際に、ユーザがそのダイアログをキャンセルできるかどうかを指定します。

パラメーター
名前 概要
cancelable Boolean ダイアログをキャンセル可能にする場合trueを指定します。

isCancelable(): Boolean #

このダイアログがキャンセル可能かどうかを返します。

返り値: ダイアログがキャンセル可能な場合trueを返します。

setDisabled(disabled) #

このダイアログをdisabled状態にするかどうかを設定します。

パラメーター
名前 概要
disabled Boolean trueを指定するとダイアログをdisabled状態になります。

isDisabled(): Boolean #

このダイアログがdisabled状態かどうかを返します。

返り値: ダイアログがdisabled状態の場合trueを返します。

on(eventName, listener) #

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

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

once(eventName, listener) #

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

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

off(eventName, [listener]) #

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

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

イベント

preshow #

ダイアログが表示される直前に発火します。

パラメーター
名前 概要
event Object Event object.
event.dialog Object コンポーネントのオブジェクト。
event.cancel Function この関数を実行すると、ダイアログの表示がキャンセルされます。

postshow #

ダイアログが表示された直後に発火します。

パラメーター
名前 概要
event Object Event object.
event.dialog Object コンポーネントのオブジェクト。

prehide #

ダイアログが隠れる直前に発火します。

パラメーター
名前 概要
event Object Event object.
event.dialog Object コンポーネントのオブジェクト。
event.cancel Function この関数を実行すると、ダイアログの非表示がキャンセルされます。

posthide #

ダイアログが隠れた後に発火します。

パラメーター
名前 概要
event Object Event object.
event.dialog Object コンポーネントのオブジェクト。

議論 #