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

「jQuery プラグイン」の利用（14）

パネルウィジェットを使ったサイトの作成

　次に、jQuery Mobile 1.3.0から使用できるようになった、パネルウィジェットを使ったサイトを作成してみます。スマートフォンのFacebookアプリやEvernoteアプリなどで見られるように、左右に用意されたパネルをリンクタッチや、スワイプ操作で呼び出し、

図7　jQuery Mobileサンプル（2）画面

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

図8　パソコンで見たjQuery Mobileサンプル（2）画面

　サンプルサイトのスクリプトを以下に示します。

［リスト3］パネルウィジェットの表示（jQuery_Mobile_sample2.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" data-theme="b">

<!--6.パネルの設定-->
<div data-role="panel" id="panelsample">
	新機能のパネルウィジェットです
</div>

<!--7.ヘッダーの設定-->
<div data-role="header" data-theme="b">
	<h1>jQuery Mobileサンプルページ（パネル）</h1>
</div>

<!--8.ページ内容の設定-->
<div data-role="content">

	<a href="#panelsample">タッチするとパネルが開くよ！</a>
	
</div>

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

</div>
</body>
</html>

　6.パネルの設定の中に、jQuery Mobile1.3.0より使用できるようになった「div data-role="panel"」という記述があります。これはパネルウィジェットであることを表し、パネルに表示したいメッセージやリンクなどをdivタグで囲んで書き込みます。

　その後の8.ページ内容の設定の「a href="#panelsample"」では、リンク先として6.パネルの設定でIDとして定義されている「panelsample」を指しているので、このリンクをタッチすればパネルウィジェットを呼び出すことができ、左端からパネルウィジェット部分が表示されます。