网站建设资讯

NEWS

网站建设资讯

jQuerypager.js插件动态分页功能实例分析

本文实例讲述了jQuery pager.js 插件动态分页功能。分享给大家供大家参考,具体如下:

为工农等地区用户提供了全套网页设计制作服务,及工农网站建设行业解决方案。主营业务为网站设计制作、网站制作、工农网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

pager.js 代码

function Page(opt){
   var set = $.extend({num:null,startnum:1,elem:null,callback:null},opt||{});
   if(set.startnum>set.num||set.startnum<1){
     set.startnum = 1;
   }
   var n = 0,htm = '';
   var clickpages = {
     elem:set.elem,
     num:set.num,
     callback:set.callback,
     init:function(){
      this.elem.next('div.pageJump').children('.button').unbind('click')
      this.JumpPages();
      this.elem.children('li').click(function () {
        var txt = $(this).children('a').text();
        var page = '', ele = null;
        var page1 = parseInt(clickpages.elem.children('li.active').attr('page'));
        if (isNaN(parseInt(txt))) {
         switch (txt) {
           case '下一页':
            if (page1 == clickpages.num) {
              return;
            }
            if (page1 >= (clickpages.num - 2) || clickpages.num <= 6 || page1 < 3) {
              ele = clickpages.elem.children('li.active').next();
            } else {
              clickpages.newPages('next', page1 + 1);
              ele = clickpages.elem.children('li.active');
            }
            break;
           case '上一页':
            if (page1 == '1') {
              return;
            }
            if (page1 >= (clickpages.num - 1) || page1 <= 3 || clickpages.num <= 6) {
              ele = clickpages.elem.children('li.active').prev();
            } else {
              clickpages.newPages('prev', page1 - 1);
              ele = clickpages.elem.children('li.active');
            }
            break;
           case '首页':
            if (page1 == '1') {
              return;
            }
            if (clickpages.num > 6) {
              clickpages.newPages('首页', 1);
            }
            ele = clickpages.elem.children('li[page=1]');
            break;
           case '尾页':
            if (page1 == clickpages.num) {
              return;
            }
            if (clickpages.num > 6) {
              clickpages.newPages('尾页', clickpages.num);
            }
            ele = clickpages.elem.children('li[page=' + clickpages.num + ']');
            break;
           case '...':
            return;
         }
        } else {
        //   if ((parseInt(txt) >= (clickpages.num - 3) || parseInt(txt) <= 3) && clickpages.num > 6) {
        //    clickpages.newPages('jump', parseInt(txt));
        //   }
        //   ele = $(this);
        // }
        // page = clickpages.actPages(ele);
        // if (page != '' && page != page1) {
        //   if (clickpages.callback){
        //    clickpages.callback(parseInt(page));
        //   }
        var i = parseInt(txt);
        if(isNaN(i)||(i<=0)||i>clickpages.num){
         return;
        }else if(clickpages.num>6){
         clickpages.newPages('jump',i);
        }else{
         var ele = clickpages.elem.children('li[page='+i+']');
         clickpages.actPages(ele);
         if (clickpages.callback){
           clickpages.callback(i);
         }
         return;
        }
        if (clickpages.callback){
         clickpages.callback(i);
        }
        }
      });
     },
     //active
     actPages:function (ele) {
      ele.addClass('active').siblings().removeClass('active');
      return clickpages.elem.children('li.active').text();
     },
     JumpPages:function () {
      this.elem.next('div.pageJump').children('.button').click(function(){
        var i = parseInt($(this).siblings('input').val());
        if(isNaN(i)||(i<=0)||i>clickpages.num){
         return;
        }else if(clickpages.num>6){
         clickpages.newPages('jump',i);
        }else{
         var ele = clickpages.elem.children('li[page='+i+']');
         clickpages.actPages(ele);
         if (clickpages.callback){
           clickpages.callback(i);
         }
         return;
        }
        if (clickpages.callback){
         clickpages.callback(i);
        }
      })
     },
     //newpages
     newPages:function (type, i) {
      var html = "",htmlLeft="",htmlRight="",htmlC="";
      var HL = '
  • ...
  • '; html = '
  • 首页
  • ' for (var n = 0;n<5;n++){ htmlC += '
  • '+(i+n-1)+'
  • '; htmlLeft += '
  • '+(n+2)+'
  • '; htmlRight += '
  • '+(set.num+n-5)+'
  • '; } switch (type) { case "next": if(i<=4){ html+='
  • 1
  • '+htmlLeft+HL+'
  • '+set.num+'
  • '; }else if(i>=(set.num-3)){ html+='
  • 1
  • '+HL+htmlRight+'
  • '+set.num+'
  • '; }else{ html += '
  • 1
  • '+HL+htmlC+HL+'
  • '+set.num+'
  • '; } break; case "prev": if(i<=4){ html+='
  • 1
  • '+htmlLeft+HL+'
  • '+set.num+'
  • '; }else if(i>=(set.num-3)){ html+='
  • 1
  • '+HL+htmlRight+'
  • '+set.num+'
  • '; }else{ html += '
  • 1
  • '+HL+htmlC+HL+'
  • '+set.num+'
  • '; } break; case "首页" : html+='
  • 1
  • '+htmlLeft+HL+'
  • '+set.num+'
  • '; break; case "尾页" : html+='
  • 1
  • '+HL+htmlRight+'
  • '+set.num+'
  • '; break; case "jump" : if(i<=4){ if(i==1){ html+='
  • 1
  • '+htmlLeft+HL+'
  • '+set.num+'
  • '; }else{ html+='
  • 1
  • '+htmlLeft+HL+'
  • '+set.num+'
  • '; } }else if((i>=set.num-3)&&(set.num>=7)){ if(i==set.num){ html+='
  • 1
  • '+HL+htmlRight+'
  • '+set.num+'
  • '; }else{ html+='
  • 1
  • '+HL+htmlRight+'
  • '+set.num+'
  • '; } }else{ html += '
  • 1
  • '+HL+htmlC+HL+'
  • '+set.num+'
  • '; } } html += '
  • 尾页
  • '; if (this.num > 5 || this.num < 3) { set.elem.html(html); clickpages.init({num:set.num,elem:set.elem,callback:set.callback}); } } } if(set.num<=1){ $(".pagination").html(''); return; }else if(parseInt(set.num)<=6){ n = parseInt(set.num); var html='
  • 首页
  • '; for(var i=1;i<=n;i++){ if(i==set.startnum){ html+='
  • '+i+'
  • '; }else{ html+='
  • '+i+'
  • '; } } html +='
  • 尾页
  • '; set.elem.html(html); clickpages.init(); }else{ clickpages.newPages("jump",set.startnum) } }

    上面是 pager.js部分

    html部分

    
    
    
    
    前往

    更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

    希望本文所述对大家jQuery程序设计有所帮助。


    文章标题:jQuerypager.js插件动态分页功能实例分析
    网站链接:http://cdweb.net/article/gddehd.html