jQuery数字分页效果代码实例
分类:实例代码
本章节分享一段代码实例,它实现了数字分页效果。
点击对应数字或者两端箭头按钮可以实现翻页效果,代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> .pagingUl { float: right; padding: 0; margin: 0; list-style: none; } .pagingUl li { float: left; width: 30px; height: 30px; list-style: none; text-align: center; } .pagingUl li a { text-decoration: none; display: inline-block; width: 30px; height: 30px; text-align: center; line-height: 28px; padding: 0; background: #fafafa; color: #666; font-size: 12px; border: 1px solid #ddd; } .prv, .next { width: 30px; height: 30px; float: left; text-align: center; line-height: 30px; border: 1px solid #ddd; cursor: pointer; } .first, .last { width: 30px; height: 30px; font-size: 12px; text-align: center; line-height: 30px; border: 1px solid #ddd; cursor: pointer; } .pageTest { width: 1000px; height: 50px; margin-top: 100px; } .activP { background-color: #367fa9 !important; color: #fff !important; } .prv, .first { border-right: none; } .next, .last { border-left: none; } .prv, .first, .next, .last { float: right; } .pagingUl li::selection, .pagingUl li a::selection { background: transparent; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> (function($){ $.fn.page = function(options){ var defaults = { pageNumber:10 }; var opts = $.extend({},defaults, options); var method = { init:function(_this){ var arr = {}; arr.next = _this.find(".next"); arr.first = _this.find(".first"); arr.last = _this.find(".last"); arr.prev = _this.find(".prv"); arr.pagingUl = _this.find(".pagingUl"); arr.li = arr.pagingUl.find("li"); arr.a = arr.li.find("a"); arr.activP = arr.li.find(".activP"); method.nextClick(arr); method.prevClick(arr); method.liClick(arr); method.firstClick(arr); method.lastClick(arr); method.firstActivP(arr); }, nextClick:function(arr){ arr.next.on("click",function(){ arr.num = arr.li.find(".activP").text()-1; if(arr.num==arr.li.last().find(arr.a).text()-1){ arr.li.last().find(arr.a).addClass("activP"); arr.li.last().siblings("li").find(arr.a).removeClass("activP"); } else if ((arr.num > (parseInt(arr.li.first().find(arr.a).text()) - 2)) && (arr.num < (parseInt(arr.li.last().find(arr.a).text()) - 1))) { arr.a.eq(arr.num).removeClass("activP"); arr.a.eq(arr.num).parent("li").next().find(arr.a).addClass("activP"); arr.a.eq(arr.num).parent("li").next().siblings("li").find(arr.a).removeClass("activP"); arr.num = arr.num+1; } }) }, firstActivP:function(arr){ arr.li.first().find(arr.a).addClass("activP"); }, prevClick:function(arr){ arr.prev.on("click",function(){ arr.num = arr.li.find(".activP").text(); if(arr.num==arr.li.first().find(arr.a).text()){ arr.li.first().find(arr.a).addClass("activP"); arr.li.first().siblings("li").find(arr.a).removeClass("activP"); } else if ((arr.num > parseInt(arr.li.first().find(arr.a).text())) && (arr.num < (parseInt(arr.li.last().find(arr.a).text()) + 1))) { arr.num = arr.num-1; arr.a.eq(arr.num).removeClass("activP"); arr.a.eq(arr.num).parent("li").prev().find(arr.a).addClass("activP"); arr.a.eq(arr.num).parent("li").prev().siblings("li").find(arr.a).removeClass("activP"); } }) }, liClick:function(arr){ arr.li.on("click",function(){ $(this).find(arr.a).addClass("activP"); $(this).siblings("li").find(arr.a).removeClass("activP"); arr.num = $(this).find(arr.a).text()-1; }) }, firstClick:function(arr){ arr.first.on("click",function(){ arr.li.first().find(arr.a).addClass("activP"); arr.li.first().siblings("li").find(arr.a).removeClass("activP"); arr.num = arr.li.first().find(arr.a).text()-1; }) }, lastClick:function(arr){ arr.last.on("click",function(){ arr.li.last().find(arr.a).addClass("activP"); arr.li.last().siblings("li").find(arr.a).removeClass("activP"); arr.num = arr.li.last().find(arr.a).text()-1; }) }, pageNum:function(_this){ var arr = {}; arr.pagingUl = _this.find(".pagingUl"); arr.str = '<ul class="pagingUl">'; for(var i = 1;i<opts.pageNumber+1;i++){ arr.str += '<li><a href="javascript:;">'+i+'</a></li>' } arr.str += '</ul>'; _this.find(".next").after(arr.str); } }; method.pageNum($(this)); method.init($(this)); }; })(jQuery); $(function () { $(".pageTest").page({ pageNumber: 7 }) }) </script> </head> <body> <div class="pageTest"> <div class="last">末页</div> <div class="next">»</div> <div class="prv">«</div> <div class="first">首页</div> </div> </body> </html>
jQuery数字分页效果代码实例,这样的场景在实际项目中还是用的比较多的,关于jQuery数字分页效果代码实例就介绍到这了。
jQuery数字分页效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。