基于jquery.page.js的一款简单的分页效果，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\" />
<title>简单的jQuery分页插件</title>
<style>
*{ margin:0; padding:0; list-style:none;}
a{ text-decoration:none;}
a:hover{ text-decoration:none;}
.tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;text-align:center;}
.tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px; line-height: 25px; padding: 0 10px;border: 1px solid #ddd; margin: 0 2px;border-radius: 4px;vertical-align: middle;}
.tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;}
.tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca; border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;}
.tcdPageCode span.disabled{ display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px; color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}
</style>
</head>
<body>
<br><br><br>
<div class=\"tcdPageCode\"></div>
<center><pre><br>
</pre></center>
<script src=\"js/jquery-1.8.3.min.js\"></script>
<script src=\"js/jquery.page.js\"></script>
<script>
$(\".tcdPageCode\").createPage({
pageCount:100,
current:1,
backFn:function(p){
console.log(p);
}
});
</script>
</body>
</html>
调用方法如下：
$(\".tcdPageCode\").createPage({
pageCount:10,
current:1,
backFn:function(p){
//单击回调方法，p是当前页码
}
});
pageCount：总页数
current：当前页
以下是jquery.page.js源代码：
(function($){
var ms = {
init:function(obj,args){
return (function(){
ms.fillHtml(obj,args);
ms.bindEvent(obj,args);
})();
},
//填充html
fillHtml:function(obj,args){
return (function(){
obj.empty();
//上一页
if(args.current > 1){
obj.append(\'<a href=\"javascript:;\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" class=\"prevPage\">上一页</a>\');
}else{
obj.remove(\'.prevPage\');
obj.append(\'<span class=\"disabled\">上一页</span>\');
}
//中间页码
if(args.current != 1 && args.current >= 4 && args.pageCount != 4){
obj.append(\'<a href=\"javascript:;\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" class=\"tcdNumber\">\'+1+\'</a>\');
}
if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){
obj.append(\'<span>...</span>\');
}
var start = args.current -2,end = args.current+2;
if((start > 1 && args.current < 4)||args.current == 1){
end++;
}
if(args.current > args.pageCount-4 && args.current >= args.pageCount){
start--;
}
for (;start <= end; start++) {
if(start <= args.pageCount && start >= 1){
if(start != args.current){
obj.append(\'<a href=\"javascript:;\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" class=\"tcdNumber\">\'+ start +\'</a>\');
}else{
obj.append(\'<span class=\"current\">\'+ start +\'</span>\');
}
}
}
if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){
obj.append(\'<span>...</span>\');
}
if(args.current != args.pageCount && args.current < args.pageCount -2 && args.pageCount != 4){
obj.append(\'<a href=\"javascript:;\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" class=\"tcdNumber\">\'+args.pageCount+\'</a>\');
}
//下一页
if(args.current < args.pageCount){
obj.append(\'<a href=\"javascript:;\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" class=\"nextPage\">下一页</a>\');
}else{
obj.remove(\'.nextPage\');
obj.append(\'<span class=\"disabled\">下一页</span>\');
}
})();
},
//绑定事件
bindEvent:function(obj,args){
return (function(){
obj.on(\"click\",\"a.tcdNumber\",function(){
var current = parseInt($(this).text());
ms.fillHtml(obj,{\"current\":current,\"pageCount\":args.pageCount});
if(typeof(args.backFn)==\"function\"){
args.backFn(current);
}
});
//上一页
obj.on(\"click\",\"a.prevPage\",function(){
var current = parseInt(obj.children(\"span.current\").text());
ms.fillHtml(obj,{\"current\":current-1,\"pageCount\":args.pageCount});
if(typeof(args.backFn)==\"function\"){
args.backFn(current-1);
}
});
//下一页
obj.on(\"click\",\"a.nextPage\",function(){
var current = parseInt(obj.children(\"span.current\").text());
ms.fillHtml(obj,{\"current\":current+1,\"pageCount\":args.pageCount});
if(typeof(args.backFn)==\"function\"){
args.backFn(current+1);
}
});
})();
}
}
$.fn.createPage = function(options){
var args = $.extend({
pageCount : 10,
current : 1,
backFn : function(){}
},options);
ms.init(this,args);
}
})(jQuery);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容