jQuery Mobile ポップアップの利用例

ポップアップウィジェットは単純なメッセージの表示だけでなく、たくさんの使い道がある大変便利な機能です。この記事では具体的な利用例として、ポップアップメニューとダイアログの作成、そして写真をポップアップで拡大表示する方法を紹介します。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. ポップアップメニューを作成する
  2. ダイアログを作成する
  3. 写真をポップアップで拡大表示する

【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5

ポップアップメニューを作成する

ポップアップにリストビューを含めれば、ポップアップメニューを作成できます。
メニューのタイトルは「data-role="list-divider"」を使って表示します。

ポップアップメニュー画面

ダイアログを作成する

jQuery Mobile にはダイアログウィジェットもありますが、ポップアップウィジェットを使ってもダイアログを作成できます。ダイアログウィジェットはバージョン1.4で非推奨になっていますので、ポップアップウィジェットで作成したほうがベターです。

以下のようなダイアログを作成してみます。

ダイアログ画面

ダイアログにはユーザーに何らかのアクションをしてもらうボタンをつけています。
したがって「data-dismissible="false"」を指定し、ダイアログ内のボタンをタップしない限り閉じない仕様にしておきます。

写真をポップアップで拡大表示する

写真のサムネイルをタップするとポップアップで拡大表示するようにしてみます。

アンカーリンクのほうにはサムネイル用の写真を用意し、ポップアップのほうに拡大された写真を用意すればいいのですが、この例では同じファイルを使い、widthプロパティの値を 80px ⇒ 100% に変えて表示しています。別々の画像ファイルを用いるのでも構いません。

また、拡大写真には右上に閉じるボタンをつけています。

写真拡大画面

ポップアップの利用例を3つほど解説しましたが、他にも動画プレイヤー表示、マップ表示、ログインフォーム表示などに利用できます。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ