jQuery Mobile逆引きリファレンス
Popupウィジェットでポップアップを表示するには？
ツールヒント／ダイアログ／ポップアップメニューなどのポップアップを、jQuery MobileのPopupウィジェットで手軽に作成する方法を解説する。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
Popupウィジェットを利用することで、ツールヒントのようなシンプルなものから、ダイアログ、ポップアップメニューなど、さまざまな形態のポップアップを生成できます。機能そのものは明快なので、以下に具体的なサンプルを挙げていくことにしましょう。
Popupウィジェットの基本
まずは、テキストの該当箇所をクリックすると、対応するポップアップを表示する例で、Popupウィジェットの基本的な挙動を確認します。
|
<!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>
|
［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 | ウィンドウの中央 |
例えば、以下は値を「window」とした場合の結果です。
（3）表示関連のパラメーター
ポップアップの表示に関わるパラメーターには、以下のようなものがあります。
| パラメーター | 概要 | デフォルト値 |
|---|---|---|
| data-corners | ポップアップを角丸にするか | false |
| data-shadow | ポップアップに影効果を付与するか | true |
| data-theme | ポップアップに適用するテーマ | null（親要素から継承） |
| data-overlay-theme | ポップアップ表示時にページ全体を覆うテーマ | null（背景は透明） |
| data-tolerance | ウィンドウ枠からの距離（「top, right, bottom, left」の形式） | 30,15,30,15 |
以下は、具体的な適用例です。
|
<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"」とした場合の結果です。
※以下では、本稿の前後を合わせて5回分（第10回～第14回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
10. Tabsウィジェットでタブパネルを作成するには？
パネルの端に配置されたタブをクリックするとパネル内容が切り替わるUIを、jQuery MobileのTabsウィジェットで手軽に作成する方法を解説。
12. 【現在、表示中】≫ Popupウィジェットでポップアップを表示するには？
ツールヒント／ダイアログ／ポップアップメニューなどのポップアップを、jQuery MobileのPopupウィジェットで手軽に作成する方法を解説する。
13. Popupウィジェットで画像ボックスやダイアログなどを作成するには？
ダイアログ／画像ボックス／ポップアップメニューのような複雑なポップアップを、jQuery MobileのPopupウィジェットで作成する方法を解説する。
14. Tableウィジェットでレスポンシブルなテーブルを作成するには？（Column toggle編）
画面サイズに応じて表示幅を調整してくれるレスポンシブル・テーブル（列を選択的に表示するColumn toggleモード）を、jQuery MobileのTableウィジェットで作成する方法を解説する。
