Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery Mobile逆引きリファレンス

jQuery Mobile逆引きリファレンス

Popupウィジェットでポップアップを表示するには?

2014年3月27日

ツールヒント/ダイアログ/ポップアップメニューなどのポップアップを、jQuery MobileのPopupウィジェットで手軽に作成する方法を解説する。

  • このエントリーをはてなブックマークに追加

jQuery Mobileとは?

 jQuery Mobileは、jQueryを拡張するライブラリ(プラグイン)の一種で、名前のとおり、スマホ/タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス: jQuery Mobileを利用するには?」を参照してください。

 Popupウィジェットを利用することで、ツールヒントのようなシンプルなものから、ダイアログ、ポップアップメニューなど、さまざまな形態のポップアップを生成できます。機能そのものは明快なので、以下に具体的なサンプルを挙げていくことにしましょう。

Popupウィジェットの基本

 まずは、テキストの該当箇所をクリックすると、対応するポップアップを表示する例で、Popupウィジェットの基本的な挙動を確認します。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
  href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js">
</script>
</head>
<body>
<div data-role="page">
  <!--1ポップアップを定義 -->
  <div id="popup" data-role="popup">
    <p>jQuery Mobileは、Android、iOS、主要なデスクトップブラウザーなど、代表的な環境に対応したモバイルアプリ開発のためのライブラリです。jQueryとの親和性に優れ、ウィジェットが豊富に用意されているのが特徴です。</p>
  </div>
  <div data-role="header">
    <h1>jQuery Mobile TIPS</h1>
  </div>
  <div role="main" class="ui-content">
    <!--2ポップアップへのリンクを設置 -->
    <p>JavaScriptでスマホアプリを開発する際に定番ともいえるライブラリ、それが<a href="#popup" data-rel="popup">jQuery Mobile</a>です。</p>
  </div>
  <div data-role="footer">
    <h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
  </div>
</div>
</body>
</html>
Popupウィジェットの基本的な用法(popup.html)
[jQuery Mobile]というリンク部分をタップ

[jQuery Mobile]というリンク部分をタップ

リンクタップでポップアップを表示

 ポップアップとして表示すべき領域は、<div data-role="popup">要素で表します(1)。この際、以下の点に注意してください。

  • ページ要素の配下で定義すること
  • あとで特定できるよう、id属性は必須

 ポップアップを呼び出しているのは、2のハイパーリンクです。href属性にはポップアップのid値を「#id」の形式で指定し、また、呼び出し先がポップアップであることを「data-rel="popup"」属性で明示します。

 サンプルを実行すると、リンクのタップでポップアップが表示されること、ポップアップの外をタップすることで非表示になることを確認してください。

Popupウィジェットの主なパラメーター

 Popupウィジェットで利用できる主なパラメーターを、以下でまとめます。「*」は呼び出すリンクの側でも指定するパラメーターであることを意味します。

(1)*data-transitionパラメーター

 ポップアップを表示する際に、適用するエフェクトを指定します。デフォルトではエフェクトは適用されず(設定値は「none」)、ポップアップがそのまま表示されます。指定できる値については、別稿「jQuery Mobileページでハイパーリンクを設置するには?」を参照してください。

(2)*data-position-toパラメーター

 ポップアップ表示の基点となる要素を指定します。設定値は、以下の通りです。

設定値概要
セレクター式 指定された要素の中央
origin ポップアップを開いたリンクの中央(デフォルト値)
window ウィンドウの中央
ポップアップの表示位置(data-position-toパラメーター)

 例えば、以下は値を「window」とした場合の結果です。

data-position-toパラメーターの設定値
(3)表示関連のパラメーター

 ポップアップの表示に関わるパラメーターには、以下のようなものがあります。

パラメーター概要デフォルト値
data-corners ポップアップを角丸にするか false
data-shadow ポップアップに影効果を付与するか true
data-theme ポップアップに適用するテーマ null(親要素から継承)
data-overlay-theme ポップアップ表示時にページ全体を覆うテーマ null(背景は透明)
data-tolerance ウィンドウ枠からの距離(「top, right, bottom, left」の形式) 30,15,30,15
表示関連のパラメーター

 以下は、具体的な適用例です。

HTML
<div id="popup" data-role="popup" data-theme="b" data-overlay-theme="b"
  data-corners="true" data-shadow="false" data-tolerance="10,200,30,200">
  <p>jQuery Mobileは、Android、iOS、主要なデスクトップブラウザーなど、代表的な環境に対応したモバイルアプリ開発のためのライブラリです。jQueryとの親和性に優れ、ウィジェットが豊富に用意されているのが特徴です。</p>
</div>
ポップアップに対してスタイルを適用するコード
ポップアップに対してスタイルを適用
(4)data-historyパラメーター

 ポップアップを表示する際に、ブラウザーの履歴を追加するかをtrue/falseで表します。デフォルトは「true」なので、ポップアップを表示すると、履歴が追加されます(=[戻る]ボタンでポップアップが閉じる)。

 「false」にした場合、履歴は追加されず、[戻る]ボタンではポップアップは閉じません。

(5)data-dismissibleパラメーター

 ポップアップの外をクリック、またはEscキーを押すことで、ポップアップを閉じるかをtrue/falseで指定します。デフォルトは「true」(=閉じる)です。「false」の場合は、その挙動は無効化されますので、ポップアップを閉じるためのボタンなどを、別に準備しなければなりません(具体的な方法は、後日、別稿で紹介します)。

(6)data-arrowパラメーター

 data-arrowパラメーターを利用することで、ポップアップに吹き出し風の矢印を付与できます。値には「true」「false」の他、「l」(=left)、「r」(=right)、「t」(=top)、「b」(=bottom)をカンマ区切りで表した文字列を指定できます。例えば「l,t」とした場合には「左、上」部のいずれかに矢印を付与します。「true」は「l,t,r,b」と同じ意味です(「false」は矢印を表示しない)。以下は、「data-arrow="true"」とした場合の結果です。

「data-arrow="true"」とした場合のポップアップ

※以下では、本稿の前後を合わせて5回分(第10回~第14回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery Mobile逆引きリファレンス
10. Tabsウィジェットでタブパネルを作成するには?

パネルの端に配置されたタブをクリックするとパネル内容が切り替わるUIを、jQuery MobileのTabsウィジェットで手軽に作成する方法を解説。

jQuery Mobile逆引きリファレンス
11. Panelウィジェットで左右からスライド表示するには?

左右からスライド表示するパネルを、jQuery MobileのPanelウィジェットで手軽に作成する方法を解説する。

jQuery Mobile逆引きリファレンス
12. 【現在、表示中】≫ Popupウィジェットでポップアップを表示するには?

ツールヒント/ダイアログ/ポップアップメニューなどのポップアップを、jQuery MobileのPopupウィジェットで手軽に作成する方法を解説する。

jQuery Mobile逆引きリファレンス
13. Popupウィジェットで画像ボックスやダイアログなどを作成するには?

ダイアログ/画像ボックス/ポップアップメニューのような複雑なポップアップを、jQuery MobileのPopupウィジェットで作成する方法を解説する。

jQuery Mobile逆引きリファレンス
14. Tableウィジェットでレスポンシブルなテーブルを作成するには?(Column toggle編)

画面サイズに応じて表示幅を調整してくれるレスポンシブル・テーブル(列を選択的に表示するColumn toggleモード)を、jQuery MobileのTableウィジェットで作成する方法を解説する。

サイトからのお知らせ

Twitterでつぶやこう!