开发技术学习

参照easyPage插件的思路，写了自己的一个分页插件，感觉目前还够用，只有"首页 上一页 下一页 尾页"几个按钮 分页的内容都是事先加载完毕的，所以对于那些更新速度快和要求页面加载速度的有一点不实用。 看一下jquery分页的具体代码： [php] /** * jQuery分页 * @author adophper.com * @version 1.0.0 * @date 2013-01-21 17:00:00 * @param contentslist 内容列表 * @param pageId 分页div * @param everyCount 每页显示的数据条数 * @param pagefirst 首页的class * @param pageprev 上一页的class * @param pagenext 下一页的class * @param pagelast 尾页的class * @param showPage 显示的页数,待完善 * 感谢 easypage原作者 */ ;(function($){ $.extend({ 'simplePage':function(options){ options = $.extend({//参数设置 contentslist: "contentslist",//内容$("#id"); pageId: "pageId",//分页导航放置的DIV everyCount: "5",//每页显示的数据条数 pagefirst: "first", pageprev: "prev", pagenext: "next", pagelast: "last", showPage: "3" }, options); var currentPage = 0; var contents = $("."+options.contentslist); var countPage = Math.ceil(contents.length/parseInt(options.everyCount)); //<a href="javascript:void(0)" class="prev" style="display:none;">上一页</a> &nbsp; <a href="javascript:void(0)" class="next">下一页</a> //拼接分页按钮 var navigatehtml = "<a href='javascript:void(0)' class='"+options.pagefirst+"'>首页</a><a href='javascript:void(0)' class='"+options.pageprev+"'>上一页</a>"; //for(var i = 1;i <= countPage;i++){ // navigatehtml+='<a href="javascript:void(0)" class="pagenavigate">'+i+'</a>'; //} navigatehtml+="<a href='javascript:void(0)' class='"+options.pagenext+"'>下一页</a><a href='javascript:void(0)' class='"+options.pagelast+"'>尾页</a>"; //加载分页按钮 $("#"+options.pageId).html(navigatehtml); //得到所有数字分页 //var navigate = $(".pagenavigate"); //隐藏分页按钮 //$.extend({ // 'hidePagenavigate': function(){ // navigate.each(function(){ // $(this).hide(); // }); // } //}); //显示分页按钮 //$.extend({ // 'showPagenavigate': function(currentnavigate){ // $.hidePagenavigate(); // var begin = currentnavigate>=options.showPage?currentnavigate-parseInt(options.showPage):0; // if (begin>navigate.length-2*options.showPage){ // begin = navigate.length - 2 * options.showPage; // } // for (var i = begin; i < currentnavigate+parseInt(options.showPage); i++){ // $(navigate[i]).show(); // } // } //}); //显示当前分页内容 $.extend({ 'showPage': function(currentPage){ //alert(currentPage); contents.each(function(contentindex){ if (contentindex >= currentPage*options.everyCount && contentindex < (currentPage+1)*options.everyCount){ $(this).show(); }else{ $(this).hide(); } }); if (currentPage == 0){ $("."+options.pagefirst).hide(); $("."+options.pageprev).hide(); $("."+options.pagenext).show(); $("."+options.pagelast).show(); }else if (currentPage == countPage - 1){ $("."+options.pagefirst).show(); $("."+options.pageprev).show(); $("."+options.pagenext).hide(); $("."+options.pagelast).hide(); }else{ $("."+options.pagefirst).show(); $("."+options.pageprev).show(); $("."+options.pagenext).show(); $("."+options.pagelast).show(); } } }); $.showPage(0); //上一页 $("."+options.pageprev).click(function(){ //alert(currentPage); currentPage--; $.showPage(currentPage); }); //下一页 $("."+options.pagenext).click(function(){ //alert(currentPage); currentPage++; $.showPage(currentPage); }); //首页 $("."+options.pagefirst).click(function(){ currentPage = 0; $.showPage(currentPage); }); //尾页 $("."+options.pagelast).click(function(){ currentPage = countPage - 1; $.showPage(currentPage); }); } }); })(jQuery) [/php] 页面调用方法： [php] $(function(){ /**分页**/ $.simplePage({"contentslist":"listQ li","pageId":"leftPage","everyCount":5,"pagefirst":"first","pageprev":"prev","pagenext":"next","pagelast":"last","showPage":3}); }); [/php]