实例效果图如下 使用说明 需要使用jQuery库文件和JQuery Pager库文件 (目前版本1.1) 素材准备 分页器CSS样式文件,可复制如下CSS样式,可命名为Pager.css
#pager ul.pages { display:block; border:none; text-transform:uppercase; font-size:10px; margin:10px 0 50px; padding:0; } #pager ul.pages li { list-style:none; float:left; border:1px solid #ccc; text-decoration:none; margin:0 5px 0 0; padding:5px; } #pager ul.pages li:hover { border:1px solid #003f7e; } #pager ul.pages li.pgEmpty { border:1px solid #eee; color:#eee; } #pager ul.pages li.pgCurrent { border:1px solid #003f7e; color:#000; font-weight:700; background-color:#eee; }
实例代码 一,包含文件部分
一个CSS样式文件,二个JS库文件。
二,HTML部分(分页器显示div)
必优博客 jQuery分页器
三,javascript部分(jQuery插件JQuery Pager分页器调用)
四,javascript代码(JQuery Pager调用)分析 (1)$("#pager").pager({});部分
pagenumber,表示初始页数,如:1
pagecount,表示总页数,如:15
buttonClickCallback,表示点击分页数按钮调用的方法,如:PageClick
(2)PageClick = function(pageclickednumber) {}部分
PageClick,表示自定义点击分页数时的function方法,如:function(pageclickednumber){}
jQuery插件JQuery Pager分页器只需要起始页数pagenumber,最大页数pagecount,点击页数时的调用buttonClickCallback的function方法就可实现javascript分页功能,实际应用中只需对PageClick方法进行简单修改就可使用,如将pagenumber和pagecount设为变量,可通过GET的方法进行页数值传递,JQuery Pager就可实现javascript分页功能,其它可自行扩展,同时对jQuery插件JQuery Pager分页器buttonClickCallback方法实现丰富的动态效果,供参考。
演示代码:
http://demo.jb51.net/js/jquery-pager/index.html