jQuery mobileのプラグインを紹介します。
機能
タッチパネルで操作する場合、スワイプしてページを移ることができます。
普通のＰＣで開くと左と右に矢印が出るのでそれをクリックすることでページを移ることができます。
jQuery mobile1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>sample1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<!-- jquerymobileのcssの後に追記 -->
<link rel="stylesheet" type="text/css" href="./jquery.mobile.pagination.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<!-- jquerymobileのjsの後に記述 -->
<script type="text/javascript" src="./jquery.mobile.pagination.js"></script>
</head>
<body>
<section data-role="page" id="page01">
<header data-role="header">
<h1> header1 </h1>
</header><!-- /header -->
<ul data-role="pagination">
<li class="ui-pagination-prev"><a href="#page02">1</a></li>
<li class="ui-pagination-next"><a href="#page03">2</a></li>
</ul>
</section>
<section data-role="page" id="page02">
<header data-role="header" data-theme="b">
<h1> header2 </h1>
</header><!-- /header -->
<ul data-role="pagination">
<li class="ui-pagination-prev"><a href="#page03">1</a></li>
<li class="ui-pagination-next"><a href="#page01">2</a></li>
</ul>
</section>
<section data-role="page" id="page03">
<header data-role="header" data-theme="c" data-position="fixed">
<h1> header3 </h1>
</header><!-- /header -->
<ul data-role="pagination">
<li class="ui-pagination-prev"><a href="#page01">1</a></li>
<li class="ui-pagination-next"><a href="#page02">2</a></li>
</ul>
</body>
</html>
最終更新：2012年04月26日 21:41
