jQuery ページネーション・ページング 2種類のプラグインをカスタマイズ(表示位置を改良)
プラグインの仕様を少し変更したいと思ったので、改修した箇所のメモです。
プラグイン:Pajinate
jquery.pajinate.js - version 0.4
配布元:
http://th3silverlining.com/2010/04/15/pajination-a-jquery-pagination-plugin/
デモ:
http://dl.dropboxusercontent.com/u/4151695/html/pajinate/examples/example1.html
実装:
CODE:
HTML: <div id="section"> <ul class="content"> <li>1件</li> <li>2件</li> <li>3件</li> </ul> <div class="page_navigation">(ナビゲーションの位置)</div> </div> JS: jQuery('#listSection').pajinate({ nav_label_prev: '前へ', //初期値 Prev nav_label_next: '次へ', //初期値 Next items_per_page : 40, //表示件数-初期値 10件 show_first_last: false //最初へ・最後へのリンク 非表示 });
カスタマイズ:
1. 縦長のコンテンツでページ切り替えした場合、画面の位置は変わらないので、ページ上部に移動したい。
CODE:
ファンクションgotopageの最後に ID=main の要素へ表示位置を変更する処理を追加
//line212: function gotopage(page_num){ //最後に追記 var target = $("#main"); if(target.size()){ var top = target.offset().top; $(jQuery.browser.safari ? 'body' : 'html').scrollTop(top); } }
プラグイン:jPaginate
jPaginate.js - Version 0.3
配布元:
http://vanity.enavu.com/download/
デモ:
http://vanity.enavu.com/demo/jPaginate/jPaginate.html
実装:
デフォルト記述。
CODE:
HTML: <ul id="content"> <li>1件</li> <li>2件</li> <li>3件</li> </ul> JS: jQuery("#content").jPaginate();
カスタマイズ:
1. 縦長のコンテンツでページ切り替えした場合、画面の位置は変わらないので、ページ上部に移動したい。
CODE:
ファンクションの最後に ID=main の要素へ表示位置を変更する処理を追加
//line176: $(".goto").live("click", function(e){ //ファンクション内の最後に追記 toTop(); }); //line183: $(".goto_next").live("click", function(e) { //ファンクション内の最後に追記 toTop(); }); //line192: $(".goto_previous").live("click", function(e) { //ファンクション内の最後に追記 toTop(); }); //174行目にファンクションを追加 function toTop(){ var target = $("#main"); if(target.size()){ var top = target.offset().top; $(jQuery.browser.safari ? 'body' : 'html').animate({scrollTop:top}, 800, 'swing'); } }
行数は変わっている可能性があります。
参考になれば幸いです。