CodeZine(コードジン)

特集ページ一覧

「jQuery Mobile」を活用したスマートフォンサイト作成(中編)

「jQuery プラグイン」の利用(14)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/04/03 14:00
目次

ポップアップウィジェットと似た機能「ダイアログ」

 ポップアップウィジェットと似た機能としてダイアログがあります。これはjQuery Mobile 1.2.0登場前からあった機能です。ダイアログもリンクをタッチするとポップアップと同じように中央に飛び出す形でメッセージなどを表示することができます。

 違いとしては、ポップアップはポップアップ部分の外をタッチすれば消すことができますが、ダイアログはダイアログを消すボタンやリンクをタッチしなければ消すことはできません。また、ポップアップは今まで表示されていたコンテンツが背景に表示されるのに対し、ダイアログは表示されません。特に重要なメッセージを出したい場合は、ダイアログの方がより強調されます。

 ダイアログを表示した画面は以下のとおりです。

図5 jQuery Mobileサンプル(1_2)画面
図5 jQuery Mobileサンプル(1_2)画面

 パソコンで見るとこうした形になります。

図6 パソコンで見たjQuery Mobileサンプル(1_2)画面
図6 パソコンで見たjQuery Mobileサンプル(1_2)画面

 先程のポップアップウィジェットをダイアログに変更したサンプルスクリプトを示します。

[リスト3]ダイアログの画面表示(jQuery_Mobile_sample1_2.html)
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />

<!--1.スマートフォン画面での表示方法指定-->
<mata name="viewport" content="width=device-width,initial-scale=1">

<title>jQuery Mobileサンプル(ダイアログ表示)</title>

<!--2.CSSの読み込み-->
<link rel="stylesheet" type="text/css" href="./mobile/jquery.mobile-1.3.0.min.css" />

<!--3.jQueryの読み込み-->
<script language="javascript" type="text/javascript" src="./Scripts/jquery-1.9.1.min.js"></script>

<!--4.jQuery Mobileの読み込み-->
<script language="javascript" type="text/javascript" src="./mobile/jquery.mobile-1.3.0.min.js"></script>

</head>

<body>

<!--5.ページの設定-->
<div data-role="page" id="page0" data-theme="b">

<!--6.ヘッダーの設定-->
<div data-role="header" data-theme="b">
	<h1>jQuery Mobileサンプルページ(ダイアログ表示)</h1>
</div>

<!--7.ページ内容の設定-->
<div data-role="content">
	<a href="#dialogsample" data-rel="dialog"><b>ここをタッチ!</b></a></p>
</div>

<!--8.フッターの設定-->
<div data-role="footer" data-theme="b">
	<h3>Codezine</h3>
</div>
</div>

<!--9.ダイアログの設定-->
<div data-role="page" id="dialogsample">
	<div data-role="header">
		<h1>ダイアログ</h1>
	</div>
	<div data-role="content">
		旧来機能のダイアログ</p>
		<a href="#" data-rel="back">戻る</a></p>
	</div>
</div>
</body>
</html>

 7.ページ内容の設定のリンクでは「a href="#dialogsample" data-rel="dialog"」と記述し、その後の9.ダイアログの設定で指定されているID「dialogsample」を指し、「data-rel="dialog"」でダイアログとして表示することを指定します。

 9.ダイアログの設定では、「div data-role="page" id="dialogsample"」と記述し、「data-role」で指定される属性は「page」となるので、新たに別のページを呼び出す形です。ヘッダー部分には自動的に戻るボタンが表示され、それをタッチすれば元のコンテンツに戻ります。また、「<a href="#" data-rel="back">戻る</a></p>」といった形で記述した戻るリンクによっても、元のコンテンツに戻ることができます。

 表示したい内容によって、ポップアップとダイアログを使い分けてみるのも良いでしょう。


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

バックナンバー

連載:jQuery UI/プラグインの活用

もっと読む

著者プロフィール

  • WINGSプロジェクト 小林 健志(コバヤシ タケシ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5