Widget.Dialogのconfirm/promptの使い方
alert/confirm/promptの代わりにしようと、Widget.Dialog (旧PPrompt) を使ってみました。
confirm/promptではユーザーの返答を取得するのにコールバック関数を使っているため、
組み込み関数とは少々勝手が違いますので、簡単に使い方を紹介しておきます。
以下、個人的に主に使っているJavaScriptライブラリーdojo toolkitと組み合わせて使う場合で説明しますが、
他のライブラリーを使っている場合も基本的に同じです。
さっそくですが、confirmを<form id="theForm"> のsubmitイベントに設定する場合、次のようになります。
dojo.connect(dojo.byId('theForm'), 'onsubmit', function(event){
try {
Widget.Dialog.confirm('submitします。よろしいですか?', {
onOk : function(){
Widget.Dialog.close();
event.target.submit();
}
, onCancel: function(){
Widget.Dialog.close();
}
});
dojo.stopEvent(event);
} catch(e) {
dojo.stopEvent(event);
console.error(e);
}
});
ポイントとしては、標準のconfirm関数と違って処理が停止せず、ユーザーが応答する前に次の行に進んでしまうことです。
そのため、いったんイベントを停止させる処理を行っておきます。
一方で、ユーザーの返答に対するコールバック関数からsubmitを行うというわけです。
続いて、<a id="theLink" href="http://nonn-et-twk.net/twk/">リンク</a> のonclickイベントに設定する場合の例です。
JavaScriptの、closureから外の変数を参照できる仕様を利用しているので、関数の定義位置を変更したりすると、修正が必要になります。
dojo.connect(dojo.byId('theLink'), 'onclick', function(event){
Widget.Dialog.confirm('リンク先に移動します。よろしいですか?', {
onOk : function(){
Widget.Dialog.close();
location.href = event.target.href;
}
, onCancel: function(){
Widget.Dialog.close();
}
});
dojo.stopEvent(event);
});
formの場合と同様、イベント処理は一旦終了してしまいますが、Okのリンクをクリックした時点で
処理が続行するので、location.hrefを書き換えればOKです。
promptの場合も似たような感じなので色々試してみてください。
なお、このライブラリーはライセンスがGPLなのでご注意ください。
Trackback URL for this post:
前回に続きWidget.Dialogです。
Widget.Dialogでは、メッセージが長くなった場合に、heightを固定で渡さないと、
ボタンやメッセージがダイアログ部分からはみ出てしまいます。
heightを渡さなくて


