基于JQuery的Pager分页器实现代码
2010-07-17 00:00
1231 查看
实例效果图如下
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030177/13a10c3f070e2ffec8b7e270637b50a9.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030177/eebf82eee8cde023b146bf6563713e2d.png)
使用说明
需要使用jQuery库文件和JQuery Pager库文件(目前版本1.1)
素材准备
分页器CSS样式文件,可复制如下CSS样式,可命名为Pager.css
实例代码
一,包含文件部分
一个CSS样式文件,二个JS库文件。
二,HTML部分(分页器显示div)
三,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
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030177/13a10c3f070e2ffec8b7e270637b50a9.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030177/eebf82eee8cde023b146bf6563713e2d.png)
使用说明
需要使用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; }
实例代码
一,包含文件部分
<link href="Pager.css" rel="stylesheet" type="text/css" /> <script src="jquery.js" type="text/javascript"></script> <script src="jquery.pager.js" type="text/javascript"></script>
一个CSS样式文件,二个JS库文件。
二,HTML部分(分页器显示div)
<h1 id="result">必优博客 jQuery分页器 </h1> <div id="pager" ></div>
三,javascript部分(jQuery插件JQuery Pager分页器调用)
<script type="text/javascript" language="javascript"> $(document).ready(function() { $("#pager").pager({ pagenumber: 1, pagecount: 15, buttonClickCallback: PageClick }); }); PageClick = function(pageclickednumber) { $("#pager").pager({ pagenumber: pageclickednumber, pagecount: 15, buttonClickCallback: PageClick }); $("#result").html("必优博客 jQuery分页器 当前第" + pageclickednumber + "页"); } </script>
四,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
相关文章推荐
- 基于JQuery的Pager分页器实现代码
- 基于JQuery的Pager分页器实现代码
- 基于jquery的选择标签至文本域效果,可多选/可过滤重复/可限制个数的实现代码
- 基于jquery的loading效果实现代码
- 基于jQuery实现的仿百度首页滑动选项卡效果代码
- 基于jquery的高性能td和input切换并可修改内容实现代码
- 基于jQuery的简单九宫格实现代码
- jQuery基于ajax实现星星评论代码
- 基于jquery的Repeater实现代码
- 基于jquery的loading 加载提示效果实现代码
- 基于jQuery的输入框无值自动显示指定数据的实现代码
- 基于jQuery实现的向下滑动二级菜单效果代码
- 基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
- 基于jquery的二级联动菜单实现代码
- 基于jQuery实现仿百度首页换肤背景图片切换代码
- 基于JQuery实现相同内容合并单元格的代码