jQuery Mobile ポップアップを設置する基本
公開日：2014年10月16日
最終更新日：2014年11月8日
ポップアップウィジェットは同じページ内のコンテンツブロックを、ポップアップウィンドウでオーバーレイさせて表示する機能です。ツールチップや写真の拡大表示でよく使われます。この記事では設置方法の基本とオプション指定について解説します。
«次の特集記事» jQuery Mobile ポップアップの利用例
«前の特集記事» jQuery Mobile ダイアログを設置する
【コンテンツ】
【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5
ポップアップの概要
ポップアップはダイアログと違い、同じページ内のコンテンツブロックをリンク先として指定します。
「data-rel="popup"」をアンカーリンクに設定し、「data-role="popup"」をコンテンツブロックに設定します。
データ属性を使ったオプションでは、ポップアップの外観や表示位置を指定することができます。
ポップアップは利用範囲が広く、以下のような利用例が考えられます。
- ツールチップ/注釈
- インフォメーションボックス
- 写真の拡大表示
- ログインフォーム
- ポップアップメニュー
- ダイアログボックス
使用するデータ属性
| データ属性 | 値 | 説明 |
|---|---|---|
| data-arrow | false | true | t | r | b | l | ポップアップに吹き出し風の矢印をつけるかどうか t,r,b,l は top,right,bottom,leftの意味 |
| data-corners | true | false | ポップアップに角丸をつけるかどうか |
| data-dismissible | true | false | ポップアップの外側をクリックしたときポップアップを閉じるかどうか |
| data-history | true | false | ブラウザの履歴にポップアップを加えるかどうか falseのときはブラウザの戻るボタンでポップアップを閉じることができない |
| data-overlay-theme | swatch letter (a-z) | ポップアップのオーバーレイ(背景)に適用するスウォッチ デフォルトは "null"(透過背景) |
| data-position-to | origin | window | selector | ポップアップの表示位置、アンカーリンクに指定する origin: リンクの上 window: ウィンドウのセンター selector: 特定の要素の上 |
| data-shadow | true | false | ポップアップに影をつけるかどうか |
| data-theme | swatch letter (a-z) | ポップアップに適用するスウォッチ |
| data-tolerance | 30,15,30,15 | ウィンドウの４つのコーナー(top, right, bottom, left)からの距離 |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | ポップアップが現れるとき/消えるときのエフェクト設定、アンカーリンクに指定する |
基本的な設置方法
ポップアップを設置するには、アンカーリンクとコンテンツブロックの両方にデータ属性を記述する必要があります。
ポップアップで表示するコンテンツのあるブロックには、
コンテナであるdiv要素に「data-role="popup"」と記述します。
そしてリンク先として指定する id属性を記述します。
ポップアップを開くためのアンカーリンクには、
「data-rel="popup"」と記述し、リンク先としてhref属性にコンテンツブロックのidを指定します。
コンテンツブロックを記述する場所ですが、ページウィジェットの中であればどこでも構いません。コンテンツのコンテナである「role="main"」を指定したdiv要素の中でなくても構いません。
なお、アンカーリンクには ui-linkクラス、コンテンツブロックには ui-popupクラスが自動的に付加されます。
以下は基本的な記述例です。ポップアップを閉じるには、ポップアップ外をクリックするか、ブラウザの戻るボタンをクリックしてください。
|
1 2 3 4 5 6 |
<div role="main" class="ui-content"> <p><a href="#pop1" data-rel="popup">ポップアップを表示 »</a></p> <div data-role="popup" id="pop1"> <p>ポップアップでのメッセージ</p> </div> </div> |
外観オプションの指定
角丸を解除する
デフォルトではポップアップボックスに角丸がついています。
これを解除するには、「data-corners="false"」を指定します。
|
1 2 3 4 5 6 |
<div role="main" class="ui-content"> <p><a href="#pop1" data-rel="popup">ポップアップを表示 »</a></p> <div data-role="popup" id="pop1" data-corners="false"> <p>ポップアップでのメッセージ</p> </div> </div> |
影を解除する
デフォルトではポップアップボックスに影がついています。
これを解除するには、「data-shadow="false"」を指定します。
|
1 2 3 4 5 6 |
<div role="main" class="ui-content"> <p><a href="#pop1" data-rel="popup">ポップアップを表示 »</a></p> <div data-role="popup" id="pop1" data-shadow="false"> <p>ポップアップでのメッセージ</p> </div> </div> |
閉じるボタンをつける
ポップアップの外側をクリックすると閉じるようになっていますが、ボックスに明示的に閉じるボタンをつけることもできます。
a要素に「data-rel="back"」を指定し、さらにクラスでボタンになるアイコン種類と表示位置などを指定します。
以下は右上に×の形をしたアイコンをつけた例です。
|
1 2 3 4 5 6 7 |
<div role="main" class="ui-content"> <p><a href="#pop1" data-rel="popup">ポップアップを表示 »</a></p> <div data-role="popup" id="pop1" data-shadow="false"> <a href="#" data-rel="back" class="ui-btn ui-icon-delete ui-btn-right ui-btn-icon-notext ui-corner-all">Close</a> <p>ポップアップでのメッセージ</p> </div> </div> |
デフォルトでは閉じるボタンがメッセージに重なってしまう可能性がありますので、上記の例ではmarginを1emに変更しています。
吹き出しにする
吹き出しのように、ボックスの１辺から小さな矢印が飛び出した形にすることができます。
data-arrow属性で矢印の飛び出す辺を指定します。
値は、"t"(top)、"r"(right)、"b"(bottom)、"l"(left)で指定します。"true" にすると、いずれかの辺が自動的に選ばれます。
|
1 2 3 4 5 6 |
<div role="main" class="ui-content"> <p><a href="#pop1" data-rel="popup">ポップアップを表示 »</a></p> <div data-role="popup" id="pop1" data-arrow="t"> <p>ポップアップでのメッセージ</p> </div> </div> |
テーマを変更する
data-theme属性でテーマ(スウォッチ)を変更できます。
以下は "b" にした例です。
|
1 2 3 4 5 6 |
<div role="main" class="ui-content"> <p><a href="#pop1" data-rel="popup">ポップアップを表示 »</a></p> <div data-role="popup" id="pop1" data-theme="b"> <p>ポップアップでのメッセージ</p> </div> </div> |
オーバーレイテーマを変更する
デフォルトでは背景は透明ですので呼び出したページがそのまま表示されます。
data-overlay-theme属性では、背景のテーマを変更できます。
ポップアップに集中させたい場合に使えばいいでしょう。
以下は "b" にした例です。
|
1 2 3 4 5 6 |
<div role="main" class="ui-content"> <p><a href="#pop1" data-rel="popup">ポップアップを表示 »</a></p> <div data-role="popup" id="pop1" data-overlay-theme="b"> <p>ポップアップでのメッセージ</p> </div> </div> |
表示位置オプションの指定
表示位置を指定する
デフォルトではポップアップは、呼び出したアンカーリンクの上に表示されます。
「data-position-to="origin | window | selector"」で表示位置を指定できます。このデータ属性は、呼び出すほうのアンカーリンクに指定します。
デフォルトは "origin" でアンカーリンクの上です。
"window"を指定すると、ウィンドウのセンターに表示されます。
特定の要素の上に表示したい場合は、 "selector" としてハッシュ(#)をつけてidを指定します。
以下の例では、特定の要素としてボーダーをつけたボックスを描いています。
|
1 2 3 4 5 6 7 8 9 |
<div role="main" class="ui-content"> <div id="message" style="width: 200px; height: 40px; border: 1px solid #ccc; margin: 0 auto;"></div> <p><a href="#pop1" data-rel="popup">ポップアップを表示(デフォルト) »</a></p> <p><a href="#pop1" data-rel="popup" data-position-to="window">ポップアップを表示(ウィンドウセンター) »</a></p> <p><a href="#pop1" data-rel="popup" data-position-to="#message">ポップアップを表示(特定の場所) »</a></p> <div data-role="popup" id="pop1"> <p>ポップアップでのメッセージ</p> </div> </div> |
ウィンドウ端からの距離を指定する
ポップアップを表示する位置として、ウィンドウ端からの距離でも指定できます。
「data-tolerance="top,right,bottom,left"」で指定します。
top,right,bottom,leftにはそれぞれのウィンドウ端からの距離をpx単位で指定します。
距離は最小距離です。コンテンツ内容により表示するボックスサイズが変わり距離を合わせますが、ウィンドウサイズによっては必ずしもすべての距離が一致するとは限りません。
|
1 2 3 4 5 6 |
<div role="main" class="ui-content"> <p><a href="#pop1" data-rel="popup">ポップアップを表示 »</a></p> <div data-role="popup" id="pop1" data-tolerance="50,100,50,100"> <p>ポップアップでのメッセージ</p> </div> </div> |
動作オプションの指定
トランジションエフェクトを指定する
data-transition属性で、ポップアップが現れるとき/消えるときのエフェクトを指定できます。このデータ属性は、呼び出すほうのアンカーリンクに指定します。
値は、fade, flip, flow, pop, slide, slidedown, slidefade, slideup, turn, none を指定できます。デフォルトはエフェクトのない "none" です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div role="main" class="ui-content"> <p><a href="#pop1" data-rel="popup" data-transition="none">ポップアップを表示(エフェクトなし) »</a></p> <p><a href="#pop1" data-rel="popup" data-transition="fade">ポップアップを表示(fade) »</a></p> <p><a href="#pop1" data-rel="popup" data-transition="flip">ポップアップを表示(flip) »</a></p> <p><a href="#pop1" data-rel="popup" data-transition="flow">ポップアップを表示(flow) »</a></p> <p><a href="#pop1" data-rel="popup" data-transition="pop">ポップアップを表示(pop) »</a></p> <p><a href="#pop1" data-rel="popup" data-transition="slide">ポップアップを表示(slide) »</a></p> <p><a href="#pop1" data-rel="popup" data-transition="slidedown">ポップアップを表示(slidedown) »</a></p> <p><a href="#pop1" data-rel="popup" data-transition="slidefade">ポップアップを表示(slidefade) »</a></p> <p><a href="#pop1" data-rel="popup" data-transition="slideup">ポップアップを表示(slideup) »</a></p> <p><a href="#pop1" data-rel="popup" data-transition="turn">ポップアップを表示(turn) »</a></p> <div data-role="popup" id="pop1"> <p>ポップアップでのメッセージ</p> </div> </div> |
閉じる動作を指定する
「data-dismissible="false"」を指定すると、ポップアップ外をクリックしたり ESCキーを押しても、ポップアップが閉じなくなります。デフォルトは "true" です。
もし "false" を指定するなら、閉じる手段を別に用意してください。
|
1 2 3 4 5 6 7 |
<div role="main" class="ui-content"> <p><a href="#pop1" data-rel="popup">ポップアップを表示 »</a></p> <div data-role="popup" id="pop1" data-dismissible="false"> <a href="#" data-rel="back" class="ui-btn ui-icon-delete ui-btn-right ui-btn-icon-notext ui-corner-all">Close</a> <p>ポップアップでのメッセージ</p> </div> </div> |
ブラウザ履歴を残すか指定する
「data-history="false"」を指定すると、ブラウザの履歴にポップアップが残らなくなります。したがってブラウザの戻るボタンでポップアップを閉じることができなくなります。デフォルトは "true" です。
|
1 2 3 4 5 6 |
<div role="main" class="ui-content"> <p><a href="#pop1" data-rel="popup">ポップアップを表示 »</a></p> <div data-role="popup" id="pop1" data-history="false"> <p>ポップアップでのメッセージ</p> </div> </div> |
この記事では、ポップアップの基本となる設定方法とオプション指定について解説しました。次の記事でポップアップの具体的な利用例を解説します。
«次の特集記事» jQuery Mobile ポップアップの利用例
«前の特集記事» jQuery Mobile ダイアログを設置する
スポンサーリンク
