之前报馆项目用的前端框架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>
效果示例如下:
怎么样,心动不如行动,一起试试吧