前端的翻页插件有很多,bootstrap的翻页界面看起来就不错,做起来也易于上手,但应用于项目中的翻页实现还有有几个难点,分别是:
1. 如何封装一个翻页插件,如题中的yunm.pager.js。
2. 涉及到的div局部刷新该如何做。
翻页的总体流程涉及到的知识点很多,这篇文章我们也主要来关注以上两点,其余的内容,请自悟。
### 一、效果1 ###
![这里写图片描述][20160811104607469]
#### 2、效果2(分局两侧) ####
![这里写图片描述][20160826154011260]
### 二、如何定义局部刷新的div ###
翻页时,我们一般只会刷新页面中涉及到翻页的父级div,那么该如何定义呢?
1. 为div定义id,建议为当前页面唯一,如果页面有多个翻页组件。
2. 为div创建一个同级的form表单。
* rel属性指向div,表明该form表单属于support\_deal\_page的div。
* target属性为turnPageForm,表明该form为翻页组件的form。
* action 参数自然不可或缺。
* 定义page 的input标签,表明为第一页。
* 定义rows的input标签,表明每页有显示两个。
div定义完后,页面加载load的时候,我们就可以请求后台(后台怎么处理数据,这里就不罗嗦了),获取第一页的分页数据。
// 根据form的target属性,获取需要分页的div,发起ajax请求。
$("form[target=turnPageForm]", $p).each(function() {
var $this = $(this);
YUNM.debug('form[target=turnPageForm]' + $this.selector);
var rel = $this.attr("rel");
var $box = $this.parent().find("#" + rel);
if (rel) {
$box.ajaxUrl({
type : "POST",
// 记录div的id
url : $this.attr("action") + "?rel=" + rel,
data : $this.serializeArray(),
callback : function() {
}
});
}
});
ajaxUrl : function(op) {
var $this = $(this);
$.ajax({
type : op.type || 'GET',
url : op.url,
data : op.data,
cache : false,
success : function(response) {
var json = YUNM.jsonEval(response);
if (json[YUNM.keys.statusCode] == YUNM.statusCode.error) {
if (json[YUNM.keys.message])
$.showErr(json[YUNM.keys.message]);
} else {
// ajax请求获取成功后,将局部刷新的内容放到div中
$this.html(response).initUI();
if ($.isFunction(op.callback))
op.callback(response);
}
},
error : YUNM.ajaxError,
statusCode : {
503 : function(xhr, ajaxOptions, thrownError) {
$.showErr("服务器当前负载过大或者正在维护!" || thrownError);
}
}
});
},
页面首次加载的时候,我们将第一页的数据放到div中,这一步也很简单。
### 三、封装翻页组件 yunm.pager.js ###
完成第一步后,如何将翻页组件封装,就成为接下来的关键步骤了。
(function($) {
$.fn.extend({
pager : function(opts) {
// 可参照bootstrap的翻页,为了获得前一页和后一页的按钮组件
var setting = {
prev$ : "li.previous",
next$ : "li.next",
};
return this.each(function() {
var $this = $(this);
var pc = new Pager(opts);
// 参照bootstrap翻页
$this.html('
+ '
');var $prev = $this.find(setting.prev$);
var $next = $this.find(setting.next$);
if (pc.hasPrev()) {
// 如果有前一页,绑定前一页事件
_bindEvent($prev, pc.getCurrentPage() - 1, pc.rel());
} else {
// 否则置灰
$prev.addClass("disabled");
}
if (pc.hasNext()) {
_bindEvent($next, pc.getCurrentPage() + 1, pc.rel());
} else {
$next.addClass("disabled");
}
});
// 绑定点击事件,主要传递第几页
function _bindEvent($target, pageNum, rel) {
$target.bind("click", {
pageNum : pageNum
}, function(event) {
yunmPageBreak({
rel : rel,
data : {
pageNum : event.data.pageNum
}
});
event.preventDefault();
});
}
},
});
// 翻页的必要参数
var Pager = function(opts) {
this.opts = $.extend({
rel : "", // 用于局部刷新div id号
totalCount : 0,//总数
numPerPage : 10,// 默认显示10个
currentPage : 1,// 当前页
callback : function() {
return false;
}
}, opts);
};
$.extend(Pager.prototype, {
rel : function() {
return this.opts.rel;
},
// 每页显示多少个
numPages : function() {
return Math.ceil(this.opts.totalCount / this.opts.numPerPage);
},
// 当前页
getCurrentPage : function() {
var currentPage = parseInt(this.opts.currentPage);
if (isNaN(currentPage))
return 1;
return currentPage;
},
// 能否向前翻页
hasPrev : function() {
return this.getCurrentPage() > 1;
},
// 向后翻页
hasNext : function() {
return this.getCurrentPage() < this.numPages();
}
});
})(jQuery);
function yunmPageBreak(options) {
var op = $.extend({
rel : "",
data : {
pageNum : "",
},
callback : null
}, options);
if (op.rel) {
var $box = $("#" + op.rel);
// 获得局部刷新的div后,就可以获得同级的form表单
var form = $("form[target=turnPageForm]", $box.parent()).get(0);
if (form) {
// 第几页
if (op.data.pageNum)
form[YUNM.pageInfo.pageNum].value = op.data.pageNum;
$box.ajaxUrl({
type : "POST",
url : $(form).attr("action") + "?rel=" + op.rel,
data : $(form).serializeArray(),
callback : function() {
}
});
}
}
}
### 四、翻页应用 ###
封装了翻页组件后,我们来看看怎么使用。
${deal.name}
currentPage="${vo.pageNum}">
1. 指定div的class为turnPagePager,页面load的时候我们将其转换为pager组件。
2. 将其关键属性rel、totalCount、numPerPage、currentPage进行赋值。
页面load的时候进行转换:
$("div.turnPagePager", $p).each(function() {
var $this = $(this);
$this.pager({
rel : $this.attr("rel"),
totalCount : $this.attr("totalCount"),
numPerPage : $this.attr("numPerPage"),
currentPage : $this.attr("currentPage")
});
});
--------------------
### 五、分局两侧的翻页效果 ###
在一的效果图中,你可以看到第二种效果图,就是翻页处于内容的两侧,这个也很常见,那么我们来看一下实现方法。
#### ①、yunm.pager.js(新) ####
(function($) {
$.fn.extend({
pager : function(opts) {
// 可参照bootstrap的翻页,为了获得前一页和后一页的按钮组件
var setting = {
prev$ : "li.previous",
next$ : "li.next",
};
return this.each(function() {
var $this = $(this);
var pc = new Pager(opts);
if (pc.type() == 'arrow') {
$this.html('
+ '
');} else {
// 参照bootstrap翻页
$this.html('
- ' + '
- ← 前一页'
+ '
后一页 →' + '');}
var $prev = $this.find(setting.prev$);
var $next = $this.find(setting.next$);
if (pc.hasPrev()) {
// 如果有前一页,绑定前一页事件
_bindEvent($prev, pc.getCurrentPage() - 1, pc.rel());
} else {
// 否则置灰
if (pc.type() == 'arrow') {
$prev.addClass("hide");
} else {
$prev.addClass("disabled");
}
}
if (pc.hasNext()) {
_bindEvent($next, pc.getCurrentPage() + 1, pc.rel());
} else {
if (pc.type() == 'arrow') {
$next.addClass("hide");
} else
$next.addClass("disabled");
}
});
// 绑定点击事件,主要传递第几页
function _bindEvent($target, pageNum, rel) {
$target.bind("click", {
pageNum : pageNum
}, function(event) {
yunmPageBreak({
rel : rel,
data : {
pageNum : event.data.pageNum
}
});
event.preventDefault();
});
}
},
});
// 翻页的必要参数
var Pager = function(opts) {
this.opts = $.extend({
type : "",// 指定翻页的类型,目前支持两种样式
rel : "", // 用于局部刷新div id号
totalCount : 0,// 总数
numPerPage : 10,// 默认显示10个
currentPage : 1,// 当前页
callback : function() {
return false;
}
}, opts);
};
$.extend(Pager.prototype, {
rel : function() {
return this.opts.rel;
},
type : function() {
return this.opts.type;
},
// 每页显示多少个
numPages : function() {
return Math.ceil(this.opts.totalCount / this.opts.numPerPage);
},
// 当前页
getCurrentPage : function() {
var currentPage = parseInt(this.opts.currentPage);
if (isNaN(currentPage))
return 1;
return currentPage;
},
// 能否向前翻页
hasPrev : function() {
return this.getCurrentPage() > 1;
},
// 向后翻页
hasNext : function() {
return this.getCurrentPage() < this.numPages();
}
});
})(jQuery);
#### ②、翻页应用(新) ####
currentPage="${vo.pageNum}">
1. 外层的div上加上arrow\_page式样。
2. 里层的div加上type属性,指定为arrow。
页面加载时:
$("div.turnPagePager", $p).each(function() {
var $this = $(this);
YUNM.debug('div.turnPagePager' + $this.selector);
$this.pager({
rel : $this.attr("rel"),
type : $this.attr("type"),// 设置type
totalCount : $this.attr("totalCount"),
numPerPage : $this.attr("numPerPage"),
currentPage : $this.attr("currentPage")
});
});
新增式样
.arrow_page { padding: 0; height: 0; }
.pager .left>a,.pager .left>a:HOVER,.pager .right>a,.pager .right>a:HOVER { cursor: pointer; height: 70px; width: 30px; background: url(../../assets/images/bgs_2.png) no-repeat; display: block; border: none; }
.pager .left>a:HOVER { background-position: 0 -70px; }
.pager .right>a:HOVER { background-position: 0 -210px; }
.pager .left>a { left: -30px; position: absolute; top: -240px; }
.pager .right>a { background-position: 0 -140px; position: absolute; right: -30px; top: -240px; }
[20160811104607469]: /images/20210506/646865764e1b4437953ed4f8ec83cd36.png
[20160826154011260]: /images/20210506/c409c081b7fd459bb01198c67c7b40e0.png