HOME>WEBプログラム覚書>[jQuery Mobile]ダイアログ

[jQuery Mobile]ダイアログ

jQuery Mobileにおけるダイアログの扱いはウインドウではなくページ。 なので通常のページと同様に扱える。ダイアログウインドウを出す。じゃなくダイアログページに遷移する。的な。

HTMLに直接記述する場合

hrefをファイルにすれば外のページもダイアログとして表示できる。

  1. <div id="Contents" data-role="page">
  2.     <header data-role="header">
  3.         <h2>ダイアログテスト</h2>
  4.     </header>
  5.     <div data-role="content">
  6.         <a href="#DialogContents" data-rel="dialog" data-transition="pop">ダイアログ</a>
  7.     </div>
  8. </div>
  9.  
  10. <div id="DialogContents" data-role="page">
  11.     <header data-role="header">
  12.     <h2>ダイアログのヘッダ</h2>
  13.     </header>
  14.     <div data-role="content">
  15.         <p>コンテンツ</p>
  16.     </div>
  17. </div>
  18.  

ダイアログを動的に生成したい場合

こういうことはあまりやらないとおもいますが。

Javascript

  1. $(document).bind('pageinit', function(e){
  2.     $('#DialogButton').bind('vclick', function(e){
  3.         // ダイアログの内容。
  4.         var dialog_html = ['<div data-role="page" id="DialogTest">',
  5.                                 '<div data-role="header"><h3>ヘッダ</h3></div>',
  6.                                 '<div data-role="content"><p>ダイアログ 生成てすと</p></div>',
  7.                             '</div>'].join('');
  8.         // DOMに追加
  9.         $('body').append($(dialog_html));
  10.        
  11.         // ダイアログを表示させる。
  12.         $.mobile.changePage('#DialogTest', {
  13.             transition: 'pop',
  14.             role: 'dialog',
  15.             });
  16.     });
  17. });
  18.  

HTML

  1. <button id="DialogButton">クリック meeeeeee!!!</button>
  2.  

上記のようにDOMに追加した場合、ダイアログが閉じられた時に削除しないとイベント発生の度に追加されてしまう。 なので閉じられた時に削除をしたいわけだが、ダイアログも通常のページと同じということで、独自のイベントをトリガするわけでもなさそう。

なのでpagehideイベントを監視する。 pagehideはページ遷移の度に発生するので、動的に生成したダイアログだった場合という判定が必要になる。

Javascript

実行結果

  1. $(document).bind('pagehide', function(e, ui){
  2.     if ($(e.target).attr('id') === 'DialogTest') {
  3.         $(e.target).remove();
  4.     }
  5. });
  6.  

もっといい方法がありそうだけど。

投稿日 2012年1月26日 01:47
カテゴリ JavaScript
タグ jQuery | jQuery Mobile
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1259

コメント

コメントする
Name
Email Address
URL