View Source Improve this doc

ons-popover

ある要素を対象とするポップオーバーを表示するコンポーネントです。

使い方 # 

<script>
ons.ready(function() {
  ons.createPopover('popover.html').then(function(popover) {
    popover.show('#mybutton');   
  });
});
</script>

<script type="text/ons-template" id="popover.html">
  <ons-popover cancelable>
    <p style="text-align: center; opacity: 0.5;">This popover will choose which side it's displayed on automatically.</p>
  </ons-popover>
</script>

実例 #

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

Open in New Window

属性 #

名前 型 / デフォルト値 概要
var String このポップオーバーを参照するための名前を指定します。 Optional
modifier String ポップオーバーの表現を指定します。 Optional
direction String ポップオーバーを表示する方向を空白区切りで複数指定できます。 指定できる方向は、"up", "down", "left", "right"の4つです。空白区切りで複数指定することもできます。 複数指定された場合、対象とする要素に合わせて指定した値から自動的に選択されます。 Optional
cancelable この属性があると、ポップオーバーが表示された時に、背景やバックボタンをタップした時にをポップオーバー閉じます。 Optional
disabled この属性がある時、ポップオーバーはdisabled状態になります。 Optional
animation String ポップオーバーを表示する際のアニメーション名を指定します。 Optional
mask-color Color 背景のマスクの色を指定します。デフォルトは"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

プリセットのmodifier #

Modifier名 概要
android Androidライクなポップオーバーを表示します。

メソッド概要 #

シグネチャ 概要
show(target, [options]) 対象とする要素にポップオーバーを表示します。target引数には、$eventオブジェクトやDOMエレメントやCSSセレクタを渡すことが出来ます。
hide([options]) ポップオーバーを閉じます。
isShown() ポップオーバーが表示されているかどうかを返します。
destroy() ポップオーバーを破棄して、DOMツリーから取り除きます。
setCancelable(cancelable) ポップオーバーを表示した際に、ユーザがそのポップオーバーをキャンセルできるかどうかを指定します。
isCancelable() このポップオーバーがキャンセル可能かどうかを返します。
setDisabled(disabled) このポップオーバーをdisabled状態にするかどうかを設定します。
isDisabled() このポップオーバーがdisabled状態かどうかを返します。
on(eventName, listener) イベントリスナーを追加します。
once(eventName, listener) 一度だけ呼び出されるイベントリスナーを追加します。
off(eventName, [listener]) イベントリスナーを削除します。もしイベントリスナーを指定しなかった場合には、そのイベントに紐づく全てのイベントリスナーが削除されます。

イベント概要 #

名前 概要
preshow ポップオーバーが表示される直前に発火します。
postshow ポップオーバーが表示された直後に発火します。
prehide ポップオーバーが隠れる直前に発火します。
posthide ポップオーバーが隠れた後に発火します。

メソッド

show(target, [options]) #

対象とする要素にポップオーバーを表示します。target引数には、$eventオブジェクトやDOMエレメントやCSSセレクタを渡すことが出来ます。

パラメーター
名前 型 概要
target String|Event|HTMLElement ポップオーバーのターゲットとなる要素を指定します。CSSセレクタかeventオブジェクトかDOM要素のいずれかを渡せます。
options Object オプションを指定するオブジェクト。
options.animation String アニメーション名を指定します。"fade"もしくは"none"を指定できます。

hide([options]) #

ポップオーバーを閉じます。

パラメーター
名前 型 概要
options Object オプションを指定するオブジェクト。
options.animation String アニメーション名を指定します。"fade"もしくは"none"を指定できます。

isShown(): Boolean #

ポップオーバーが表示されているかどうかを返します。

返り値: ポップオーバーが表示されている場合にtrueとなります。

destroy() #

ポップオーバーを破棄して、DOMツリーから取り除きます。

setCancelable(cancelable) #

ポップオーバーを表示した際に、ユーザがそのポップオーバーをキャンセルできるかどうかを指定します。

パラメーター
名前 型 概要
cancelable Boolean ポップオーバーがキャンセル可能にしたい場合にtrueを指定します。

isCancelable(): Boolean #

このポップオーバーがキャンセル可能かどうかを返します。

返り値: ポップオーバーがキャンセル可能であればtrueとなります。

setDisabled(disabled) #

このポップオーバーをdisabled状態にするかどうかを設定します。

パラメーター
名前 型 概要
disabled Boolean ポップオーバーをdisabled状態にしたい場合にはtrueを指定します。

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.popover Object コンポーネントのオブジェクト。
event.cancel Function この関数を呼び出すと、ポップオーバーの表示がキャンセルされます。

postshow #

ポップオーバーが表示された直後に発火します。

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

prehide #

ポップオーバーが隠れる直前に発火します。

パラメーター
名前 型 概要
event Object Event object.
event.popover Object コンポーネントのオブジェクト。
event.cancel Function この関数を呼び出すと、ポップオーバーが隠れる処理をキャンセルします。

posthide #

ポップオーバーが隠れた後に発火します。

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

議論 #