(function($) { $.fn.pillspager = function(options) { var defaults = { visibleItems: 1, nextButton: "", prevButton: "", disabledClass: "", hideControls: false, hideControlsContainer: false }; var options = $.extend(defaults, options); var curItem = 0, pageWidth = 0, numItems, disabled = options.disabledClass, container = $(this); function moveNext() { if (curItem + options.visibleItems >= numItems) { return false; } curItem += options.visibleItems; jQuery("ul:first>li", container).css({ position: "relative" }).stop(true, true).animate({ left: "-=" + pageWidth }, 350, "linear"); if (options.disabledClass) { if (curItem + options.visibleItems >= numItems) { jQuery(options.nextButton).addClass(disabled); } jQuery(options.prevButton).removeClass(disabled); } return false; } function movePrev() { if (curItem == 0) { return false; } curItem -= options.visibleItems; jQuery("ul:first>li", container).stop(true, true).animate({ left: "+=" + pageWidth }, 350, "linear"); if (curItem - options.visibleItems < 0) { jQuery(options.prevButton).addClass(disabled); } jQuery(options.nextButton).removeClass(disabled); return false; } function setupControls() { if (options.hideControls) { $(options.nextButton).add(options.prevButton).show(); } else { if (options.hideControlsContainer) { $(options.nextButton).parent().show(); } } if (numItems <= options.visibleItems) { if (options.hideControls) { $(options.nextButton).add(options.prevButton).hide(); } else { if (options.hideControlsContainer) { $(options.nextButton).parent().hide(); } } } else { jQuery(options.nextButton).unbind("click").click(moveNext); jQuery(options.prevButton).unbind("click").click(movePrev); } if (options.disabledClass) { $(options.prevButton).addClass(options.disabledClass); } } return this.each(function() { if (options.prevButton && options.nextButton) { jQuery(">ul>li:lt(" + options.visibleItems + ")", container).each(function() { if ($(this).is(":visible")) { pageWidth += $(this).outerWidth(true); } else { pageWidth += eval($(this).css("width").replace("px", "")) + eval($(this).css("margin-left").replace("px", "")) + eval($(this).css("margin-right").replace("px", "")); } }); numItems = jQuery(">ul>li", container).length; jQuery(">ul", container).width(100000); if (!jQuery(container).css("width")) { jQuery(container).width(pageWidth); } setupControls(); } else { throw Error("Invalid paging controls."); } }); }; })(jQuery);