jQuery Mobile1.2のPopupを試してみた　－写真を表示－

jQuery Mobile1.2の「Popup」を試してみました。
他の機能である「Collapsible Lists」については以下。

• jQuery Mobile1.2のCollapsible Listsを試してみた　−画像のカスタマイズについて− | PPl@ce

　基本

以下のように書くだけで、簡単に画像にあるようなポップアップが表示されます。

<a href="#popup" data-rel="popup" data-role="button" data-inline="true">表示</a>
<div data-role="popup" id="popup">
 <p>単純なポップアップ</p>
</div>

※表示されたポップアップを消すには、ポップアップ以外の場所をタッチすればOKです。

　画像表示

色々な用途があるかと思いますが、よくある使い方として写真を表示するのに便利です。

<a href="#photo" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="fade">写真</a> <!-- (1) -->
<div data-role="popup" id="photo" data-overlay-theme="a" data-theme="d" data-corners="false" style="max-width:350px;"> <!-- (2) -->
 <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a> <!-- (3) -->
 <img class="photo" src="sample.jpg"> <!-- (4) -->
</div>

　(1)についての説明

(2)(3)(4)の箇所を表示するためのタグです。
大事なのは、data-rel=”popup”の箇所です。

• data-transition

表示の際の挙動を変更できます。

　(2)についての説明

表示される画像の幅を制限するために、max-width:350pxと書いています。
この記述がないと、ウィンドウサイズに基づいて画像が最大限表示されてしまいます。
上記の書き方では、imgタグにwidthを書いても効きません。
※ただしimgタグの前後にcenterタグやdivタグがあればimgタグのwidthは効きます。

• data-overlay-theme
• data-theme

テーマカラーを設定できます。

　(3)についての説明

画像の右上にボタンを表示させています。
もちろんボタンは右側だけじゃなく、左側にも表示できますし2つ表示することも可能です。

• ui-btn-right

ボタンを右上に表示するよう指定しています。
ui-btn-leftで左側に表示できます。

• data-iconpos

ここでnotextとし、ボタンに文字(Close)を表示させないようにしています。
data-iconposの箇所を削除すれば、文字が表示されます。

• data-icon

表示するアイコンの種類。
今回はdeleteを用いています。

• data-theme

ボタンのテーマカラーを設定できます。

• data-rel

ここで「back」と指定していることにより、ボタンタッチ後に表示されている画像が消えます。
data-relの箇所を削除し、hrefに特定のURLを設定するとボタンタッチ後に指定したURLに遷移します。

　(4)についての説明

表示する画像です。

　おまけ

以下のようにボタンを左右に表示することもできます。

　まとめ

上記にあるように簡単にポップアップを実現することができます。
この手の機能はスマホサイトでよく使われている機能なので、この新機能は良い感じです。

また、ポップアップの発展系として「Overlay panels」というのもあります。
スマホの場合、この手のメニュー表示には有用かもしれないです。
jQuery Mobile Docs – Popup panels

　参考

• jQuery Mobile Docs – Popup