首页 | 4121 | 300 | 1600 | 添加收藏 上一个 下一个
jQuery分页插件jPages

jPages是一个客户端分页插件,它比其他大多数插件多了很多功能,比如自动翻页,滚动浏览,显示延迟,完全可定制的导航面板也集成项目与Animate.css和延迟加载。


兼容所有的浏览器


使用方法


下面的代码添加到您的网页的部分:


<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”源代码将看起来像(创建10页)


!-- 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>