jQuery Mobile ダイアログを設置する

ダイアログは何かユーザーにメッセージを伝えるときや、必要なアクションをとってもらうときに有効な手段です。jQuery Mobile ではアンカーリンクにデータ属性を指定するだけで、リンク先をダイアログとして表示させることができます。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. 使用するデータ属性
  2. data-role="dialog" をページに指定する方法
  3. data-rel="dialog" をリンクに指定する方法

【記事執筆時の環境】
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" をページに指定する方法

ダイアログを作成する方法は2つあります。
1つはページコンテナである「data-role="page"」を指定したdiv要素に、
「data-dialog="true"」と指定する方法です。

この方法については以下の記事で解説していますので、そちらを参照してください。
「jQuery Mobile 1つのHTMLファイルに複数ページを記述する」

data-rel="dialog" をリンクに指定する方法

ダイアログを作成するもう1つの方法は、「data-rel="dialog"」をリンクに指定する方法です。この方法ではリンク先のページがどんなページでも、ダイアログとして表示させることができます。

閉じるボタンの位置変更

デフォルトでは「×」の形をした閉じるボタンがダイアログの左上に表示されます。
data-close-btn属性をダイアログページのコンテナ要素に指定することで、閉じるボタンを右上に表示したり表示なしにすることができます。"right" で右上、"none" でなしになります。

もし表示なしにした場合は、ダイアログを閉じる手段としてリンクに「data-rel="back"」を指定したボタンを設けます。

ページ切り替え時のエフェクト指定

ダイアログが現れるとき、あるいは消えるときにどのようなエフェクトで切り替わるか指定できます。
ダイアログを表示するリンクに、data-transition属性で指定します。
デフォルトは "pop" ですが、"slidedown" や "flip" を指定できます。値は「使用するデータ属性」の表を参照してください。

以下はリンク先をダイアログで開くコード例です。

ダイアログウィジェットはバージョン1.4では非推奨になっています。今後はポップアップウィジェットを使ってダイアログを実装することが推奨されています。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ