基于JQuery的Pager分页器实现代码 |
|
本文标签：JQuery,Pager,分页器 实例效果图如下   使用说明 需要使用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 |
