先端改ページ機能の実現と原理（jQuery）

18881 ワード
jQuery 改ページ
ページ分けのシーンはよく電気商のウェブサイトで見られます。例えば、タオバオの猫のコメントエリアでは、ページ分けの機能は一般的にバックグラウンドで実現されます。フロントエンドの要求が完了します。暇で退屈しています。書いて遊びます。機能だけを実現します。パッケージはありません。
jqに基づいて改ページ機能を実現し、大きく分けて以下のステップに分けられる。
  • は、ページ分け方法を定義し、何度も
    • を呼び出すことができる。
  • パラメータ設定
  • データページジャンプを要求する方法
  • デジタル以外のボタンとデータコンテンツエリア
    • を作成します。
  • デジタルボタン
    • を作成します。
  • 首のスクリーンローディング
  • 呼び出し
    • 構造層は容器一つだけが必要です。<div class="pagination-nick"></div>一、改ページ方法を定義する
    
function paginationNick(opt){
//code
}
    二、パラメータ設定
    いくつかの必要なコンテナのクラスといくつかの変更可能なデフォルトのデータのパラメータ
    
var pager={
 paginationBox:'',//    --   
 mainBox:'',//    --  
 numBtnBox:'',//      --   
 btnBox:'',//     --  
 ipt:'',//input class--   
 goBtn:'',//go btn class --  
 currentBtn:'',//    class name --  
 pageCount:5,//        
 numBtnCount:3,//               
 currentPage:0,//    data-page，     
 maxCount:0,//ajax           
 data:[]//ajax     
 };
 pager = $.extend(pager,opt);
    三、要求データページのジャンプ方法
    すべてのボタンを作成するときは、カスタム属性data-pageでジャンプするページ番号情報を保持しています。呼び出し時は、この属性をパラメータとしてジャンプページ判定に使用します。
    
function goPage(btn){
//code
}
    Objはajaxのためにデータを要求する（シミュレーションのために）。
    
var obj={other:{},value:[11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0]};
    展示されているデータをPager.data（array）に割り当てます。pager.data=obj.value;ajax要求データの最大ページ番号を設定します。
    
pager.maxCount=pager.data.length % pager.pageCount ? parseInt(pager.data.length / pager.pageCount) +1 :
pager.data.length / pager.pageCount;
    現在のページ番号を設定
    
if(!isNaN(btn)){//    
  pager.currentPage=parseInt(btn);
 }else{
  switch(btn){
  case 'first':
  pager.currentPage=0;
  break;
  case 'prev':
  if(pager.currentPage>0){
  --pager.currentPage;
  }
  break;
  case 'next':
  if(pager.currentPage+1<pager.maxCount){
  ++pager.currentPage;
  }
  break;
  case 'last':
  pager.currentPage=pager.maxCount-1;
  break;
  }
 }
    デジタルボタンの作成createNumBtn(pager.currentPage);ページ番号を入力ボックスにジャンプするvalueを割り当てて、現在のページ番号を表します。$('.'+pager.btnBox+' .'+pager.ipt).val(pager.currentPage+1);コンテンツエリアの塗りつぶしデータ
    
var arr=[],str='';
 arr=pager.data.slice(pager.pageCount*pager.currentPage,
  pager.data.length - pager.pageCount*(pager.currentPage+1) > -1 ?
  pager.pageCount*(pager.currentPage+1) : pager.data.length);
 arr.forEach(function(v){
  str+='<div>'+v+'</div>';
 });
 $('.'+pager.mainBox).html(str);
    四、数字以外のボタンとデータコンテンツエリアを作成する
    
 function createOtherBtn(){
//code
}
    内容を塗りつぶす
    
$('.'+pager.paginationBox).html('<div class="'+pager.btnBox+'"><button data-page="first" class="first-btn">  </button><button data-page="prev" class="prev-btn">   </button><span class="'+pager.numBtnBox+'"></span><button data-page="next" class="next-btn">   </button><input type="text" placeholder="     " class="'+pager.ipt+'"><button class="'+pager.goBtn+'">  go</button><button data-page="last" class="last-btn">  </button></div><div class="'+pager.mainBox+'"></div>');
    ipt valueの変化を監督し、go btn data-pageに価値を与える。
    
$('.'+pager.btnBox+' .'+pager.ipt).change(function(){
  if(!isNaN($(this).val())){//   
  　　　　　　　　if($(this).val() > pager.maxCount){//  value   ，    
  　　　　　　　　　$(this).val(pager.maxCount);
  }
  if($(this).val()<1){//  value   ，    
  $(this).val(1);
  }
  }else{//     value
  $(this).val('');
  }
$('.'+pager.btnBox+' .'+pager.goBtn).attr('data-page',$(this).val() ? $(this).val()-1 : '');
 });
    各btnバインディング要求データページジャンプ方法
    
$('.'+pager.btnBox+' button').each(function(i,v){
 $(this).click(function(){
  //               
  if(v.getAttribute('data-page') && v.getAttribute('data-page') != pager.currentPage){
  goPage(v.getAttribute('data-page'));
  }
  });
 });
    五、数字ボタンの作成
    
 function createNumBtn(page){
//code
}
    デジタルボタンエリアを作成
    数字のボタンを現在のページの左右2つに分けて分析します。注意すべき点は全部注釈をつけました。
    
var str='';
 if(pager.maxCount>pager.numBtnCount*2){//                  （pager.numBtnCount*2+1） 
  //       pager.numBtnCount     
  if(page-pager.numBtnCount>-1){//     pager.numBtnCount  page   0  
  for(var m=pager.numBtnCount;m>0;m--){
  str+='<button data-page="'+(page-m)+'">'+(page-m+1)+'</button>';
  }
  }else{
  for(var k=0;k<page;k++){
  str+='<button data-page="'+k+'">'+(k+1)+'</button>';
  }
  }
  str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//  
  if(pager.maxCount-page>3){//     pager.numBtnCount  page   0  
  for(var j=1;j<pager.numBtnCount+1;j++){
  str+='<button data-page="'+(page+j)+'">'+(page+j+1)+'</button>';
  }
  }else{
  for(var i=page+1;i<pager.maxCount;i++){
  str+='<button data-page="'+i+'">'+(i+1)+'</button>';
  }
  }
  /*                 pager.numBtnCount*2+1 ，
      ，    */
  if(str.match(/<\/button>/ig).length<pager.numBtnCount*2+1){
 str='';
 if(page<pager.numBtnCount){//              
  for(var n=0;n<page;n++){//    
  　　str+='<button data-page="'+n+'">'+(n+1)+'</button>';
  }
 str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//  
  for(var x=1;x<pager.numBtnCount*2+1-page;x++){//    
  　　 str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>';
  }
  }
 　　if(pager.maxCount-page-1<pager.numBtnCount){
  　　　　for(var y=pager.numBtnCount*2-(pager.maxCount-page-1);y>0;y--){//    
  　　　　　　str+='<button data-page="'+(page-y)+'">'+(page-y+1)+'</button>';
  }
 str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//  
  for(var z=page+1;z<pager.maxCount;z++){//    
  　　 str+='<button data-page="'+z+'">'+(z+1)+'</button>';
  }
  }
  }
 }else{
  str='';
  for(var n=0;n<page;n++){//    
  　　　　　str+='<button data-page="'+n+'">'+(n+1)+'</button>';
  }
 str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//  
  for(var x=1;x<pager.maxCount-page;x++){//    
  　　　　str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>';
  }
 }
 $('.'+pager.numBtnBox).html(str);
    各btnバインディング要求データページジャンプ方法
    
 $('.'+pager.numBtnBox+' button').each(function(i,v){
  $(this).click(function(){
  goPage(v.getAttribute('data-page'));
  });
 });
    ボタンを無効にする
    
$('.'+pager.btnBox+' button').not('.'+pager.currentBtn).attr('disabled',false);
 if(!page){//     　　　　　　$('.'+pager.btnBox+' .first-btn').attr('disabled',true);
  $('.'+pager.btnBox+' .prev-btn').attr('disabled','disabled');
 }
 if(page==pager.maxCount-1){//   
  　　　　　　$('.'+pager.btnBox+' .last-btn').attr('disabled',true);
  $('.'+pager.btnBox+' .next-btn').attr('disabled',true);
 }
    六、初画面ロード
    
 createOtherBtn();//             
 goPage();//                   ，       currentPage
    七、呼び出し
    
paginationNick({
 paginationBox:'pagination-nick',//    --  
 mainBox:'main-box-nick',//    --  
 numBtnBox:'num-box-nick',//      --   
 btnBox:'btn-box-nick',//     --  
 ipt:'page-ipt-nick',//input class--   
 goBtn:'go-btn-nick',//go btn class --  
 currentBtn:'active-nick'//    class name --  
 });
    注意すべき点はコメントを全部つけました。
    完全コード:
    
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>pagination-nick</title>
 <style>
 button{
 padding:5px;
 margin:5px;
 }
 .active-nick{
 color:red;
 }
 input{
 width:50px;
 text-align:center;
 }
 </style>
</head>
<body>
 <div class="pagination-nick"></div>
 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script>
//         ，     
 function paginationNick(opt){
//     
 var pager={
 paginationBox:'',//    --   
 mainBox:'',//    --  
 numBtnBox:'',//      --   
 btnBox:'',//     --  
 ipt:'',//input class--   
 goBtn:'',//go btn class --  
 currentBtn:'',//    class name --  
 pageCount:5,//        
 numBtnCount:3,//               
 currentPage:0,//    data-page，     
 maxCount:0,//ajax           
 data:[]//ajax     
 };
 pager = $.extend(pager,opt);
 //          
 function goPage(btn){
 //obj ajax    
 var obj={other:{},value:[11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0]};
 //         pager.data (array)
 pager.data=obj.value;
 //  ajax           
 pager.maxCount=pager.data.length % pager.pageCount ? parseInt(pager.data.length / pager.pageCount) +1 :
  pager.data.length / pager.pageCount;
//       
 if(!isNaN(btn)){//    
  pager.currentPage=parseInt(btn);
 }else{
  switch(btn){
  case 'first':
  pager.currentPage=0;
  break;
  case 'prev':
  if(pager.currentPage>0){
  --pager.currentPage;
  }
  break;
  case 'next':
  if(pager.currentPage+1<pager.maxCount){
  ++pager.currentPage;
  }
  break;
  case 'last':
pager.currentPage=pager.maxCount-1;
  break;
  }
 }
 //      
 createNumBtn(pager.currentPage);
 //           value，      
 $('.'+pager.btnBox+' .'+pager.ipt).val(pager.currentPage+1);
//        
 var arr=[],str='';
 arr=pager.data.slice(pager.pageCount*pager.currentPage,
  pager.data.length - pager.pageCount*(pager.currentPage+1) > -1 ?
  pager.pageCount*(pager.currentPage+1) : pager.data.length);
 arr.forEach(function(v){
  str+='<div>'+v+'</div>';
 });
 $('.'+pager.mainBox).html(str);
 }
 //             
 function createOtherBtn(){
 $('.'+pager.paginationBox).html('<div class="'+pager.btnBox+'"><button data-page="first" class="first-btn">  </button><button data-page="prev" class="prev-btn">   </button><span class="'+pager.numBtnBox+'"></span><button data-page="next" class="next-btn">   </button><input type="text" placeholder="     " class="'+pager.ipt+'"><button class="'+pager.goBtn+'">  go</button><button data-page="last" class="last-btn">  </button></div><div class="'+pager.mainBox+'"></div>');
 //ipt value      go btn data-page
$('.'+pager.btnBox+' .'+pager.ipt).change(function(){
  if(!isNaN($(this).val())){//   
  if($(this).val() > pager.maxCount){//  value   ，    
  $(this).val(pager.maxCount);
  }
  if($(this).val()<1){//  value   ，    
  $(this).val(1);
  }
  }else{//     value
  $(this).val('');
  }
$('.'+pager.btnBox+' .'+pager.goBtn).attr('data-page',$(this).val() ? $(this).val()-1 : '');
 });
 //  btn            
 $('.'+pager.btnBox+' button').each(function(i,v){
  $(this).click(function(){
  //               
  if(v.getAttribute('data-page') && v.getAttribute('data-page') != pager.currentPage){
  goPage(v.getAttribute('data-page'));
  }
  });
 });
 }
 //      
 function createNumBtn(page){
 //page   index 0  ，   page      
 var str='';
 if(pager.maxCount>pager.numBtnCount*2){//                  （pager.numBtnCount*2+1） 
  //       pager.numBtnCount     
  if(page-pager.numBtnCount>-1){//     pager.numBtnCount  page   0  
  for(var m=pager.numBtnCount;m>0;m--){
  str+='<button data-page="'+(page-m)+'">'+(page-m+1)+'</button>';
  }
  }else{
  for(var k=0;k<page;k++){
  str+='<button data-page="'+k+'">'+(k+1)+'</button>';
  }
  }
  str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//  
  if(pager.maxCount-page>3){//     pager.numBtnCount  page   0  
  for(var j=1;j<pager.numBtnCount+1;j++){
  str+='<button data-page="'+(page+j)+'">'+(page+j+1)+'</button>';
  }
  }else{
  for(var i=page+1;i<pager.maxCount;i++){
  str+='<button data-page="'+i+'">'+(i+1)+'</button>';
  }
  }
  /*                 pager.numBtnCount*2+1 ，
      ，    */
  if(str.match(/<\/button>/ig).length<pager.numBtnCount*2+1){
  str='';
  if(page<pager.numBtnCount){//              
  for(var n=0;n<page;n++){//    
  str+='<button data-page="'+n+'">'+(n+1)+'</button>';
  }
  str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//  
  for(var x=1;x<pager.numBtnCount*2+1-page;x++){//    
  str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>';
  }
  }
  if(pager.maxCount-page-1<pager.numBtnCount){
  for(var y=pager.numBtnCount*2-(pager.maxCount-page-1);y>0;y--){//    
  str+='<button data-page="'+(page-y)+'">'+(page-y+1)+'</button>';
  }
  str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//  
  for(var z=page+1;z<pager.maxCount;z++){//    
  str+='<button data-page="'+z+'">'+(z+1)+'</button>';
  }
  }
  }
 }else{
  str='';
  for(var n=0;n<page;n++){//    
  str+='<button data-page="'+n+'">'+(n+1)+'</button>';
  }
  str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//  
  for(var x=1;x<pager.maxCount-page;x++){//    
  str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>';
  }
 }
 $('.'+pager.numBtnBox).html(str);

 //  btn            
 $('.'+pager.numBtnBox+' button').each(function(i,v){
  $(this).click(function(){
  goPage(v.getAttribute('data-page'));
  });
 });
 //    
 $('.'+pager.btnBox+' button').not('.'+pager.currentBtn).attr('disabled',false);
 if(!page){//   
  $('.'+pager.btnBox+' .first-btn').attr('disabled',true);
  $('.'+pager.btnBox+' .prev-btn').attr('disabled','disabled');
 }
 if(page==pager.maxCount-1){//   
  $('.'+pager.btnBox+' .last-btn').attr('disabled',true);
  $('.'+pager.btnBox+' .next-btn').attr('disabled',true);
 }
 }
 //    
 createOtherBtn();//             
 goPage();//                   ，       currentPage
 }
 //  
 paginationNick({
 paginationBox:'pagination-nick',//    --  
 mainBox:'main-box-nick',//    --  
 numBtnBox:'num-box-nick',//      --   
 btnBox:'btn-box-nick',//     --  
 ipt:'page-ipt-nick',//input class--   
 goBtn:'go-btn-nick',//go btn class --  
 currentBtn:'active-nick'//    class name --  
 });
 </script>
</body>
</html>
    以上が本文の全部です。本文の内容は皆さんの学習や仕事に一定の助けをもたらしてくれると同時に、私達を応援してください。
    phpマジックの方法の機能と用法の実例は分析します。
    JavaScriptイベントのメモリとパフォーマンスに対する影響