【応用編】ページング

検索エンジンの検索結果ページのように、
一度に表示しきれない場合にページを分ける方法があり、
ページングと呼ばれています。
タブパネルと同じように、表示させるコンテンツは別ファイルを
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>

ページングサンプル

This entry was written by admin , posted on 水曜日 6月 22 2011at 03:06 pm , filed under 応用例 and tagged , , , . Bookmark the permalink . Post a comment below or leave a trackback: Trackback URL.

Comments are closed.