Webサイト制作科 - 作品紹介

Webサイト制作科 - 作品紹介

ページ遷移とレイアウトの定義

JQM

ページ内リンク

  • jQuery Mobileでは複数のページを1つのHTMLに記述するので、ページ遷移にはページ内リンクを利用します
  • #（ハッシュ）を利用する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ページ遷移</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<h3>TOPページ</h3>
<p><a href="#about">このサイトについて</a></p>
</div>

<div data-role="page" id="about">
<h3>このサイトについて</h3>
<p><a href="#index">TOPページ</a></p>
</div>

<div data-role="page" id="seminar">
セミナー情報
</div>
<div data-role="page" id="access">
アクセス
</div>
<div data-role="page" id="contact">
お問い合わせ
</div>
</body>
</html>
  • リンクをタップするとスライドしてページが切り替わる
  • ただし、jQueryとjQuery mobileのバージョンが新しいとアニメーションが機能しないので注意が必要です

ヘッダー／フッターの配置とレイアウトの定義

  • 各ページ内のレイアウト領域もdiv要素にカスタムデータ属性を利用して定義します
  • ヘッダー領域なら「data-role="header"」、コンテンツ領域なら「data-role="content"」、フッター領域なら「data-role="footer"」と記述します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ページ遷移</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h1>TOPページ</h1>
</div>
<div data-role="content">
<p><a href="#about">このサイトについて</a></p>
</div>
<div data-role="footer">
<h4>&copy; 2013 Smartphone</h4>
</div>
</div>

<div data-role="page" id="about">
<div data-role="header">
<h1>このサイトについて</h1>
</div>
<div data-role="content">
<p><a href="#index">TOPページ</a></p>
</div>
<div data-role="footer">
<h4>&copy; 2013 Smartphone</h4>
</div>
</div>

<div data-role="page" id="seminar">
セミナー情報
</div>
<div data-role="page" id="access">
アクセス
</div>
<div data-role="page" id="contact">
お問い合わせ
</div>
</body>
</html>