因为第一次写jq插件,中心有自创他人的代码。
(function(){
var ms = {
fillHtml: function(obj, option) {
obj.empty();
var totalPage = option.pageCount,
pageHtml = "",
dotHtml = "<li><a>...</a></li>",
tempHtml = "";
if (option.currentPage > 5) {
tempHtml = "<li><a class=page-num>1</a></li><li><a class=page-num>2</a></li><li><a>...</a></li>";
for(var i = option.currentPage - 2 ; i <= (option.currentPage + 2 > totalPage ? totalPage : option.currentPage + 2); i++) {
var temp = "<li><a class=page-num>" +i+ "</a></li>";
if (option.currentPage === i ) {
temp = '<li class="current-page"><a href class=page-num>'+ i +'</a></li>';
}
if (option.currentPage >= totalPage - 2) {
dotHtml = "";
}
pageHtml += temp;
};
}else {
for(var i = 1; i <= ( 6 > totalPage ? totalPage : 6); i++) {
var temp = "<li><a class=page-num>" +i+ "</a></li>";
if (option.currentPage === i ) { //增加选中蓝色背景
temp = '<li class="current-page"><a class=page-num>'+ i +'</a></li>';
};
if (option.currentPage >= totalPage - 2) {
dotHtml = "";
}
pageHtml += temp;
};
}
pageHtml = '<ul>'+
'<li class="prev-page"><a>上一页</a></li>' + tempHtml +
pageHtml + dotHtml +
'<li class="next-page"><a>下一页</a></li></ul>';
obj.append(pageHtml);
},
bindEvent: function(obj, option) {
$(obj).on("click",".page-num",function(){
if ($(this).parent("li") && $(this).parent("li").hasClass('current-page')) {
return;
}
var current = Number( $(this).text() ); //点击的页数
ms.fillHtml(obj, {"currentPage": current, "pageCount": option.pageCount});
option.backFunction();
});
$(obj).on("click",".next-page",function(){
var current = Number( $(".current-page a").text() ); //下一页
if (current === option.pageCount){
return;
}
ms.fillHtml(obj, {"currentPage": current + 1, "pageCount": option.pageCount});
option.backFunction();
});
$(obj).on("click",".prev-page",function(){
var current = Number( $(".current-page a").text() ); //上一页
if (current === 1){
return;
}
ms.fillHtml(obj, {"currentPage": current-1, "pageCount": option.pageCount});
option.backFunction();
});
},
init: function(obj, option){
return (function(){
ms.fillHtml(obj, option);
ms.bindEvent(obj, option);
})();
}
};
$.fn.creatPage = function(option) {
var initOption = {
pageCount: 10,
currentPage: 1,
backFunction: function(){}
};
option.pageCount = Number(option.pageCount);
option.currentPage = Number(option.currentPage);
var option = $.extend(initOption, option);
ms.init(this, option);
}
})()
HTML
<div class="mod-page-cont" id="pageCont">
</div>
用法
$("#pageCont").creatPage({
pageCount: 18, //总页数
currentPage: 1, //当前选中页
backFunction: function(){ //回调函数
}
});