jQuery Mobile ダイアログを設置する
公開日：2014年10月15日
最終更新日：2014年11月8日
ダイアログは何かユーザーにメッセージを伝えるときや、必要なアクションをとってもらうときに有効な手段です。jQuery Mobile ではアンカーリンクにデータ属性を指定するだけで、リンク先をダイアログとして表示させることができます。
«次の特集記事» jQuery Mobile ポップアップを設置する基本
«前の特集記事» jQuery Mobile さまざまなスタイルのリスト例
【コンテンツ】
【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5
使用するデータ属性
| データ属性 | 値 | 説明 |
|---|---|---|
| data-close-btn | left | right | none | 閉じるボタンの表示位置 |
| data-close-btn-text | string | 閉じるボタンのテキスト デフォルトは "close" |
| data-corners | true | false | ダイアログに角丸をつけるかどうか |
| data-dom-cache | true | false | DOMツリーにページをキャッシュしておくかどうか |
| data-overlay-theme | swatch letter (a-z) | ダイアログのオーバーレイ(背景)に適用するスウォッチ |
| data-theme | swatch letter (a-z) | 適用するスウォッチ |
| data-title | string | ダイアログのタイトル |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | ダイアログが現れるとき/消えるときのエフェクト設定 |
| data-rel | back | ダイアログを閉じるリンクの指定 |
data-role="dialog" をページに指定する方法
ダイアログを作成する方法は２つあります。
１つはページコンテナである「data-role="page"」を指定したdiv要素に、
「data-dialog="true"」と指定する方法です。
この方法については以下の記事で解説していますので、そちらを参照してください。
「jQuery Mobile １つのHTMLファイルに複数ページを記述する」
data-rel="dialog" をリンクに指定する方法
ダイアログを作成するもう１つの方法は、「data-rel="dialog"」をリンクに指定する方法です。この方法ではリンク先のページがどんなページでも、ダイアログとして表示させることができます。
閉じるボタンの位置変更
デフォルトでは「×」の形をした閉じるボタンがダイアログの左上に表示されます。
data-close-btn属性をダイアログページのコンテナ要素に指定することで、閉じるボタンを右上に表示したり表示なしにすることができます。"right" で右上、"none" でなしになります。
もし表示なしにした場合は、ダイアログを閉じる手段としてリンクに「data-rel="back"」を指定したボタンを設けます。
ページ切り替え時のエフェクト指定
ダイアログが現れるとき、あるいは消えるときにどのようなエフェクトで切り替わるか指定できます。
ダイアログを表示するリンクに、data-transition属性で指定します。
デフォルトは "pop" ですが、"slidedown" や "flip" を指定できます。値は「使用するデータ属性」の表を参照してください。
以下はリンク先をダイアログで開くコード例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div data-role="page" id="top"> <div data-role="header"> <h1>DEMOページ</h1> </div> <div role="main" class="ui-content"> <p>ここはトップページです</p> <a href="#sub" data-rel="dialog" data-transition="slidedown">ダイアログを表示 »</a> </div> <div data-role="footer"> <p> Copyright (C) Web制作・運用 Tips アーカイブ</p> </div> </div> <div data-role="page" id="sub" data-close-btn="right"> <div data-role="header"> <h1>ダイアログ</h1> </div> <div data-role="main" class="ui-content"> <p>ダイアログを表示しています</p> <a href="#" data-role="button" data-rel="back">閉じる</a> </div> </div> |
ダイアログウィジェットはバージョン1.4では非推奨になっています。今後はポップアップウィジェットを使ってダイアログを実装することが推奨されています。
«次の特集記事» jQuery Mobile ポップアップを設置する基本
«前の特集記事» jQuery Mobile さまざまなスタイルのリスト例
スポンサーリンク
