Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery Mobile逆引きリファレンス

jQuery Mobile逆引きリファレンス

Popupウィジェットで画像ボックスやダイアログなどを作成するには?

2014年4月3日

ダイアログ/画像ボックス/ポップアップメニューのような複雑なポップアップを、jQuery MobileのPopupウィジェットで作成する方法を解説する。

  • このエントリーをはてなブックマークに追加

jQuery Mobileとは?

 jQuery Mobileは、jQueryを拡張するライブラリ(プラグイン)の一種で、名前のとおり、スマホ/タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス: jQuery Mobileを利用するには?」を参照してください。

 別稿「Popupウィジェットでポップアップを表示するには?」では、Popupウィジェットを利用して、簡単なツールヒントを表示する方法について触れました。もっとも、Popupは汎用的なポップアップのためのウィジェットで、ツールヒントのようなシンプルなものだけでなく、ダイアログや画像ボックス、ポップアップメニューのような複雑なポップアップを作成する際にも利用できます。本稿では、それらの例について触れていきます。

ダイアログボックスを作成する

 まずは、ダイアログボックスを作成します。

HTML
<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>
ダイアログを表示する例(popup_dialog.html)
[ダウンロード]ボタンをクリックすると、ダイアログ風のポップアップを表示

 ポップアップ領域の配下では、ページ要素と同じようにヘッダー、コンテンツ領域を持てます。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"」属性を付与することで、ページをダイアログとして開くことができます。本文のサンプルを、こちらの記法で書き換えたコードは、以下です。

HTML
<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>
ページをダイアログとして開くためのコード

コントロールパネル風のダイアログを作成する

 ポップアップにコマンドボタンを列挙し、ウィンドウの上端からスライドダウンするように表示させることで、コントロールパネル風のダイアログを作成することもできます。見掛けの変化のみでコードとして新たな要素はありませんので、サンプルのみ示します。

HTML
<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>
コントロールパネル風のダイアログを作成する方法(popup_dialog2.html)
ウィンドウ上部からコントロールパネルがスライドダウン

画像をポップアップする

 サムネイル画像をクリックすると、拡大した画像をポップアップ表示する――Zoomboxライクなページを作成します。

HTML
<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>
拡大画像をポップアップする例(popup_img.html)
サムネイル画像をタップすると、拡大画像をポップアップ表示

 画像の表示そのものは、ポップアップ領域に画像を加えるだけなので、特筆すべき点はありません。ポイントとなるのは、太字の部分です。

 ポップアップ画像の右上に対して、Close ボタンを表示しています。これには、class属性に対して「ui-btn-right」を付与します。

 その他、Popupウィジェットでは、配下にListViewを加えればポップアップメニューのような体裁をとることもできますし、フォームを配置することでサブフォームのように見せることもできます。汎用的なウィジェットですので、積極的に活用してください。

※以下では、本稿の前後を合わせて5回分(第11回~第15回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery Mobile逆引きリファレンス
11. Panelウィジェットで左右からスライド表示するには?

左右からスライド表示するパネルを、jQuery MobileのPanelウィジェットで手軽に作成する方法を解説する。

jQuery Mobile逆引きリファレンス
12. Popupウィジェットでポップアップを表示するには?

ツールヒント/ダイアログ/ポップアップメニューなどのポップアップを、jQuery MobileのPopupウィジェットで手軽に作成する方法を解説する。

jQuery Mobile逆引きリファレンス
13. 【現在、表示中】≫ Popupウィジェットで画像ボックスやダイアログなどを作成するには?

ダイアログ/画像ボックス/ポップアップメニューのような複雑なポップアップを、jQuery MobileのPopupウィジェットで作成する方法を解説する。

jQuery Mobile逆引きリファレンス
14. Tableウィジェットでレスポンシブルなテーブルを作成するには?(Column toggle編)

画面サイズに応じて表示幅を調整してくれるレスポンシブル・テーブル(列を選択的に表示するColumn toggleモード)を、jQuery MobileのTableウィジェットで作成する方法を解説する。

jQuery Mobile逆引きリファレンス
15. Tableウィジェットでレスポンシブルなテーブルを作成するには?(Reflow編)

画面サイズに応じて表示幅を調整してくれるレスポンシブル・テーブル(テーブル/連票と表示形式そのものを切り替えるReflowモード)を、jQuery MobileのTableウィジェットで作成する方法を解説する。

サイトからのお知らせ

Twitterでつぶやこう!