sunrise

介紹一個分頁插件，那么什么叫QuickPaginate快速分頁，這個插件實現就是將需要顯示的內容用分頁的方法顯示，但不是真正意義上的分頁， 因為QuickPaginate快速分頁不需要與服務器端交互，所有的內容已經全部輸送到客戶端，每次顯示部分信息，用分頁的形式進行瀏覽，效果圖如下：

使用說明
一，需要jQuery庫文件和QuickPaginate庫文件
二，可自定義分頁CSS顯示效果，如：qp_prev和qp_next

使用實例
一，包含文件部分

1. <script src="jquery.js" type="text/javascript" ></script>
2. <script src="jquery.quickpaginate.js" type="text/javascript" ></script>

二，HTML部分
(1)jQuery插件QuickPaginate實現文本分頁功能

1. <ul id="biuuu_city_list">
2. <li>北京</li>
3. <li>上海</li>
4. <li>廣州</li>
5. <li>杭州</li>
6. <li>長沙</li>
7. <li>合肥</li>
8. <li>寧夏</li>
9. <li>成都</li>
10. <li>西安</li>
11. <li>南昌</li>
12. </ul>
13. <div id="biuuu_city"></div>

其中ID為biuuu_city_list的DIV是要實現分頁的內容，ID為biuuu_city是顯示分頁內容，具體看效果圖

(2)jQuery插件QuickPaginate實現圖片分頁功能

1. <div id="images">
2. <img src="demo_images/demo1.jpg" width="200" height="133" alt="biuuu1" />
3. <img src="demo_images/demo2.jpg" width="200" height="133" alt="biuuu2" />
4. <img src="demo_images/demo3.jpg" width="200" height="133" alt="biuuu3" />
5. </div>
6. <div id="images_counter"></div>

三，javascript部分(調用jQuery插件QuickPaginate)

1. <script type="text/javascript">
2. $(function(){
3. $("#biuuu_city_list li").quickpaginate({ perpage: 4, pager : $("#biuuu_city") });
4. });
5. $(function(){
6. $("#images img").quickpaginate({ perpage: 1, showcounter: false, pager : $("#images_counter") });
7. });
8. </script>

jQuery插件QuickPaginate參數詳解
perpage表示每頁顯示數，默認值為6，如上文本實例每頁顯示4個城市，圖片實例每頁顯示1張圖片
pager表示QuickPaginate生成分頁HTML代碼顯示的對象，默認為null，如上：$("#biuuu_city")和$("#images_counter")
showcounter表示是否顯示統計，默認為true
prev表示上一頁CSS樣式名，默認為qp_next，具體請看QuickPaginate生成的代碼圖
next表示下一頁CSS樣式名，默認為qp_prev
pagenumber表示當前頁CSS樣式名，默認為qp_pagenumber
totalnumber表示總頁數CSS樣式名，默認為qp_totalnumber
counter表示統計CSS樣式名，默認為qp_counter

注意事項
注意默認的QuickPaginate是UTF8編碼，同時需要修改部分QuickPaginate的JS庫代碼，如將prev修改為中文上一頁，next修改為中文下一頁，其實就是分頁樣式，上面的參數中大部分都是定義某個部分的樣式，因為樣式也是非常重要的。

以上實例可知使用jQuery插件QuickPaginate快速分頁非常簡單，只需要指定內容，指定每頁顯示數，顯示樣式，即可實現快速分頁功能，在實際應用中，可對菜單、圖片等進行分頁，非常具有實用性，值得推薦。

點我下載jQuery插件QuickPaginate快速分頁程序
點我查看jQuery插件QuickPaginate快速分面演示