jQuery Mobile逆引きリファレンス
Popupウィジェットで画像ボックスやダイアログなどを作成するには？
ダイアログ／画像ボックス／ポップアップメニューのような複雑なポップアップを、jQuery MobileのPopupウィジェットで作成する方法を解説する。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
別稿「Popupウィジェットでポップアップを表示するには？」では、Popupウィジェットを利用して、簡単なツールヒントを表示する方法について触れました。もっとも、Popupは汎用的なポップアップのためのウィジェットで、ツールヒントのようなシンプルなものだけでなく、ダイアログや画像ボックス、ポップアップメニューのような複雑なポップアップを作成する際にも利用できます。本稿では、それらの例について触れていきます。
ダイアログボックスを作成する
まずは、ダイアログボックスを作成します。
|
<div data-role="page">
<!--1ダイアログ風のポップアップを準備-->
<div id="popup" data-role="popup" data-overlay-theme="b"
data-dismissible="false" style="max-width:500px;">
<div data-role="header" data-theme="b">
<h1>ダウンロード</h1>
</div>
<div role="main" class="ui-content">
<p>サンプルファイルをダウンロードしますか？</p>
<p>ダウンロードに際しては、利用規約をあらかじめ確認してください。</p>
<!--2ダイアログを閉じるためのボタン -->
<a href="#" data-rel="back"
class="ui-btn ui-btn-inline ui-corner-all ui-btn-b">ダウンロード</a>
<a href="#" data-rel="back"
class="ui-btn ui-btn-inline ui-corner-all">閉じる</a>
</div>
</div>
<div data-role="header">
<h1>jQuery Mobile TIPS</h1>
</div>
<div role="main" class="ui-content">
<!--3ダイアログを開くためのリンクボタン -->
<p><a href="#popup" data-rel="popup" data-transition="pop"
class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-check">
ダウンロード</a></p>
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
|
ポップアップ領域の配下では、ページ要素と同じようにヘッダー、コンテンツ領域を持てます。1でもこれを利用して、ヘッダー／コンテンツ領域を用意することで、ダイアログ風のスタイルを作成しています。
「data-overlay-theme="b"」属性を指定して、背景をグレーアウトしているのは、ダイアログが操作の対象であることを視覚的にも目立たせるためです。また、「data-dismissible="false"」属性で、ポップアップ（ダイアログ）以外のタップで、勝手にダイアログが閉じないようにします。ダイアログは、ダイアログ上のボタンでだけ閉じるようにするのが自然でしょう。
data-dismissible属性を「false」にした場合には、最低限、ダイアログを閉じるための仕組みを用意しておく必要があります。これを行っているのが2です。「data-rel="back"」属性を付与したリンクボタンを用意することで、いわゆる［閉じる］ボタンとなります*1。
- *1 サンプルでは、便宜的に［ダウンロード］ボタンもただ閉じるだけにしていますが、一般的には、クリック時に行うべき処理を実装します。
あとは、3のように、ダイアログを開くためのリンクボタンを用意するだけです。一般的には、「data-transition="pop"」属性を付与し、ポップアップするように開くようにすることで、ダイアログらしく見えるでしょう。
［Note］data-dialog属性
Popupウィジェットを利用する他、ページ要素に対して「data-dialog="true"」属性を付与することで、ページをダイアログとして開くことができます。本文のサンプルを、こちらの記法で書き換えたコードは、以下です。
|
<p><a href="#popup" data-transition="pop"
class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-check">ダウンロード</a>
</p>
……中略……
<div id="popup" data-role="page" data-dialog="true">
……中略……
</div>
|
コントロールパネル風のダイアログを作成する
ポップアップにコマンドボタンを列挙し、ウィンドウの上端からスライドダウンするように表示させることで、コントロールパネル風のダイアログを作成することもできます。見掛けの変化のみでコードとして新たな要素はありませんので、サンプルのみ示します。
|
<div data-role="page">
<div id="popup" data-role="popup" data-overlay-theme="b"
data-dismissible="false" data-tolerance="0,15,30,15"
style="min-width:300px; max-width:500px;">
<div role="main" class="ui-content">
<h3>書籍関連情報</h3>
<p>
<a href="#" data-rel="back" class="ui-btn ui-corner-all">
サンプル・ダウンロード</a>
<a href="#" data-rel="back" class="ui-btn ui-corner-all">
Q＆A掲示板</a>
<a href="#" data-rel="back" class="ui-btn ui-corner-all">
FAQ（よくある質問）</a>
<a href="#" data-rel="back" class="ui-btn ui-corner-all">
目次</a>
<a href="#" data-rel="back" class="ui-btn ui-corner-all">
出版社から購入</a>
</p>
</div>
</div>
<div data-role="header">
<h1>jQuery Mobile TIPS</h1>
</div>
<div role="main" class="ui-content">
<p><a href="#popup" data-rel="popup" data-transition="slidedown"
class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-gear">
書籍関連情報</a></p>
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
|
画像をポップアップする
サムネイル画像をクリックすると、拡大した画像をポップアップ表示する――Zoomboxライクなページを作成します。
|
<div data-role="page">
<div id="popup" data-role="popup"
data-dismissible="false" data-overlay-theme="b">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext ui-btn-right">閉じる</a>
<img src="toku.jpg" style="max-height:400px;" />
</div>
<div data-role="header">
<h1>jQuery Mobile TIPS</h1>
</div>
<div role="main" class="ui-content">
<p><a href="#popup" data-rel="popup" data-transition="pop">
<img src="toku.jpg" style="width:25%" /></a></p>
</div>
<div data-role="footer">
<h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
</div>
</div>
|
画像の表示そのものは、ポップアップ領域に画像を加えるだけなので、特筆すべき点はありません。ポイントとなるのは、太字の部分です。
ポップアップ画像の右上に対して、
ボタンを表示しています。これには、class属性に対して「ui-btn-right」を付与します。
■
その他、Popupウィジェットでは、配下にListViewを加えればポップアップメニューのような体裁をとることもできますし、フォームを配置することでサブフォームのように見せることもできます。汎用的なウィジェットですので、積極的に活用してください。
※以下では、本稿の前後を合わせて5回分（第11回～第15回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
12. Popupウィジェットでポップアップを表示するには？
ツールヒント／ダイアログ／ポップアップメニューなどのポップアップを、jQuery MobileのPopupウィジェットで手軽に作成する方法を解説する。
13. 【現在、表示中】≫ Popupウィジェットで画像ボックスやダイアログなどを作成するには？
ダイアログ／画像ボックス／ポップアップメニューのような複雑なポップアップを、jQuery MobileのPopupウィジェットで作成する方法を解説する。
14. Tableウィジェットでレスポンシブルなテーブルを作成するには？（Column toggle編）
画面サイズに応じて表示幅を調整してくれるレスポンシブル・テーブル（列を選択的に表示するColumn toggleモード）を、jQuery MobileのTableウィジェットで作成する方法を解説する。
15. Tableウィジェットでレスポンシブルなテーブルを作成するには？（Reflow編）
画面サイズに応じて表示幅を調整してくれるレスポンシブル・テーブル（テーブル／連票と表示形式そのものを切り替えるReflowモード）を、jQuery MobileのTableウィジェットで作成する方法を解説する。
