*

ダイアログ

公開日: : 最終更新日: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

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

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだけを選択するウィジェット ラジ

記事を読む

no image

折りたたみを設定する

おりたたみ(collapse)は、予め概要を示す文字列が表示されている領域をクリックかタップすると、

記事を読む

no image

ボタン内にアイコンを表示したり、デザインを変更する

ボタン内にアイコンを表示するには、リンクと同じように、data-icon属性、data-iconpo

記事を読む

no image

テーマを設定する

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

記事を読む

no image

jQueryMobileカテゴリーで出てくる用語集

jQueryMobileの記事で登場する用語を下記の表にまとめました。学習するときの助けになるかも。

記事を読む

no image

ページ遷移時にアニメーションを付けてたり、Ajaxによるアクセスを禁止する

リンクを操作し、あるページから別のページに飛ぶときに、MozillaやWebkitベースのブラウザで

記事を読む

no image

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

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグループ化が有効です。グループ化され

記事を読む

no image

ページ(page)とは

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

記事を読む

no image

ボタンを設定する

前回の記事では<a data-role="button">によるボタンを取り上げましたが

記事を読む

no image

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

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

記事を読む

スポンサードリンク

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 ↑