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

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

在线演示  本地下载

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

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

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

主要特性

  • 自动翻页
  • 键盘和鼠标滚动浏览
  • 延缓页面内容显示
  • 完全自定义的分页导航支持
  • 如果需要特效或者lazyload，可和其它js类库整合：Animate.css 和 Lazy 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");
        }
    });

});
复制代码
posted @   igeekbar  阅读(6589)  评论(7)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库

中文互联： GBin1.com | RSS订阅 | 邮件订阅 | 手机订阅

点击右上角即可分享
微信分享提示