jQuery的分頁插件很多，但是大都的功能都比較簡單，今天我們分享一個非常酷的分頁插件 - jPages，擁有豐富的功能和特效，大家肯定會喜歡！
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"); } }); });