Onsen UIのalert・dialog・modal・popoverの使い分け

2016.06.19

alert・dialog・modal・popoverの使い分けがよく分からなかったので、試してみました。

alert

アラートダイアログには通常のアラートダイアログ、確認ダイアログ、入力ダイアログの3種類があります。

HTML

<ons-navigator var="myNavigator">
	<ons-page>
		<div class="contents">
			<ons-list>
				<ons-list-item modifier="chevron" ng-click="alert1()">alert</ons-list-item>
				<ons-list-item modifier="chevron" ng-click="alert2()">confirm()</ons-list-item>
				<ons-list-item modifier="chevron" ng-click="alert3()">confirm() 選択肢4つ</ons-list-item>
				<ons-list-item modifier="chevron" ng-click="alert4()">prompt()</ons-list-item>
			</ons-list>
		</div>
	</ons-page>
</ons-navigator>

JavaScript

var app = angular.module('app', ['onsen']);
app.controller('app_Ctrl', function($scope) {
	// アラートダイアログの表示
	$scope.alert1 = function() {
		ons.notification.alert({
			title: 'アラートタイトル',
			messageHTML: 'アラートメッセージ',
			buttonLabel: 'OK',
			animation: 'default',
			callback: function() {
				console.log('alertのコールバック');
			}
		})
	}

	// 確認ダイアログの表示
	$scope.alert2 = function() {
		ons.notification.confirm({
			title: '確認タイトル',
			messageHTML: '確認メッセージ',
			buttonLabels: ['No', 'Yes'],
			animation: 'default',
			cancelable: true,
			callback: function(index) {
				if(index == -1) {
					console.log('confirmのコールバック:キャンセル');
				} else if(index == 0) {
					console.log('confirmのコールバック:No');
				} else if(index == 1) {
					console.log('confirmのコールバック:Yes');
				}
			}
		})
	}

	// 確認ダイアログの3つ以上の選択肢
	$scope.alert3 = function() {
		ons.notification.confirm({
			title: '確認タイトル',
			messageHTML: '確認メッセージ',
			buttonLabels: ['Answer1', 'Answer2', 'Answer3', 'Answer4'],
			animation: 'default',
			cancelable: false,
			callback: function(index) {
				if(index == 0) {
					console.log('confirmのコールバック:Answer1');
				} else if(index == 1) {
					console.log('confirmのコールバック:Answer2');
				} else if(index == 2) {
					console.log('confirmのコールバック:Answer3');
				} else if(index == 3) {
					console.log('confirmのコールバック:Answer4');
				}
			}
		})
	}

	// 入力ダイアログの表示
	$scope.alert4 = function() {
		ons.notification.prompt({
			title: '入力タイトル',
			messageHTML: '入力メッセージ',
			buttonLabel: 'Yes',
			animation: 'default',
			callback: function(str) {
				console.log(str);
			}
		})
	}
});

alertのデモページ

notification.alert(options) アラートダイアログを表示。
notification.confirm(options) 確認ダイアログを表示。
notification.prompt(options) 入力ダイアログを表示。

　

上記では簡単な設定でアラートダイアログを表示しましたが、カスタマイズしたアラートダイアログを作ったり、用意されているイベントやメソッドを使用することもできます。

HTML

<ons-navigator var="myNavigator">
	<ons-page>
		<div class="contents">
			<ons-list>
				<ons-list-item modifier="chevron" ng-click="customAlertShow()">show</ons-list-item>
				<ons-list-item modifier="chevron" ng-click="customAlertSetCancelable()">setCancelable</ons-list-item>
				<ons-list-item modifier="chevron" ng-click="customAlertSetDisabled()">setDisabled</ons-list-item>
			</ons-list>

			<ons-template id="custom-alert.html">
				<ons-alert-dialog var="customAlert" cancelable disabled mask-color="rgba(0, 0, 0, 0.8)">
					<div class="alert-dialog-title">カスタムアラートタイトル</div>
					<div class="alert-dialog-content">カスタムアラートメッセージ</div>
					<ons-list>
						<ons-list-item modifier="chevron" ng-click="customAlertIsShown()">isShown</ons-list-item>
						<ons-list-item modifier="chevron" ng-click="customAlertDestroy()">destroy</ons-list-item>
					</ons-list>
					<div class="alert-dialog-footer">
						<button class="alert-dialog-button" ng-click="customAlertHide()">OK</button>
					</div>
				</ons-alert-dialog>
			</ons-template>
		</div>
	</ons-page>
</ons-navigator>

JavaScript

var app = angular.module('app', ['onsen']);
app.controller('app_Ctrl', function($scope) {
	// 表示
	$scope.customAlertShow = function() {
		customAlert.show();
	}
	// 非表示
	$scope.customAlertHide = function() {
		customAlert.hide();
	}
	// 表示されているかどうか
	$scope.customAlertIsShown = function() {
		console.log(customAlert.isShown());
	}
	// キャンセルできるかどうかの設定(背景タップ)
	$scope.customAlertSetCancelable = function() {
		if(customAlert.isCancelable()) {
			customAlert.setCancelable(false);
		} else {
			customAlert.setCancelable(true);
		}
	}
	// disabled状態にするかどうかの設定
	$scope.customAlertSetDisabled = function() {
		if(customAlert.isDisabled()) {
			customAlert.setDisabled(false);
		} else {
			customAlert.setDisabled(true);
		}
	}
	// 破棄
	$scope.customAlertDestroy = function() {
		customAlert.destroy();
	}

	var showCount = 0;
	ons.ready(function() {
		// 読み込み
		ons.createAlertDialog('custom-alert.html').then(function(customAlert) {
			// 表示前
			customAlert.on('preshow', function(e) {
				showCount++;
				console.group('preshow');
				console.log(e.alertDialog);
				console.groupEnd();

				// 3回目の表示をキャンセル
				if(showCount == 3) {
					console.log('cancel');
					e.cancel();
				}
			});

			// 表示後
			customAlert.on('postshow', function(e) {
				console.group('postshow');
				console.log(e.alertDialog);
				console.groupEnd();
			});

			// 非表示前
			customAlert.on('prehide', function(e) {
				console.group('prehide');
				console.log(e.alertDialog);
				console.groupEnd();
			});

			// 非表示後
			customAlert.on('posthide', function(e) {
				console.group('posthide');
				console.log(e.alertDialog);
				console.groupEnd();
			});
		});
	});
});

alertのデモページ2

createAlertDialog(template) カスタマイズしたアラートダイアログを読み込み。
show([options]) アラートダイアログを表示。
hide([options]) アラートダイアログを非表示。
isShown() アラートダイアログが表示されているかどうかを返す。
isCancelable() アラートダイアログがキャンセル可能かどうかを返す。
setCancelable(boolean) アラートダイアログをキャンセルできるかどうかを設定。
isDisabled() アラートダイアログがdisabled状態かどうかを返す。
setDisabled(boolean) アラートダイアログをdisabled状態にするかどうかを設定。
destroy() アラートダイアログを破棄。
preshow アラートダイアログが表示される前に発火。
postshow アラートダイアログが表示された後に発火。
prehide アラートダイアログが非表示になる前に発火。
posthide アラートダイアログが非表示になった後に発火。

　

dialog

ダイアログは汎用的なダイアログの表示に使用できます。

HTML

<ons-navigator var="myNavigator">
	<ons-page>
		<div class="contents">
			<ons-list>
				<ons-list-item modifier="chevron" ng-click="dialogShow()">show</ons-list-item>
				<ons-list-item modifier="chevron" ng-click="dialogSetCancelable()">setCancelable</ons-list-item>
				<ons-list-item modifier="chevron" ng-click="dialogSetDisabled()">setDisabled</ons-list-item>
			</ons-list>

			<ons-template id="dialog.html">
				<ons-dialog var="dialog" cancelable disabled mask-color="rgba(255, 0, 0, 0.2)">
					<ons-list>
						<ons-list-item modifier="chevron" ng-click="dialogIsShown()">isShown</ons-list-item>
						<ons-list-item modifier="chevron" ng-click="dialogDestroy()">destroy</ons-list-item>
					</ons-list>
					<ons-button ng-click="dialogHide()">hide()</ons-button>
				</ons-dialog>
			</ons-template>
		</div>
	</ons-page>
</ons-navigator>

JavaScript

var app = angular.module('app', ['onsen']);
app.controller('app_Ctrl', function($scope) {
	// 表示
	$scope.dialogShow = function() {
		dialog.show();
	}
	// 非表示
	$scope.dialogHide = function() {
		dialog.hide();
	}
	// 表示されているかどうか
	$scope.dialogIsShown = function() {
		console.log(dialog.isShown());
	}
	// キャンセルできるかどうかの設定(背景タップ)
	$scope.dialogSetCancelable = function() {
		if(dialog.isCancelable()) {
			dialog.setCancelable(false);
		} else {
			dialog.setCancelable(true);
		}
	}
	// disabled状態にするかどうかの設定
	$scope.dialogSetDisabled = function() {
		if(dialog.isDisabled()) {
			dialog.setDisabled(false);
		} else {
			dialog.setDisabled(true);
		}
	}
	// 破棄
	$scope.dialogDestroy = function() {
		dialog.destroy();
	}

	var showCount = 0;
	ons.ready(function() {
		// 読み込み
		ons.createDialog('dialog.html').then(function(dialog) {
			// 表示前
			dialog.on('preshow', function(e) {
				showCount++;
				console.group('preshow');
				console.log(e.dialog);
				console.groupEnd();

				// 3回目の表示をキャンセル
				if(showCount == 3) {
					console.log('cancel');
					e.cancel();
				}
			});

			// 表示後
			dialog.on('postshow', function(e) {
				console.group('postshow');
				console.log(e.dialog);
				console.groupEnd();
			});

			// 非表示前
			dialog.on('prehide', function(e) {
				console.group('prehide');
				console.log(e.dialog);
				console.groupEnd();
			});

			// 非表示後
			dialog.on('posthide', function(e) {
				console.group('posthide');
				console.log(e.dialog);
				console.groupEnd();
			});
		});
	});
});

dialogのデモページ

createDialog(template) ダイアログを読み込み。
show([options]) ダイアログを表示。
hide([options]) ダイアログを非表示。
isShown() ダイアログが表示されているかどうかを返す。
isCancelable() ダイアログがキャンセル可能かどうかを返す。
setCancelable(boolean) ダイアログをキャンセルできるかどうかを設定。
isDisabled() ダイアログがdisabled状態かどうかを返す。
setDisabled(boolean) ダイアログをdisabled状態にするかどうかを設定。
destroy() ダイアログを破棄。
preshow ダイアログが表示される前に発火。
postshow ダイアログが表示された後に発火。
prehide ダイアログが非表示になる前に発火。
posthide ダイアログが非表示になった後に発火。

　

modal

モーダルはダイアログと違い、表示中は外の入力操作ができなくなります。
プログレスバーの表示やユーザーの選択を確実に行いたい場合などに使用するようです。

HTML

<ons-navigator var="myNavigator">
	<ons-page>
		<div class="contents">
			<ons-button ng-click="modalShow()">show</ons-button>
			<ons-button ng-click="modalToggle()">toggle</ons-button>

			<ons-modal var="modal">
				<div>モーダル内容</div>
				<ons-button ng-click="modalHide()">hide</ons-button>
			</ons-modal>
		</div>
	</ons-page>
</ons-navigator>

JavaScript

var app = angular.module('app', ['onsen']);
app.controller('app_Ctrl', function($scope, $interval) {
	// 表示
	$scope.modalShow = function() {
		modal.show();
	}
	// 非表示
	$scope.modalHide = function() {
		modal.hide();
	}
	// 表示・非表示の切り替え
	$scope.modalToggle = function() {
		$interval(function() {
			modal.toggle();
		}, 1000);
	}
});

modalのデモページ

show() モーダルを表示。
hide() モーダルを非表示。
toggle() モーダルの表示を切り替え。

　

popover

ポップオーバーは指定した要素に対してツールチップのような表示をします。

HTML

<ons-navigator var="myNavigator">
	<ons-page>
		<div class="contents">
			<ons-list>
				<ons-list-item modifier="chevron" ng-click="popoverShow()">show</ons-list-item>
				<ons-list-item modifier="chevron" ng-click="popoverSetCancelable()">setCancelable</ons-list-item>
			</ons-list>

			<p id="description">コンテンツ内容</p>

			<ons-template id="popover.html">
				<ons-popover var="popover">
					<ons-page>
						<div>ポップオーバーの内容</div>
						<ons-button ng-click="popoverIsShown()">isShown()</ons-button>
						<ons-button ng-click="popoverDestroy()">destroy()</ons-button>
						<ons-button ng-click="popoverHide()">hide()</ons-button>
					</ons-page>
				</ons-popover>
			</ons-template>
		</div>
	</ons-page>
</ons-navigator>

JavaScript

var app = angular.module('app', ['onsen']);
app.controller('app_Ctrl', function($scope) {
	// 表示
	$scope.popoverShow = function() {
		popover.show('#description');
	}
	// 非表示
	$scope.popoverHide = function() {
		popover.hide();
	}
	// 表示されているかどうか
	$scope.popoverIsShown = function() {
		console.log(popover.isShown());
	}
	// キャンセルできるかどうかの設定(背景タップ)
	$scope.popoverSetCancelable = function() {
		if(popover.isCancelable()) {
			popover.setCancelable(false);
		} else {
			popover.setCancelable(true);
		}
	}
	// 破棄
	$scope.popoverDestroy = function() {
		popover.destroy();
	}

	var showCount = 0;
	ons.ready(function() {
		// 読み込み
		ons.createPopover('popover.html').then(function(popover) {
			// 表示前
			popover.on('preshow', function(e) {
				showCount++;
				console.group('preshow');
				console.log(e.popover);
				console.groupEnd();

				// 3回目の表示をキャンセル
				if(showCount == 3) {
					console.log('cancel');
					e.cancel();
				}
			});

			// 表示後
			popover.on('postshow', function(e) {
				console.group('postshow');
				console.log(e.popover);
				console.groupEnd();
			});

			// 非表示前
			popover.on('prehide', function(e) {
				console.group('prehide');
				console.log(e.popover);
				console.groupEnd();
			});

			// 非表示後
			popover.on('posthide', function(e) {
				console.group('posthide');
				console.log(e.popover);
				console.groupEnd();
			});
		});
	});
});

popoverのデモページ
　

表示の方向はdirectionを設定することで指定できます。

HTML

<ons-navigator var="myNavigator">
	<ons-page>
		<div class="contents">
			<ons-list>
				<ons-list-item modifier="chevron" ng-click="popoverShow1()">direction="up"</ons-list-item>
				<ons-list-item modifier="chevron" ng-click="popoverShow2()">direction="down"</ons-list-item>
				<ons-list-item modifier="chevron" ng-click="popoverShow3()">direction="left"</ons-list-item>
				<ons-list-item modifier="chevron" ng-click="popoverShow4()">direction="right"</ons-list-item>
			</ons-list>

			<div id="description2"></div>

			<ons-template id="popover1.html">
				<ons-popover var="popover1" direction="up">
					<ons-page>
						<div>ポップオーバー1</div>
						<ons-button ng-click="popover1.hide();">hide()</ons-button>
					</ons-page>
				</ons-popover>
			</ons-template>

			<ons-template id="popover2.html">
				<ons-popover var="popover2" direction="down">
					<ons-page>
						<div>ポップオーバー2</div>
						<ons-button ng-click="popover2.hide();">hide()</ons-button>
					</ons-page>
				</ons-popover>
			</ons-template>

			<ons-template id="popover3.html">
				<ons-popover var="popover3" direction="left">
					<ons-page>
						<div class="pop-left">
							<div>ポップオーバー3</div>
							<ons-button ng-click="popover3.hide();">hide()</ons-button>
						</div>
					</ons-page>
				</ons-popover>
			</ons-template>

			<ons-template id="popover4.html">
				<ons-popover var="popover4" direction="right">
					<ons-page>
						<div>ポップオーバー4</div>
						<ons-button ng-click="popover4.hide();">hide()</ons-button>
					</ons-page>
				</ons-popover>
			</ons-template>
		</div>
	</ons-page>
</ons-navigator>

JavaScript

var app = angular.module('app', ['onsen']);
app.controller('app_Ctrl', function($scope) {
	// 上に表示
	$scope.popoverShow1 = function() {
		popover1.show('#description2');
	}
	// 下に表示
	$scope.popoverShow2 = function() {
		popover2.show('#description2');
	}
	// 左に表示
	$scope.popoverShow3 = function() {
		popover3.show('#description2');
	}
	// 右に表示
	$scope.popoverShow4 = function() {
		popover4.show('#description2');
	}

	ons.ready(function() {
		ons.createPopover('popover1.html');
		ons.createPopover('popover2.html');
		ons.createPopover('popover3.html');
		ons.createPopover('popover4.html');
	});
});

popoverのデモページ2

createPopover(template) ポップオーバーを読み込み。
show(target[, options]) targetの位置にポップオーバーを表示。
hide([options]) ポップオーバーを非表示。
isShown() ポップオーバーが表示されているかどうかを返す。
isCancelable() ポップオーバーがキャンセル可能かどうかを返す。
setCancelable(boolean) ポップオーバーをキャンセルできるかどうかを設定。
destroy() ポップオーバーを破棄。
preshow ポップオーバーが表示される前に発火。
postshow ポップオーバーが表示された後に発火。
prehide ポップオーバーが非表示になる前に発火。
posthide ポップオーバーが非表示になった後に発火。

　

【参考サイト】

　

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2024年10月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
2728293031