【応用編】ページング
検索エンジンの検索結果ページのように、
一度に表示しきれない場合にページを分ける方法があり、
ページングと呼ばれています。
タブパネルと同じように、表示させるコンテンツは別ファイルを
Ajaxで読み込む方法で作りましょう。
【jQuery】
<script type=”text/javascript”>
$(function(){
//初期のページを読み込み
$(“#content”).load($(“ul.pager li a:first”).attr(“href”)+” #content”);
$(“ul.pager li a:first”).addClass(“selected”);
$(“ul.pager li a”).click(function(){
$(“#content”).html(‘<p><img src=”images/loading.gif” /></p>’);
$(“#content”).data(“file”,$(this).attr(“href”));
//アニメーションでページを切り替え
$(“html,body”).animate({ scrollTop: $(“h1″).offset().top
-20},’slow’,’swing’,function(){
$(“#content”).load($(“#content”).data(“file”)+” #content”);
});
$(“ul.pager li a”).removeClass(“selected”);
$(this).addClass(“selected”);
$(“h1″).text($(this).attr(“title”));
return false;
});
});
</script>
【HTML】
<h1>織田家臣団</h1>
<div id=”content”>
<p class=”loading”><img src=”images/loading.gif” /></p>
</div>
<u class=”pager”l>
<li><a href=”oda.html” title=”織田家臣団”>1</a></li>
<li><a href=”takeda.html” title=”武田家臣団”>2</a></li>
<li><a href=”uesugi.html” title=”上杉家臣団”>3</a></li>
</ul>