介紹一個分頁插件，那么什么叫QuickPaginate快速分頁，這個插件實現就是將需要顯示的內容用分頁的方法顯示，但不是真正意義上的分頁， 因為QuickPaginate快速分頁不需要與服務器端交互，所有的內容已經全部輸送到客戶端，每次顯示部分信息，用分頁的形式進行瀏覽，效果圖如下：
使用說明
一，需要jQuery庫文件和QuickPaginate庫文件
二，可自定義分頁CSS顯示效果，如：qp_prev和qp_next
使用實例
一，包含文件部分
- <script src="jquery.js" type="text/javascript" ></script>
- <script src="jquery.quickpaginate.js" type="text/javascript" ></script>
二，HTML部分
(1)jQuery插件QuickPaginate實現文本分頁功能
- <ul id="biuuu_city_list">
- <li>北京</li>
- <li>上海</li>
- <li>廣州</li>
- <li>杭州</li>
- <li>長沙</li>
- <li>合肥</li>
- <li>寧夏</li>
- <li>成都</li>
- <li>西安</li>
- <li>南昌</li>
- </ul>
- <div id="biuuu_city"></div>
其中ID為biuuu_city_list的DIV是要實現分頁的內容，ID為biuuu_city是顯示分頁內容，具體看效果圖
(2)jQuery插件QuickPaginate實現圖片分頁功能
- <div id="images">
- <img src="demo_images/demo1.jpg" width="200" height="133" alt="biuuu1" />
- <img src="demo_images/demo2.jpg" width="200" height="133" alt="biuuu2" />
- <img src="demo_images/demo3.jpg" width="200" height="133" alt="biuuu3" />
- </div>
- <div id="images_counter"></div>
三，javascript部分(調用jQuery插件QuickPaginate)
- <script type="text/javascript">
- $(function(){
- $("#biuuu_city_list li").quickpaginate({ perpage: 4, pager : $("#biuuu_city") });
- });
- $(function(){
- $("#images img").quickpaginate({ perpage: 1, showcounter: false, pager : $("#images_counter") });
- });
- </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快速分面演示