分享一个jQuery的超酷分页插件 - jPages

分享一个jQuery的超酷分页插件 - jPages

在线演示  本地下载

jQuery的分页插件很多,但是大都的功能都比较简单,今天我们分享一个非常酷的分页插件 - jPages,拥有丰富的功能和特效,大家肯定会喜欢!

jPages是一个典型的客户端分页插件,提供了相比其它分页插件更多的特性和功能。

分享一个jQuery的超酷分页插件 - jPages

主要特性

  • 自动翻页
  • 键盘和鼠标滚动浏览
  • 延缓页面内容显示
  • 完全自定义的分页导航支持
  • 如果需要特效或者lazyload,可和其它js类库整合:Animate.cssLazy Load
  • 支持各种类型的页面导航菜单,可供大家选择
  • 兼容主流浏览器及其IE7+

如何使用

添加如下代码到<head>区域:

<link rel="stylesheet" href="css/jPages.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="js/jPages.js"></script>

如果你使用Animate.css的话,你需要添加如下:

<link rel="stylesheet" href="css/animate.css">

演示代码如下:

<!-- Future navigation panel -->

<div class="holder"></div>



<!-- Item container (doesn't need to be an UL) -->

<ul id="itemContainer">

    <!-- Items -->

    <li>...</li>

    <li>...</li>

    <li>...</li>

    <li>...</li>

    <li>...</li>

    ...

</ul>

初始化插件:

$(function(){

    $("div.holder").jPages({

        containerID : "itemContainer"

    });

});

div.holder代码如下:

<!-- navigation panel -->

<div class="holder">

    <a class="jp-previous jp-disabled">← previous</a>

    <a class="jp-current">1</a>

    <span class="jp-hidden">...</span>

    <a>2</a>

    <a>3</a>

    <a>4</a>

    <a>5</a>

    <a class="jp-hidden">6</a>

    <a class="jp-hidden">7</a>

    <a class="jp-hidden">8</a>

    <a class="jp-hidden">9</a>

    <span>...</span>

    <a>10</a>

    <a class="jp-next">next →</a>

</div>

主要选项

  • containerID:需要实现分页的容器元素,可以是div或者UL,OL
  • first: 自定义”首页“button是否显示,缺省为false,如果传递字符串,则显示为“首页”文字。
  • previous:自定义”上一页“button是否显示
  • next:同上是否显示”下一页“button
  • last:是否显示”尾页“button
  • startPage:需要显示的开发页数,缺省为”1“
  • perPage:每页显示的项目数,缺省为”10“
  • midRange:显示包含当前页数显示页面数量,缺省为”5“
  • startRange:显示开始显示的页面数,无论目前你处于哪个页面,缺省”1”。
  • endRange:显示末尾显示的页面数,无论目前你处于哪个页面,缺省”1”。
  • callback:回调函数function(page, items){},pages对象属性,pages.current,pages.interval,pages.count
  • animation:使用Animate.css的动画效果,当然需要添加css3类库支持。
  • fallback:如果不使用CSS3动画,你可以使用fallback来设定jQuery的淡入效果的速度。

演示代码

/* when document is ready */

$(function(){



    /* initiate the plugin */

    $("div.holder").jPages({

        containerID  : "itemContainer",

        first: '首页',

        last: '尾页',

        previous: '上页',

        next: '下页',

        perPage: 12,

        startPage: 1,

        startRange: 2,

        midRange: 3,

        endRange: 2,

        animation: 'wobble',

        keyBrowse: true,

        callback    : function( pages, items ){

            /* lazy load current images */

            items.showing.find("img").trigger("turnPage");

            /* lazy load next page images */

            items.oncoming.find("img").trigger("turnPage");

        }

    });



});

你可能感兴趣的:(jquery)