2/6 jQuery Mobileでスマホサイト構築

jQuery Mobile

jQuery Mobileは、HTMLのhead要素で、下記を読み込むだけで利用できる。

jQueryのスクリプトファイル
jQuery Mobileのスクリプトファイル(最新：1.0.1)
jQuery MobileのCSSファイル(最新：1.0.1)

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

Viewport:スマートフォン用の解像度（一般的には横幅320px）で表示される。
縦、横にした時に解像度を自動的に画面サイズに合わせてくれるようにminimum-scale=1,maximum-scale=1記述する。

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />

ページの内容を記述する

<div data-role="page">の内側に下記記述する。

「ヘッダー」<div data-role="header">
「コンテンツ」<div data-role="content">
「フッター」<div data-role="footer">

<div data-role="page">〜</div>が1ページ。
すべてのページを１つのHTMLファイルに記述
data-theme="b" a〜eまで指定出来る。
独自のテーマをつくる：テーマローラー

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />
</head>
<body>
<div data-role="page" id="index" data-theme="b">
<div data-role="header">
	<h1>タイトル</h1>
</div>
<div data-role="content">
	<p>コンテンツの内容</p>
</div>
<div data-role="footer">
	<h4>&copy; 2012 ○○○ </h4>
</div>
</div>
</body>
</html>

コンテンツ領域内を記述

「listview」はリストをスマートフォン用に最適化して表示する設定。
data-inset属性「true」はリストの周りに余白を付けて角丸にする設定。
リストは１からでも良い。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>タイトル</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />

</head>
<body>
<div data-role="page" id="index" data-theme="b">
<div data-role="header">
<h1>タイトル</h1>
</div>
<div data-role="content">
<p>コンテンツの内容</p>
<ul data-role="listview" data-inset="true">
<li><a href="#book8">リスト８</a></li>
<li><a href="#book7">リスト７</a></li>
<li><a href="#book6">リスト６</a></li>
<li><a href="#book5">リスト５</a></li>
<li><a href="#book4">リスト４</a></li>
<li><a href="#book3">リスト３</a></li>
<li><a href="#book2">リスト２</a></li>
<li><a href="#book1">リスト１</a></li>
</ul>
</div>
<div data-role="footer">
	<h4>&copy; 2012 ○○○ </h4>
</div>
</div>
</body>
</html>

詳細ページを記述

ヘッダーには、トップページへ戻るボタンを設定する。

<a href="#index" data-direction="reverse">TOP</a>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>タイトル</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />

</head>
<body>
<div data-role="page" id="index" data-theme="b">
<div data-role="header">
<h1>タイトル</h1>
</div>
<div data-role="content">
<p>コンテンツの内容</p>
<ul data-role="listview" data-inset="true">
<li><a href="#book8">リスト８</a></li>
<li><a href="#book7">リスト７</a></li>
<li><a href="#book6">リスト６</a></li>
<li><a href="#book5">リスト５</a></li>
<li><a href="#book4">リスト４</a></li>
<li><a href="#book3">リスト３</a></li>
<li><a href="#book2">リスト２</a></li>
<li><a href="#book1">リスト１</a></li>
</ul>
</div>
<div data-role="footer">
	<h4>&copy; 2012 ○○○ </h4>
</div>
</div>

<div data-role="page" id="book8">
<div data-role="header">
  <a href="#index" data-direction="reverse">T0P</a>
	<h1>タイトル</h1>
</div>
<div data-role="content">
	<h2>タイトル２</h2>
	<p>○○○○○○○○○○○○</p>
	<p><a href="#" ><img src="http://〜jpg" alt="" /></a></p>
</div>
<div data-role="footer">
	<h4>&copy; 2012 ○○○ </h4>
</div>
</div>

</body>
</html>