jQuery plugin quickPager Next/Prev Links
jQuery plugin quickPager Next/Prev Links
我正在工作的一个网站正在使用jQuery分页插件,我需要添加一个下一个/上一个按钮,目前它只显示页码,不支持下一个和上一个按钮。下面是插件的代码,我不确定如何在
中添加这个功能。(function($) {
$.fn.quickPager = function(options) {
var defaults = {
pageSize: 10,
currentPage: 1,
holder: null,
pagerLocation: "after"
};
var options = $.extend(defaults, options);
return this.each(function() {
var selector = $(this);
var pageCounter = 1;
var x = 0;
if( selector.parent("div.simplePagerContainer").length == 0 ) {
selector.wrap("<div class='simplePagerContainer'></div>");
}
selector.parents(".simplePagerContainer").find("ul.simplePagerNav").remove();
selector.children().each(function(i){
$(this)[0].className = $(this)[0].className.replace(/'bsimplePagerPage.*?'b/g, '');
if(!$(this).is(":hidden")) {
if(x < pageCounter*options.pageSize && x >= (pageCounter-1)*options.pageSize) {
$(this).addClass("simplePagerPage"+pageCounter);
}
else {
$(this).addClass("simplePagerPage"+(pageCounter+1));
pageCounter ++;
}
x++;
}
});
// show/hide the appropriate regions
selector.children().hide();
selector.children(".simplePagerPage"+options.currentPage).show();
if(pageCounter <= 1) {
return;
}
//Build pager navigation
var pageNav = "<ul class='simplePagerNav'>";
for (i=1;i<=pageCounter;i++){
if (i==0) {
}
if (i==options.currentPage) {
pageNav += "<li class='currentPage simplePageNav"+i+"'><a rel='"+i+"' href='#'>"+i+"</a></li>";
}
else {
pageNav += "<li class='simplePageNav"+i+"'><a rel='"+i+"' href='#'>"+i+"</a></li>";
}
}
pageNav += "</ul>";
if(!options.holder) {
switch(options.pagerLocation)
{
case "before":
selector.before(pageNav);
break;
case "both":
selector.before(pageNav);
selector.after(pageNav);
break;
default:
selector.after(pageNav);
}
}
else {
$(options.holder).append(pageNav);
}
//pager navigation behaviour
selector.parent().find(".simplePagerNav a").click(function() {
//grab the REL attribute
var clickedLink = $(this).attr("rel");
options.currentPage = clickedLink;
if(options.holder) {
$(this).parent("li").parent("ul").parent(options.holder).find("li.currentPage").removeClass("currentPage");
$(this).parent("li").parent("ul").parent(options.holder).find("a[rel='"+clickedLink+"']").parent("li").addClass("currentPage");
}
else {
//remove current current (!) page
$(this).parent("li").parent("ul").parent(".simplePagerContainer").find("li.currentPage").removeClass("currentPage");
//Add current page highlighting
$(this).parent("li").parent("ul").parent(".simplePagerContainer").find("a[rel='"+clickedLink+"']").parent("li").addClass("currentPage");
}
//hide and show relevant links
selector.children().hide();
selector.find(".simplePagerPage"+clickedLink).show();
return false;
});
});
}
})(jQuery);
试试这个:
var nextLink = '<li><a id="nextLink" href="#">Next</a></li>';
var prevLink = '<li><a id="prevLink" href="#">Prev</a></li>';
$(".simplePagerNav").prepend(prevLink).append(nextLink);
$("#nextLink").click(function(e) {
e.preventDefault();
$("li.currentPage").next("li[class^=simplePageNav]").find("a").click();
});
$("#prevLink").click(function(e) {
e.preventDefault();
$("li.currentPage").prev("li[class^=simplePageNav]").find("a").click();
});
演示相关文章:
- 如何防止多个ajax查询在“;prev“;按钮被点击多次
- 使用next、prev按钮制作简单的jQuery图像滑块
- 函数hide()、prev()、show()被组装以获得所需的结果,但无法理解其工作原理
- Chrome点击mailto:links关闭websocket连接
- Jquery:为新数据创建寻呼机(next-prev按钮)
- 带有prev和next的jquery自定义循环插件
- jQuery next().addClass() and prev().addClass() issue
- jQuery:如何正确选择parent.prev
- prev()似乎不起作用
- jCarousel v.0.3.0-如何在击中列表的第一项时隐藏prev
- Lightbox”;下一个“;以及“;prev“;怎样
- Rails 5:如何将 $(document).ready() 与 turbo-links 一起使用
- Zepto equivalent to jQuery prev([selector])
- Array of isClicked links Jquery
- $(document).ready(function() { Rails Turbo-links
- 查找带有多个选择器的 prev() 标签
- 如何在 Javascript 中按 prev 对象 id 对对象数组进行排序
- DOM 遍历不适用于 prev()
- 为什么 .next('li:visible') 或 .prev('li:visible') 不能跳过不可见的元素
- jQuery plugin quickPager Next/Prev Links