Jquery分页接下来和prev

时间:2012-11-21 17:14:47

标签: jquery pagination next

我希望实现典型的分页行为,因此当我点击下一步时,上一页会向左和向右滚动。

目前有效,但没有移动到下一个数字。

希望通过下面的PNG更有意义

enter image description here 我的演示很明确,但我不能做更多。

http://jsfiddle.net/B5zCu/99/

我的jquery

$('ol > li').each(function() {
    $(this).prepend("<a>" + ($(this).index() +1) +  "</a>");

    $('ol > li').eq(0).addClass('first-page');
    $('ol > li').last().addClass('last-page');
    $('ol > li').eq(-2).addClass('space').children('a').text('...');
    $('ol > li').eq(1).css('margin-left', '40px');
    $('ol > li').eq(6).addClass('seven').css('margin-right', '100px');  

});

$('.pagination li').on('click', function(event) {
  event.preventDefault();
  var $this = $(this),
      $pagination = $this.parent(),
      $pages = $pagination.children(),
      $active = $pagination.find('.active');

  if($this.hasClass('a.prev')) {
    if ($pages.index($active) > 0) {
      $active.removeClass('active').prev().addClass('active');
    }
  } else if($this.hasClass('a.next')) {
    if ($pages.index($active) < $pages.length - 1) {
      $active.removeClass('active').next().addClass('active');
    }
  } else {
    $this.addClass('active').siblings().removeClass('active');
  }

  $active = $pagination.find('.active');

  $('a.prev')[$pages.index($active) == 0 ? 'addClass' : 'removeClass']('disabled');
  $('a.next')[$pages.index($active) == $pages.length - 1 ? 'addClass' : 'removeClass']('disabled');

});


$('.pagination li:eq(0)').trigger('click');

0 个答案:

没有答案