jquery分頁外掛程式

本文轉載至：http://www.jqueryajax.com/jquery652 今天比大家介紹一個jquery分頁外掛程式，那麼什麼叫QuickPaginate快速分頁，這個jquery外掛程式實現就是將需要顯示的內容用分頁的方法顯示，但不是真正意義上的分頁，因為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快速分面示範