jqueryでページング効果を作成する方法

今回はjqueryでページングエフェクトを作成する方法を紹介します。jqueryを使用してページングエフェクトを作成する際の注意点を実際に見てみましょう。

jquery.page.jsに基づく簡単なページング効果です。具体的な内容は次のとおりです

nbsp;html> 
 
 
<meta> 
<title>简单的jQuery分页插件</title> 
<style> 
*{ margin:0; padding:0; list-style:none;} 
a{ text-decoration:none;} 
a:hover{ text-decoration:none;} 
.tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;text-align:center;} 
.tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px; line-height: 25px; padding: 0 10px;border: 1px solid #ddd; margin: 0 2px;border-radius: 4px;vertical-align: middle;} 
.tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;} 
.tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca; border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;} 
.tcdPageCode span.disabled{ display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px; color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;} 
</style> 
 
 
<br><br><br> 
<p></p> 
<center><pre class="brush:php;toolbar:false"><br> 

  <script></script>  <script></script>  <script> $(".tcdPageCode").createPage({ pageCount:100, current:1, backFn:function(p){ console.log(p); } }); </script>   

呼び出しメソッドは次のとおりです:

$(".tcdPageCode").createPage({
pageCount:10,
current:1,
backFn:function(p){
//单击回调方法，p是当前页码
}
});

pageCount: 総ページ数
current: 現在のページ

以下は jquery.page .js のソース コードです:

(function($){ 
  var ms = { 
    init:function(obj,args){ 
      return (function(){ 
        ms.fillHtml(obj,args); 
        ms.bindEvent(obj,args); 
      })(); 
    }, 
    //填充html 
    fillHtml:function(obj,args){ 
      return (function(){ 
        obj.empty(); 
        //上一页 
        if(args.current > 1){ 
          obj.append('<a>上一页</a>'); 
        }else{ 
          obj.remove('.prevPage'); 
          obj.append('<span>上一页</span>'); 
        } 
        //中间页码 
        if(args.current != 1 && args.current >= 4 && args.pageCount != 4){ 
          obj.append('<a>'+1+'</a>'); 
        } 
        if(args.current-2 > 2 && args.current  5){ 
          obj.append('<span>...</span>'); 
        } 
        var start = args.current -2,end = args.current+2; 
        if((start > 1 && args.current  args.pageCount-4 && args.current >= args.pageCount){ 
          start--; 
        } 
        for (;start = 1){ 
            if(start != args.current){ 
              obj.append('<a>'+ start +'</a>'); 
            }else{ 
              obj.append('<span>'+ start +'</span>'); 
            } 
          } 
        } 
        if(args.current + 2 = 1 && args.pageCount > 5){ 
          obj.append('<span>...</span>'); 
        } 
        if(args.current != args.pageCount && args.current '+args.pageCount+''); 
        } 
        //下一页 
        if(args.current 下一页'); 
        }else{ 
          obj.remove('.nextPage'); 
          obj.append('<span>下一页</span>'); 
        } 
      })(); 
    }, 
    //绑定事件 
    bindEvent:function(obj,args){ 
      return (function(){ 
        obj.on("click","a.tcdNumber",function(){ 
          var current = parseInt($(this).text()); 
          ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount}); 
          if(typeof(args.backFn)=="function"){ 
            args.backFn(current); 
          } 
        }); 
        //上一页 
        obj.on("click","a.prevPage",function(){ 
          var current = parseInt(obj.children("span.current").text()); 
          ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount}); 
          if(typeof(args.backFn)=="function"){ 
            args.backFn(current-1); 
          } 
        }); 
        //下一页 
        obj.on("click","a.nextPage",function(){ 
          var current = parseInt(obj.children("span.current").text()); 
          ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount}); 
          if(typeof(args.backFn)=="function"){ 
            args.backFn(current+1); 
          } 
        }); 
      })(); 
    } 
  } 
  $.fn.createPage = function(options){ 
    var args = $.extend({ 
      pageCount : 10, 
      current : 1, 
      backFn : function(){} 
    },options); 
    ms.init(this,args); 
  } 
})(jQuery);

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

要素を追加するときにjQueryがバインディングイベントをトリガーできない場合の対処方法

携帯電話番号の定期的な確認式

JSで左右のメニューを追加および削除する方法

jQuery を使用して animate.css コードをカプセル化する方法

以上がjqueryでページング効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。