*

ダイアログ

公開日: : 最終更新日:2016/04/21 jQueryMobile

ダイアログは、ユーザーに対して警告や注意をひくために、伝えたいことを表示します。ダイアログが表示されると、デフォルトでは背景が別の色に変わってダイアログ以外のウィジェットが操作できなくなります。これを閉じるには左上の「×」か、ブラウザの戻るボタンをクリックします。

ダイアログは以下の順序で作成します。

1.ダイアログに表示する内容をdata-role=”dialog”を追加したタグで囲む。

ダイアログの構成はページとほとんど同じですが、以下の事が異なります。

・data-role属性値は”dialog”を設定する。
・フッタは含まない。

ダイアログが表示されたと、HTML文書のタイトルが元のタイトルタグで囲んだ文字列に変更されます。その後、ダイアログを閉じると、タイトルが直前に表示していたものに戻ります。

2.ダイアログとは異なるページにダイアログへのリンクを作成する。

ダイアログはページとは違い、単独で作成するものではないです。必ずダイアログを開くページと一緒に作成します。今回は、ページ内に作成したリンクにダイアログを設定します。このリンクをクリックするか、タップするとダイアログが開くようにします。

サンプルコードの実行結果はこちら

ダイアログとなる要素にdata-close-btn-text属性を追加すると、×印のツールチップでその値が表示されます。ツールチップはマウスカーソルを×に重ねると表示されます。

ページとダイアログの違い

以下の点です。
・ダイアログを囲むタグにdata-role=”dialog”を付す
・通常はフッタは書かない
・ブラウザの進む・戻るボタンでは表示されない

jQueryMobileのデフォルトだと、ダイアログを閉じた後、ブラウザの進むボタンの操作でページを進めても、ダイアログは表示されません。これはダイアログを表示するときのURLがページとは違うからです。

ダイアログを開くとき、URLの末尾に特殊な文字列が追加されて、ページとは異なるものとしてみなされます。そのためブラウザのボタンでページを進めてもダイアログは表示されません。

ページをダイアログとして表示する

ページをダイアログとして表示するには、ページへのリンク先が設定されたaタグにdata-rel=”dialog”という属性を追加する。

スポンサードリンク

関連記事

no image

data-属性によるウィジェットの設定

テーマの他にもウィジェットにdata-属性を追加して、色々な事ができます。 ウィジェ

記事を読む

no image

コンテンツを表示する

コンテンツはそのページのメインとなる情報を表示する部分です。コンテンツはヘッダとフッタの間に配置しま

記事を読む

no image

ページ(page)とは

jQueryMobileでは、スマートフォンの画面に表示するページ(page)というウィジェットで構

記事を読む

no image

バルーンを表示、項目を分割、折り畳みやポップ内にlistviewを作成する。

バルーンとは、円形の囲みのことで、jQueryMobileでは、その内部に文字列を表示するために、実

記事を読む

no image

項目リストを設定する

項目リスト(listview)は、ふくすうの項目を列挙するためのウィジェットで、項目には文字列や、画

記事を読む

no image

移動しないヘッダ、フッタにIDを設定する

MozillaやWebkitベースのブラウザでは、リンクにdata-transition="slid

記事を読む

no image

テーマを設定する

テーマとは、統一化された各ウィジェットの外観などのデザインの事で、それぞれに名前がついています。同じ

記事を読む

no image

jQueryMobileとフォームを組み合わせてみる

フォーム(user-submittable form)は、HTMLタグでは<form>タ

記事を読む

no image

同じHTML文書に複数ページを作成してみる

jQueryMobileでは、同じHTML文書内に複数ページを作成することができます。手順は以下の通

記事を読む

no image

ページのURLを設定する

ユーザーにページのURLを知らせる時に使用するのがdata-url属性です。 data-url属性

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑