jQuery_pager.js分页
在做前端项目中,总是需要自己手写类似于这样的分页效果:
这就需要使用jQuery.pager.js文件,其使用方法为:在html中引入三个文件,分别为:
<link rel="stylesheet" type="text/css" href="../Pager.css"/> <script src="../jquery.min.js"></script> <script type="text/javascript" src="../jquery.pager.js"></script>
特此附上Pager.css文件:
#pager ul.pages{ display:block; border:none; text-transform:uppercase; font-size:12px;margin:10px 0 50px;padding:0; } #pager ul.pages li{ /*list-style:none;*/ /*float:left;*/ /*border:1px solid #ccc;*/ /*text-decoration:none;*/ margin:0px 5px 0 0; border: 1px solid #e3e3e3; color: #333; display: inline-block; height: 22px; line-height: 22px; padding: 0 10px; text-align: center; _zoom:1;*display:inline; } #pager ul.pages li.page-number:hover{ /*border:1px solid #003f7e; */ background:#f1f1f1; color:#000; text-decoration:none } #pager ul.pages li.pgEmpty{ border:1px solid #eee; color:#eee; } #pager ul.pages li.pgCurrent,#pager ul.pages li.pgCurrent:hover{ /*border:1px solid #3c90d9;*/ /*color: #fff;*/ /*font-weight:700;*/ /*/!*background-color:#eee;*!/*/ /*background: #3c90d9 none repeat scroll 0 0;*/ background: #007cdb none repeat scroll 0 0; border: 1px solid #007cdb; color: #fff; /*display: inline-block;*/ height: 22px; line-height: 22px; padding: 0 10px; text-align: center; } /*#pager ul.pages li {*/ /*background: rgba(0, 0, 0, 0) url("../images/web/pages.png") no-repeat scroll 0 5px;*/ /*}*/ #pager{ margin-left: 290px; margin-top: 15px; padding: 14px 0 25px; text-align: center; height: 35px; } .pages li.total { border: 1px solid #e3e3e3; color: #333; } #pager ul.pages{ display:block; border:none; text-transform:uppercase; font-size:12px;margin:10px 0 50px;padding:0; } #pager ul.pages:hover{ background: none;} #pager ul.pages li{ /*list-style:none;*/ /*float:left;*/ /*border:1px solid #ccc;*/ /*text-decoration:none;*/ margin:0px 5px 0 0; border: 1px solid #e3e3e3; color: #333; display: inline-block; height: 22px; line-height: 22px; padding: 0 10px; text-align: center; } #pager ul.pages li.page-number:hover{ /*border:1px solid #003f7e; */ background:#f1f1f1; color:#000; text-decoration:none } #pager ul.pages li.pgEmpty{ border:1px solid #eee; color:#eee; } #pager ul.pages li.pgCurrent,#pager ul.pages li.pgCurrent:hover{ /*border:1px solid #3c90d9;*/ /*color: #fff;*/ /*font-weight:700;*/ /*/!*background-color:#eee;*!/*/ /*background: #3c90d9 none repeat scroll 0 0;*/ background: #007cdb none repeat scroll 0 0; border: 1px solid #007cdb; color: #fff; display: inline-block; height: 22px; line-height: 22px; padding: 0 10px; text-align: center; } #pager{ /*margin-left: 290px;*/ margin-top: 25px; padding: 14px 0 25px; text-align: center; } /*20160226添加*/ .pages li.total{cursor:auto}
jquery.pager.js文件:
/* * jQuery pager plugin * Version 1.0 (12/22/2008) * @requires jQuery v1.2.6 or later * * Example at: http://jonpauldavies.github.com/JQuery/Pager/PagerDemo.html * * Copyright (c) 2008-2009 Jon Paul Davies * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * * Read the related blog post and contact the author at http://www.j-dee.com/2008/12/22/jquery-pager-plugin/ * * This version is far from perfect and doesn't manage it's own state, therefore contributions are more than welcome! * * Usage: .pager({ pagenumber: 1, pagecount: 15, buttonClickCallback: PagerClickTest }); * * Where pagenumber is the visible page number * pagecount is the total number of pages to display * buttonClickCallback is the method to fire when a pager button is clicked. * * buttonClickCallback signiture is PagerClickTest = function(pageclickednumber) * Where pageclickednumber is the number of the page clicked in the control. * * The included Pager.CSS file is a dependancy but can obviously tweaked to your wishes * Tested in IE6 IE7 Firefox & Safari. Any browser strangeness, please report. */ (function($) { $.fn.pager = function(options) { var opts = $.extend({}, $.fn.pager.defaults, options); return this.each(function() { // empty out the destination element and then render out the pager with the supplied options $(this).empty().append(renderpager(parseInt(options.pagenumber), parseInt(options.pagecount), options.buttonClickCallback)); // specify correct cursor activity $('.pages li').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto"; }); }); }; // render and return the pager with the supplied options function renderpager(pagenumber, pagecount, buttonClickCallback) { // setup $pager to hold render var $pager = $('<ul class="pages"></ul>'); // add in the previous and next buttons //$pager.append(renderButton('first', pagenumber, pagecount, buttonClickCallback)).append(renderButton('prev', pagenumber, pagecount, buttonClickCallback)); if(pagecount>1&&pagenumber!=1){ $pager.append(renderButton('上一页', pagenumber, pagecount, buttonClickCallback)); } // pager currently only handles 10 viewable pages ( could be easily parameterized, maybe in next version ) so handle edge cases var startPoint = 1; var endPoint = 5; if (pagenumber > 4 && pagenumber<pagecount-1) { startPoint = pagenumber - 2; endPoint = pagenumber + 2; } if(pagenumber>pagecount-2&& pagenumber<pagecount+1){ startPoint = pagecount - 4; endPoint = pagecount; } if (endPoint > pagecount) { startPoint = pagecount - 8; endPoint = pagecount; } if (startPoint < 1) { startPoint = 1; } // loop thru visible pages and render buttons for (var page = startPoint; page <= endPoint; page++) { var currentButton = $('<li class="page-number">' + (page) + '</li>'); page == pagenumber ? currentButton.addClass('pgCurrent') : currentButton.click(function() { buttonClickCallback(this.firstChild.data); }); currentButton.appendTo($pager); } // render in the next and last buttons before returning the whole rendered control back. //$pager.append(renderButton('next', pagenumber, pagecount, buttonClickCallback)).append(renderButton('last', pagenumber, pagecount, buttonClickCallback)); var allPage = $('<li class="total">' + (pagenumber)+("/")+(pagecount)+"页" + '</li>'); allPage.appendTo($pager); if(pagecount>1&&pagenumber!=pagecount){ $pager.append(renderButton('下一页', pagenumber, pagecount, buttonClickCallback)); } return $pager; } // renders and returns a 'specialized' button, ie 'next', 'previous' etc. rather than a page number button function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) { var $Button = $('<li class="pgNext">' + buttonLabel + '</li>'); var destPage = 1; // work out destination page for required button type switch (buttonLabel) { case "first": destPage = 1; break; case "上一页": destPage = pagenumber - 1; break; case "下一页": destPage = pagenumber + 1; break; case "last": destPage = pagecount; break; } // disable and 'grey' out buttons if not needed. if (buttonLabel == "first" || buttonLabel == "上一页") { pagenumber <= 1 ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); }); } else { pagenumber >= pagecount ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); }); } return $Button; } // pager defaults. hardly worth bothering with in this case but used as placeholder for expansion in the next version $.fn.pager.defaults = { pagenumber: 1, pagecount: 1 }; })(jQuery);
直接将这两个文件保存在自己的项目之中使用即可。
而在HTML中:
<h1 id="result">Click the pager below.</h1> <div id="pager"></div>
<script type="text/javascript" language="javascript"> //pagenumber 为当前页码 //pagecount 为显示页数 //PageClick 为回调函数 //pageclickednumber 为点击页码 $(document).ready(function() { $("#pager").pager({ pagenumber: 1, pagecount: 10, buttonClickCallback: PageClick }); }); PageClick = function(pageclickednumber) { $("#pager").pager({ pagenumber: pageclickednumber, pagecount: 10, buttonClickCallback: PageClick }); $("#result").html("Clicked Page " + pageclickednumber); } </script>
结果:
这样,简单的分页功能就完成了。
作者:郑叶叶
出处:http://www.cnblogs.com/zhengyeye
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。