[jQuery Mobile] ページ推移でアニメーションをする
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>» <a href="#page2">2ページ目へ</a></p>
</div>
<div data-role="footer">
<h4>© <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="external"」属性を付加します。</p>
<p>» <a href="http://h2o-space.com" rel="external">H2O Space.のサイトへ</a>(外部リンク)</p>
</div>
<div data-role="footer">
<h4>© <a href="http://h2o-space.com" rel="external">H2O Space.</a></h4>
</div>
</div>
</body>
</html>
[/xml]
これで、ページ内リンクに反応して自動的に、左右に画面がスライドするアニメーションが割り当てられます。
なお、外部リンクも同じように処理しようとしてしまい、正しくリンクがされなくなるため、「rel="external"」属性を付加する必要があります。デモはこちらからご覧ください。
- H2O Space. Blog 最新エントリ