有段时间没有分享我写的插件了，也有段时间没怎么分享前端知识了。今天与大家分享的是我工作中自己编写的一个分页插件，结合了css和jQuery后达到自渲染html、自解析页码链接的效果。
1.插件Html代码：
Html代码是非常简单的，一个带有class类的ul列表即可，class可以随意定义，但必须使用ul列表或ol列表，因为我在js中渲染页面链接时使用li来包含的。代码如下：
1 | <ul class="pageNav"><li>初始化中...</li></ul> |
2.插件Css代码：
css代码中用了一张sprite图片来定位页码链接的背景效果，阅读者可以结合js源码或用Firebug查看渲染后的Html源码进行对照查看css代码。代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | @charset "utf-8"; html, body { margin:0; padding:0; text-align:center; font:12px Verdana; color:#666;} a, a:hover { text-decoration:none; outline:none;} .pageNav { overflow:hidden; height:1%; padding:10px; margin:40px;} .pageNav li { float:left; padding-right:5px; height:22px; line-height:22px; list-style:none;} .pageNav li.pageInfo { color:#ccc; padding-right:10px;} .pageNav li .total_page_num, .pageNav li .curr_page_num { padding:0 5px;} .pageNav li a { display:block; border:1px solid #d4d5d8; height:20px; line-height:20px; text-align:center; background:url(pn.png) no-repeat;} .pageNav li.first a, .pageNav li.last a { width:24px; padding:0 5px;} .pageNav li.prev a, .pageNav li.next a { width:20px; text-indent:-9999px;} .pageNav li.prev a { background-position:0 0;} .pageNav li.prev a:hover { background-position:0 -20px;} .pageNav li.next a { background-position:0 -40px;} .pageNav li.next a:hover { background-position:0 -60px;} .pageNav li.pages a { width:20px;} .pageNav li.pages a.w2 { width:28px;} .pageNav li.pages a.w3 { width:36px;} .pageNav li.pages a.w4 { width:44px;} .pageNav li.pages a.w5 { width:52px;} .pageNav li.pages a.w6 { width:60px;} .pageNav li.first a, .pageNav li.last a, .pageNav li.pages a { height:20px; background-position:0 -80px; color:#999; background-repeat:repeat-x;} .pageNav li.first a:hover, .pageNav li.last a:hover, .pageNav li.pages a:hover { background-position:0 -100px; text-decoration:none;} .pageNav li.pages a.curr_page { background-position:0 -120px; color:#f60;} |
3.插件js代码：
插件的jQuery库我用了1.42版本，其实1.32版本也是可以使用的，主要是因为个人最近都一直在用1.42版本的，所以习惯了引入该版本的库！代码比较长，希望深入研究的朋友需要耐心阅读了！当然有不懂的地方可以给我发邮件或留言。代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 | /* * Author: Hiro Zhang * URL: http://www.ihiro.org/ * GTalk: hiro.zhd@gmail.com * Version: 1.0 * */ ;(function($) { /* * @param total_page_num 总页码 * @param show_page_size 显示的页码数 * @param callback 点击分页的回调函数 */ $.fn.pagenav = function(total_page_num, show_page_size, callback) { this.each(function() { //生成翻页导航的html代码 var html = '<li>总共<label class="total_page_num">' + total_page_num + '</label>页，当前第<label class="curr_page_num">1</label>页</li>'; html += '<li class="first"><a href="#first">首页</a></li><li class="prev"><a href="#prev">上一页</a></li>'; for(var i=1; i< =total_page_num; i++) { var classProp = ''; if(i==1) { classProp = ' class="curr_page"'; } else if(i>=10) { classProp = ' class="w2"'; } else if(i>=100) { classProp = ' class="w3"'; } else if(i>=1000) { classProp = ' class="w4"'; } else if(i>=10000) { classProp = ' class="w5"'; } else if(i>=100000) { classProp = ' class="w6"'; } else { classProp = ''; }; html += '<li class="pages"><a href="#' + i + '"'+ classProp +'>' + i + '</a></li>'; }; html += '<li class="next"><a href="#next">下一页</a></li><li class="last"><a href="#last">末页</a></li>'; $(this).html(html); if(total_page_num > show_page_size) { $(this).find('li.pages').slice(show_page_size, total_page_num).hide(); //加载后只显示预置的页数 $(this).find('li.pages:visible:last').after('<li class="more">...</li>'); }; }).find('a').live('click', function() { if($(this).hasClass('.curr_page')) { return false; }; var $pageNav = $(this).closest('ul'), $parentLi = $(this).parent('li'), total_page_num = parseInt($pageNav.find('.total_page_num').text()), //总的页数 last_page_pos = parseInt($pageNav.find('.curr_page').text()); //记录点击之前的位置 curr_page_num = parseInt($pageNav.find('.curr_page_num').text()); //当前页数 if($parentLi.hasClass('first')) { //首页 curr_page_num = 1; } else if($parentLi.hasClass('prev')) { //上一页 if(curr_page_num > 1) { //当前页码大于1时才会有上一页 curr_page_num--; }; } else if($parentLi.hasClass('next')) { //下一页 if(total_page_num > curr_page_num) { //总页码大于当前页码时才会有下一页 curr_page_num++; }; } else if($parentLi.hasClass('last')) { //末页 curr_page_num = total_page_num; } else { //根据点击数字翻页 curr_page_num = parseInt($(this).text()); }; if(curr_page_num == last_page_pos) { //若预查看的页和上一所在页相同，不做处理 return false; }; setPages($pageNav, curr_page_num, last_page_pos, total_page_num); $pageNav.find('.curr_page_num').text(curr_page_num) //设置当前页码 .end().find('a').removeClass('curr_page') //设置当前页样式 .end().find('li.pages a').eq(curr_page_num - 1).addClass('curr_page'); //设置当前页面的导航样式 //若有回调函数，则回调 if(callback) { callback(); }; return false; }); //检查页面数量，根据点击显示前后的页面数 var setPages = function(pageNav, curr_page_num, last_page_pos, total_page_num) { var leftLen = pageNav.find('li.pages').eq(curr_page_num).prevAll('li.pages:visible').size() - 1; //点击页码左边显示了的页码长度 var rightLen = pageNav.find('li.pages').eq(curr_page_num).nextAll('li.pages:visible').size() + 1; //点击页码右边显示了的页码长度 var changePos = (show_page_size%2 == 0) ? show_page_size/2 : (show_page_size - 1)/2; //只有但点击的页面的左边、或右边只有一个或0个链接时，才会加载新的链接 if(last_page_pos < curr_page_num ) { //预查看的页数比上一页数大 if(pageNav.find('li.pages:visible:last').text() == total_page_num) { pageNav.find('li.pages:visible:last').next('li.more').remove(); return false; }; if(curr_page_num == total_page_num) { //若是末页 pageNav.find('li.pages, li.more').hide() .end().find('li.pages').slice(curr_page_num - show_page_size, curr_page_num).show() .end().end().find('li.pages:visible:first').before('<li class="more">...'); return false; }; if(rightLen < = changePos - 1) { //若右边的显示页码只剩下不满一半的数目 pageNav.find('li.pages:visible:first').hide() .end().find('li.pages:visible:last').nextAll('li.pages:hidden:first').show(); setDotted(pageNav, total_page_num); }; } else if(curr_page_num <= last_page_pos ) { //预查看的页数比上一页数小 if(pageNav.find('li.pages:visible:first').text() == 1) { pageNav.find('li.pages:visible:first').prev('li.more').remove(); return false; }; if(curr_page_num == 1) { //若是首页 pageNav.find('li.pages, li.more').hide() .end().find('li.pages').slice(curr_page_num - 1, curr_page_num - 1 + show_page_size).show() .end().end().find('li.pages:visible:last').after('<li class="more">...'); return false; }; if(leftLen < = changePos - 1) { //若做边的显示页码只剩下不满一半的数目 pageNav.find('li.pages:visible:last').hide() .end().find('li.pages:visible:first').prevAll('li.pages:hidden:first').show(); setDotted(pageNav, total_page_num); }; } else if(last_page_pos == curr_page_num) { //预查看的页数等于上一页数，不做处理 return false; }; }; //设置省略号 var setDotted = function(pageNav, total_page_num) { pageNav.find('li.more').remove(); if(parseInt(pageNav.find('li.pages:visible:first').text()) != 1) { pageNav.find('li.pages:visible:first').before('<li class="more">...'); }; if(parseInt(pageNav.find('li.pages:visible:last').text()) != total_page_num) { pageNav.find('li.pages:visible:last').after('<li class="more">...</li>'); }; }; }; })(jQuery); |
4.插件调用方法：
1 2 3 4 5 6 7 8 9 10 11 12 | /* * @param total_page_num 总页码 * @param show_page_size 显示的页码数 * @param callback 点击分页的回调函数 */ <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="hiro.pagenav.js"></script> <script type="text/javascript"> jQuery(function($) { $('.pageNav').pagenav(20, 6); }); </script> |
下载压缩包中还有PSD背景的源码文件哦！呵呵！！！
辛苦了，谢谢分享。
效果非常不错！
这阵子总看你的www.ihiro.org了，自己的博客都懒的看了，太丑了，唉
呵呵，多多看看网上公用的主题，我也是这样看过来的！