[jQuery Mobile]ダイアログ
jQuery Mobileにおけるダイアログの扱いはウインドウではなくページ。 なので通常のページと同様に扱える。ダイアログウインドウを出す。じゃなくダイアログページに遷移する。的な。
HTMLに直接記述する場合
hrefをファイルにすれば外のページもダイアログとして表示できる。
HTML
- <div id="Contents" data-role="page">
- <header data-role="header">
- <h2>ダイアログテスト</h2>
- </header>
- <div data-role="content">
- <a href="#DialogContents" data-rel="dialog" data-transition="pop">ダイアログ</a>
- </div>
- </div>
- <div id="DialogContents" data-role="page">
- <header data-role="header">
- <h2>ダイアログのヘッダ</h2>
- </header>
- <div data-role="content">
- <p>コンテンツ</p>
- </div>
- </div>
ダイアログを動的に生成したい場合
こういうことはあまりやらないとおもいますが。
Javascript
- $(document).bind('pageinit', function(e){
- $('#DialogButton').bind('vclick', function(e){
- // ダイアログの内容。
- var dialog_html = ['<div data-role="page" id="DialogTest">',
- '<div data-role="header"><h3>ヘッダ</h3></div>',
- '<div data-role="content"><p>ダイアログ 生成てすと</p></div>',
- '</div>'].join('');
- // DOMに追加
- $('body').append($(dialog_html));
- // ダイアログを表示させる。
- $.mobile.changePage('#DialogTest', {
- transition: 'pop',
- role: 'dialog',
- });
- });
- });
HTML
- <button id="DialogButton">クリック meeeeeee!!!</button>
上記のようにDOMに追加した場合、ダイアログが閉じられた時に削除しないとイベント発生の度に追加されてしまう。 なので閉じられた時に削除をしたいわけだが、ダイアログも通常のページと同じということで、独自のイベントをトリガするわけでもなさそう。
なのでpagehideイベントを監視する。 pagehideはページ遷移の度に発生するので、動的に生成したダイアログだった場合という判定が必要になる。
Javascript
- $(document).bind('pagehide', function(e, ui){
- if ($(e.target).attr('id') === 'DialogTest') {
- $(e.target).remove();
- }
- });
ダイアログテスト2。もっといい方法がありそうだけど。
iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)
作者:たにぐちまこと | 価格:￥ 2,499
| 投稿日 | 2012年1月26日 01:47 |
|---|---|
| カテゴリ | JavaScript |
| タグ | jQuery | jQuery Mobile |
| トラックバック URL | http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1259 |