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

公開日: : 最終更新日:2014/04/20 IT, jQueryMobile


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

 基本

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

<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

 参考

広告

関連記事

iPhoneアプリにGoogle Analyticsを入れてみる -Google Analytics SDK for iOS導入-

* 導入経緯 iPhoneアプリをリリースして、を使って「ランキング」や「ダウンロード数」は適宜チ

記事を読む

sample1

jQuery Mobile1.2のCollapsible Listsを試してみた -画像のカスタマイズについて-

8月1日にjQuery Mobile1.2 Alphaが出ました。 まだAlphaなので自

記事を読む

no image

ViewController単位で画面の向きを変えてみる

ViewController毎に画面の向きを変えたい!ということがあったのでやってみました。 *

記事を読む

no image

iPhoneアプリ開発 −iOS6からの「写真」へのアクセス問題−

写真を扱うアプリを開発している際に問題になったこと。 ※結構前の話を今更まとめてみる。 * 写真へ

記事を読む

no image

iPhoneアプリ開発 -UIScrollViewで画像を拡大・縮小-

* やりたいこと UIScrollViewでピンチアウト・インして上に乗っている画像を拡大・縮小した

記事を読む

no image

CakePHP1.3でテストコード(2) -フィクスチャをいじってみる(テストデータの動的登録)-

cakePHP1.3でのSimpleTestを使ったテストケースの第2回目。 今回は、動的にテストデ

記事を読む

no image

CakePHP1.3にSmartyを導入

いい加減、CakePHP(1.3)にもSmartyを導入することにしました。 * ダウンロード

記事を読む

構成

定期的にデータ取得のためにCakePHP1.3でシェル機能を利用

定期的にデータを取得する行為をするために、はじめてシェル機能を使ってみたのでメモ。 * ス

記事を読む

no image

iPhoneアプリ開発 - touchesBeganとUITapGestureRecognizerの差(タッチとタップ) –

「画面にある画像を移動させたい」とか、「画面に線を書きたい」ということがあるかと思います。 ぐぐると

記事を読む

iPhoneアプリ開発 芳名帳アプリ作成(2) -記帳画面作成-

* 今までの流れ - * 画面構成 今回の芳名帳アプリは以下の画面で構成しています。 -

記事を読む

広告

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

広告

no image
[感想] Effective Objective-C 2.0 ☆☆☆☆★(4.5)

* 構成 - 第1章 Objective-Cに慣れる -

no image
[感想] iOSアプリテスト自動化入門 ☆☆☆(3.0)

* 構成 - Chapter 1 テスト自動化への取り組み

DeployGateを試してみた(iOS編) -DeployGateがiOSに対応-

今までのDeployGate - -[http://pplace.

iPhone/iPadアプリを開発するためにやったこと

今までに、iPhoneを3本ほどリリース((リリースしたアプリは全て1

no image
ターミナルでgitのコマンドを補完したりブランチ名を表示する – macでgitを便利に使うために –

* やりたいこと macのターミナルでgitをいじっていると -今の

→もっと見る

PAGE TOP ↑