[英]Jquery plugin using second instance's options
我編寫了一個Jquery分頁插件,僅與該插件的一個實例配合使用即可。 當我嘗試使用兩個實例時,第一個實例將忽略其給定的選項,而使用第二個實例的選項。 我知道這一點是因為這兩個部分都從每頁定義的項目開始,但是當您瀏覽到分頁中的另一個“頁面”時,它會恢復為第二個實例的itemsPerPage
- 2 。
我的猜測是第二次調用此插件,它覆蓋了$.pagination
的選項,因此,當任一分頁轉到新頁面時,它都會使用覆蓋的選項。
這是插件:
/* Jquery Pagination */
(function($){
$.pagination = {
defaultOptions : {
itemsPerPage : 5,
startPage : 1,
showNextPrev : true,
navigationPosition : 'before',
paginationClass : 'pagination',
paginationItemClass : 'paginationItem',
paginationItemActiveClass : 'active',
nextClass : 'next',
nextText : 'Next',
prevClass : 'prev',
prevText : 'Prev',
}
}
$.fn.extend({
pagination : function(newOptions){
var options = $.extend($.pagination.defaultOptions, newOptions),
itemsToPaginate = $(this),
itemsToPaginateContainer = itemsToPaginate.eq(0).parent(),
paginationWrapper = "<div class='" + options.paginationClass + "'></div>",
paginationControls = '',
pagination,
numberOfPages,
showPage = function(goToPage){
var page = (typeof goToPage === 'number') ? goToPage : goToPage.attr('href').replace('#page', ''),
itemRangeEnd = page * options.itemsPerPage
itemRangeStart = itemRangeEnd - options.itemsPerPage;
$( '.' + options.paginationItemClass, pagination).removeClass(options.paginationItemActiveClass);
if (typeof goToPage === 'number')
pagination.find('.' + options.paginationItemClass).eq(goToPage-1).addClass(options.paginationItemActiveClass);
else
goToPage.addClass(options.paginationItemActiveClass);
itemsToPaginate.hide().slice(itemRangeStart, itemRangeEnd).show();
},
createPagination = (function(){
// Add pagination element to DOM
switch(options.navigationPosition.toLowerCase()){
/*
// TODO: Create ability to insert pagination after or before & after
case 'both':
itemsToPaginateContainer.before(paginationWrapper);
itemsToPaginateContainer.after(paginationWrapper);
break;
case 'after':
itemsToPaginateContainer.after(paginationWrapper);
break;
*/
default:
itemsToPaginateContainer.before(paginationWrapper);
break;
}
// Selecting pagination element
pagination = itemsToPaginateContainer.siblings('.' + options.paginationClass);
// Count how many pages to make
numberOfPages = Math.ceil( itemsToPaginate.length / options.itemsPerPage );
// Insert controls into pagination element
if(options.showNextPrev) paginationControls += "<a href='#' class='" + options.prevClass + "'>" + options.prevText + "</a>";
for (var i = 1; i <= numberOfPages; i++) {
paginationControls += "<a href='#page" + i + "' class='" + options.paginationItemClass + "'>" + i + "</a>";
}
if(options.showNextPrev) paginationControls += "<a href='#' class='" + options.nextClass + "'>" + options.nextText + "</a>";
(numberOfPages !== 1) ? pagination.html(paginationControls) : pagination.remove() ;
}()),
bindUIEvents = (function(){
pagination.find('.' + options.paginationItemClass + ':not(.' + options.nextClass + '):not(.' + options.prevClass + ')').on('click', function(e){
e.preventDefault();
showPage( $(this) );
});
pagination.find('.' + options.prevClass).on('click', function(){
var prevPageIdx = pagination.find('.' + options.paginationItemActiveClass).index() - 1;
// console.log(prevPageIdx);
if(prevPageIdx < 1)
showPage(numberOfPages);
else
showPage(prevPageIdx);
});
pagination.find('.' + options.nextClass).on('click', function(){
var nextPageIdx = pagination.find('.' + options.paginationItemActiveClass).index() + 1;
if(nextPageIdx > numberOfPages)
showPage(1);
else
showPage(nextPageIdx);
});
}());
showPage(options.startPage);
return this;
}
});
})(jQuery);
知道為什么這個插件的每個實例不僅僅使用自己的選項嗎? 我如何構造一個插件來封裝和保護自己的選項? 謝謝!
更改
var options = $.extend($.pagination.defaultOptions, newOptions),
至
var options = $.extend({}, $.pagination.defaultOptions, newOptions),
原因是您在使用語法jQuery.extend(target [,object1] [,objectN]時將目標作為defaultOption提供。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.