h2ospace

[jQuery Mobile] ページ推移でアニメーションをする

2011-01-27 03:11:37

jQuery Mobileは、基本的に普通にHTMLを記述しても必要に応じてJavaScriptで制御されます。ページ内リンクもそう。

例えば、次のようにHTMLを作成してみましょう。

[xml]
<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>

<!– 1ページ目 –>
<div data-role="page" id="page1">
<div data-role="header">
<h1>1ページ目</h1>
</div>

<div data-role="content">
<p>ページ内リンクを張ると、推移アニメーションがされます。</p>
<p>&raquo; <a href="#page2">2ページ目へ</a></p>
</div>

<div data-role="footer">
<h4>&copy; <a href="http://h2o-space.com" rel="external">H2O Space.</a></h4>
</div>
</div>

<!– 2ページ目 –>
<div data-role="page" id="page2">
<div data-role="header">
<h1>2ページ目</h1>
</div>

<div data-role="content">
<p>2ページ目です。戻るボタンが設置されます。外部リンクの場合は「rel=&quot;external&quot;」属性を付加します。</p>
<p>&raquo; <a href="http://h2o-space.com" rel="external">H2O Space.のサイトへ</a>（外部リンク）</p>
</div>

<div data-role="footer">
<h4>&copy; <a href="http://h2o-space.com" rel="external">H2O Space.</a></h4>
</div>
</div>

</body>
</html>
[/xml]

これで、ページ内リンクに反応して自動的に、左右に画面がスライドするアニメーションが割り当てられます。
なお、外部リンクも同じように処理しようとしてしまい、正しくリンクがされなくなるため、「rel="external"」属性を付加する必要があります。デモはこちらからご覧ください。

»サンプルへ

[PR] たにぐちまことのJavaScript/jQuery Mobile入門講座 | ロクナナワークショップ

※このエントリは ブロガーにより投稿されたものです。朝日インタラクティブ および ZDNet Japan編集部の見解・意向を示すものではありません。
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]