之前報館項目用的前端框架easyui，還是用不太習慣，因此換了一個框架，最近為此找分頁插件，偶然間看見一個非常好用的分頁插件JPaginate
Paginate是基於jquery的分頁插件，非常輕量，沒有任何侵入性，當然所能做的也就非常少。事實上它的作用僅僅是提供一個好看的分頁樣式，只提供一個觸發事件。但是輕量帶來了巨大的靈活性,讓它可以提供任何內容的分頁服務。
示例代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta charset="utf-8" /> <title>jQuery Pagination - jPaginate</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="description" content="jPaginate - jQuery Pagination Plugin" /> <meta name="keywords" content="jquery, plugin, pagination, fancy" /> <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script src="jquery.paginate.js" type="text/javascript"></script> <style> </style> </head> <body> <br><br><br> <div class="tcdPageCode"></div> <script> $(function(){ $(".tcdPageCode").paginate({ count : 50, start : 20, display : 12, border : true, border_color : '#BEF8B8', border_hover_color : '#68BA64', text_color : '#79B5E3', background_color : 'none', text_hover_color : '#2573AF', background_hover_color : 'none', images : false, mouse : 'press', onChange:function(p){ alert("p="+p);//輸出的p為頁碼 } }); }); </script> </body> </html>
效果示例如下：
怎么樣，心動不如行動，一起試試吧