为Sweetpages制作jQuery按钮

Question

我想制作一个按钮来回切换分页显示我在这里，但我不知道如何将它纳入以下..我试图学习JQuery为它变得越来越容易，但我仍然不知道它..

如果你不知道如何Sweetpages插件的工作原理，这里的代码。它已经在底部创建了漂亮的小按钮，我仍然想要，但我也需要实际的按钮。

我想用“button_back”和“button_forward”的id来解密分页显示器移动的方式。谢谢这个网站很棒！

(function($){ 

// Creating the jQuery plugin: 

$.fn.sweetPages = function(opts){ 

// If no options were passed, create an empty opts object 
if(!opts) opts = {}; 

var resultsPerPage = opts.perPage || 3; 

// The plugin works best for unordered lists, althugh ols would do just as well: 
var ul = this; 
var li = ul.find('li'); 

li.each(function(){ 
    // Calculating the height of each li element, and storing it with the data method: 
    var el = $(this); 
    el.data('height',el.outerHeight(true)); 
}); 

// Calculating the total number of pages: 
var pagesNumber = Math.ceil(li.length/resultsPerPage); 

// If the pages are less than two, do nothing: 
if(pagesNumber<2) return this; 

// Creating the controls div: 
var swControls = $('<div class="swControls">'); 

for(var i=0;i<pagesNumber;i++) 
{ 
    // Slice a portion of the lis, and wrap it in a swPage div: 
    li.slice(i*resultsPerPage,(i+1)*resultsPerPage).wrapAll('<div class="swPage" />'); 

    // Adding a link to the swControls div: 
    swControls.append('<a href="" class="swShowPage">'+(i+1)+'</a>'); 
} 

ul.append(swControls); 

var maxHeight = 0; 
var totalWidth = 0; 

var swPage = ul.find('.swPage'); 
swPage.each(function(){ 

    // Looping through all the newly created pages: 

    var elem = $(this); 

    var tmpHeight = 0; 
    elem.find('li').each(function(){tmpHeight+=$(this).data('height');}); 

    if(tmpHeight>maxHeight) 
     maxHeight = tmpHeight; 

    totalWidth+=elem.outerWidth(); 

    elem.css('float','left').width(ul.width()); 
}); 

swPage.wrapAll('<div class="swSlider" />'); 

// Setting the height of the ul to the height of the tallest page: 
ul.height(maxHeight); 

var swSlider = ul.find('.swSlider'); 
swSlider.append('<div class="clear" />').width(totalWidth); 

var hyperLinks = ul.find('a.swShowPage'); 

hyperLinks.click(function(e){ 

    // If one of the control links is clicked, slide the swSlider div 
    // (which contains all the pages) and mark it as active: 

    $(this).addClass('active').siblings().removeClass('active'); 

    swSlider.stop().animate({'margin-left':-(parseInt($(this).text())-1)*ul.width()},'slow'); 
    e.preventDefault(); 
}); 

// Mark the first link as active the first time this code runs: 
hyperLinks.eq(0).addClass('active'); 

// Center the control div: 
swControls.css({ 
    'left':'50%', 
    'margin-left':-swControls.width()/2 
}); 

return this; 

}})(jQuery); 

$(document).ready(function(){ 
    /* The following code is executed once the DOM is loaded */ 

// Calling the jQuery plugin and splitting the 
// #holder UL into pages of 3 LIs each: 

$('#holder').sweetPages({perPage:1}); 

// The default behaviour of the plugin is to insert the 
// page links in the ul, but we need them in the main container: 

var controls = $('.swControls').detach(); 
controls.appendTo('#main'); 

}); 

Answer 1

服用swControls div从Sweet Pages Demo：

<div class="swControls"> 
    <a href="" class="swShowPage">1</a> 
    <a href="" class="swShowPage active">2</a> 
    <a href="" class="swShowPage">3</a> 
    <a href="" class="swShowPage">4</a> 
    <a href="" class="swShowPage">5</a> 
    <a href="" class="swShowPage">6</a> 
    <a href="" class="swShowPage">7</a> 
</div> 

可以实现前进/后退功能，像这样的东西：

$('.swControls').prepend('<input type="button" class="swFB" id="button_back" value="Back" />'); 
$('.swControls').append('<input type="button" class="swFB" id="button_forward" value="Forward" />'); 

$('.swFB').click(function(){ 
    var curPage = parseInt($('.swShowPage.active').text(), 10); 
    var nextPage = ($(this).attr('id') == "button_back") ? curPage - 1 : curPage + 1; 
    $('.swShowPage:contains("' + nextPage + '")').click(); 
}); 

如果需要放置按钮在其他地方，只需修改第2条语句accordi ngly。

UPDATE：

这里有一个更抽象的版本：

function swGotoPage(page){ 
    $('.swShowPage:contains("' + page + '")').click(); 
} 

var baseFB = '<input type="button" class="swFB" />'; 
var offset = 'pgOffset'; 
var active = '.swShowPage.active'; 

var $pgBack = $(baseFB) 
    .attr('id', 'button_back') 
    .attr('value', "Back") 
    .attr(offset, '-1'); 

var $pgForward = $(baseFB) 
    .attr('id', 'button_forward') 
    .attr('value', "Forward") 
    .attr(offset, '1'); 

$.each([$pgBack, $pgForward], function(i,$obj){ 
    $obj.click(function(){ 
     var nextPage = parseInt($(active).text(), 10) + parseInt($(this).attr(offset), 10); 
     swGotoPage(nextPage); 
    }); 
}); 

$('.swControls').prepend($pgBack); 
$('.swControls').append($pgForward); 

Answer 2

自动加载

$(document).ready(function(){ 
    /* The following code is executed once the DOM is loaded */ 

    // Calling the jQuery plugin and splitting the 
    // #holder UL into pages of 3 LIs each: 

    $('#holder').sweetPages({perPage:1}); 

    // The default behaviour of the plugin is to insert the 
    // page links in the ul, but we need them in the main container: 

    var controls = $('.swControls').detach(); 
    controls.appendTo('#main'); 

    /* BEGIN New function - Solution */ 
    function xautoLoadSlider() { 
     var curPage = parseInt($('.swShowPage.active').text(), 10); 
     var nextPage = ((curPage + 1) > $('.swShowPage').length) ? 1 : curPage + 1; 
     $('.swShowPage:contains("' + nextPage + '")').click();  
    } 

    var xAutoLoad = setInterval(function() { 
     xautoLoadSlider(); 
    }, 5000); 
    /* END New function - Solution */ 

});