SimpleDialog2でモバイル用のダイアログを実装する

jQuery Mobileのプラグインである’SimpleDialog2‘を使って、モバイル画面用のダイアログを実装する。普通にダイアログを実現するには、
・page-role=”dialog”を指定してページを作成し、$.mobile.changePage()でそのページを開く
・page-role=”page”を指定してページを作成し、リンク(data-rel=”dialog”を指定)としてそのページを開く
とするが、やや使いづらいのでプラグインを使うのが簡単だ。
SimpleDialog2は、ダイアログ用のHTMLをあらかじめ記述しておく必要がない点が優れている。(プラグインが内部でHTMLのDOMを操作し、閉じたときに元の状態に戻してくれる。)

• CSS/jsファイルをロードする

<!-- HTML -->
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" />
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>

ダウンロードページを参照のこと。CDNも用意されている。

• ダイアログを初期化して開く

// JavaScript
$(document).simpledialog2({
  mode: 'button',
  headerText: headerText,
  headerClose: true,
  buttonPrompt: bodyText,
  buttons : {
    'OK': {
      click: function () {
        funcOK(); // OKボタンがクリックされたときの動作
      }
    }
  }
});

このコードを実行すると、指定されたオプション(OKボタンのみのダイアログ)で初期化してダイアログを開く。

• ユーティリティとしてまとめる

// JavaScript
function openDialogOK(headerText, bodyText, funcOK){
  // OKボタンのみのダイアログ
}
function openDialogOKCancel(headerText, bodyText, funcOK, funcCancel){
  // OK/Cancelボタンのダイアログ
}
function openDialogInput(headerText, bodyText, funcOK){
  // テキスト入力可能なダイアログ
}

上記の3種のダイアログ用の関数を作成した。使い方は以下のとおり。

// JavaScript
function handle0(){
  // ダイアログを開く
  // OKボタンがクリックされたら、funcOK0を実行する
  openDialogOK('Confirm', 'Please Confirm', funcOK0);
}
function handle1(){
  // OKボタンがクリックされたら、funcOK1()を実行する
  // Cancelボタンがクリックされたら、funcCancel1()を実行する
  openDialogOKCancel('Click One', 'Please Choose One', funcOK1, funcCancel1);
  // 非同期処理されるので、ここにコードを書いてもダイアログクローズ前に実行される
}
function handle2(){
  // テキストを入力しOKボタンがクリックされたら、funcOK2()を実行する
  // funcOK2()は入力結果をパラメータとして受け取る
  openDialogInput('Input text', 'Please input text', funcOK2);
}
function funcOK2(text){
  // パラメータtextに入力内容がセットされている
  $('#pDialogOutput2').text(text);
}

• 実行例

・初期画面

・OKダイアログ

・OK/Cancelダイアログ

・Inputダイアログ

・Inputダイアログ(クローズ後)