为Sweetpages创建jQuery按钮

我想为我这里的分页显示制作一个来回的按钮，但我不确定如何将它合并到下面的内容中。。我正在努力学习JQuery，因为它越来越容易了，但我还是想不出来

如果您不确定Sweetpages插件是如何工作的，下面是代码。它已经在底部创建了漂亮的小按钮，我仍然想要，但我也想要实际的按钮

我想要id为“button_back”和“button_forward”的按钮来破译分页显示的移动方向。。谢谢你这个网站太棒了

(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');

});

（函数（$）{
//创建jQuery插件：
$.fn.sweetPages=函数（选项）{
//如果未传递任何选项，请创建一个空的opts对象
如果（！opts）opts={}；
var resultsPerPage=opts.perPage | | 3；
//该插件最适用于无序列表，althugh ols也可以：
var ul=这个；
var li=ul.find（'li'）；
li.每个（函数（）{
//计算每个li元素的高度，并使用数据方法存储：
var el=$（本）；
标高数据（“高度”，标高外高度（真实））；
});
//计算总页数：
var pagesNumber=Math.ceil（li.length/resultsPerPage）；
//如果页面少于两页，则不执行任何操作：
如果（第pagesNumbermaxHeight页）
maxHeight=tmpHeight；
totalWidth+=元素外径（）；
元素css（'float'，'left'）.width（ul.width（））；
});
swPage.wrapAll（“”）；
//将ul的高度设置为最高页面的高度：
ul.高度（最大高度）；
var swSlider=ul.find（'.swSlider'）；
swSlider.append（“”）.width（totalWidth）；
var hyperLinks=ul.find（'a.swShowPage'）；
超链接。单击（函数（e）{
//如果单击了其中一个控制链接，请滑动swSlider div
//（包含所有页面）并将其标记为活动：
$（this.addClass（'active'）.sides（）.removeClass（'active'）；
swSlider.stop（）.animate（{'margin-left'：-（parseInt（$（this.text（））-1）*ul.width（）}，'slow'）；
e、 预防默认值（）；
});
//第一次运行此代码时，将第一个链接标记为活动：
eq（0）.addClass（'active'）；
//中央控制室：
swControls.css({
“左”：50%，
“左边距”：-swControls.width（）/2
});
归还这个；
}})（jQuery）；
$（文档）.ready（函数（）{
/*加载DOM后，将执行以下代码*/
//调用jQuery插件并拆分
//#将UL分成3页，每页：
$（#holder'）.sweetPages（{perPage:1}）；
//插件的默认行为是插入
//ul中的页面链接，但我们需要在主容器中使用它们：
var controls=$（'.swControls'）.detach（）；
控件。追加到（“#main”）；
});

从以下位置获取

swControls div

：

您可以通过以下方式实现后退/前进功能：

$（'.swControls'）。前置（''）；
$（'.swControls'）。追加（''）；
$（'.swFB'）。单击（函数（）{
var curPage=parseInt（$（'.swShowPage.active'）.text（），10）；
var nextPage=（$（this）.attr（'id'）==“按钮返回”）？curPage-1:curPage+1；
$（'.swShowPage:包含（“+nextPage+”）。单击（）；
});

如果需要将按钮放在其他地方，只需相应地修改前两条语句

更新：

以下是一个更抽象的版本：

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);

函数swGotoPage（第页）{
$（'.swShowPage:包含（“+page+”）。单击（）；
}
var baseFB=''；
var offset='pgOffset'；
var active='.swShowPage.active'；
var$pgBack=$（baseFB）
.attr（'id'，'button\u back'）
.attr（'value'，'Back'）
.attr（偏移量，'-1'）；
var$pgForward=$（baseFB）
.attr（'id'，'button_forward'）
.attr（“价值”，“远期”）
.attr（偏移量“1”）；
$.each（[$pgBack，$pgForward]，函数（i，$obj）{
$obj.单击（函数（）{
var nextPage=parseInt（$（活动）.text（），10）+parseInt（$（此）.attr（偏移量），10）；
swGotoPage（下一页）；
});
});
$（'.swControls'）。前置（$pgBack）；
$（'.swControls'）。追加（$pgForward）；

自动加载

$(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 */

});

---

他将如何放置元素而不进行前置和追加？它可以由一个div的类分配吗？@JD Audi你是什么意思？back/forward元素是否已经在

div

容器中的DOM中？