Question

Easy pagination插件列表下方有默认的底栏。我试图在顶部添加额外的导航栏。它显示。但它不适用于分页。

这是原始代码。

var displayNav = function() {
        htmlNav = '<div class="easyPaginateNav">';

        if(plugin.settings.firstButton) {
            htmlNav += '<a href="#'+plugin.settings.hashPage+':1" title="First page" rel="1" class="first">'+plugin.settings.firstButtonText+'</a>';
        }

        if(plugin.settings.prevButton) {
            htmlNav += '<a href="" title="Previous" rel="" class="prev">'+plugin.settings.prevButtonText+'</a>';
        }

        for(i = 1;i <= plugin.settings.pages;i++) {
            htmlNav += '<a href="#'+plugin.settings.hashPage+':'+i+'" title="Page '+i+'" rel="'+i+'" class="page">'+i+'</a>';
        };

        if(plugin.settings.nextButton) {
            htmlNav += '<a href="" title="Next" rel="" class="next">'+plugin.settings.nextButtonText+'</a>';
        }

        if(plugin.settings.lastButton) {
            htmlNav += '<a href="#'+plugin.settings.hashPage+':'+plugin.settings.pages+'" title="Last page" rel="'+plugin.settings.pages+'" class="last">'+plugin.settings.lastButtonText+'</a>';
        }

        htmlNav += '</div>';
        plugin.nav = $(htmlNav);
        plugin.nav.css({
            'width': plugin.el.width()
        });
        plugin.el.before(plugin.nav);
        plugin.el.after(plugin.nav);

        var elSelector = '#' + plugin.el.get(0).id + ' + ';
        $(elSelector + ' .easyPaginateNav a.page,'
            + elSelector + ' .easyPaginateNav a.first,'
            + elSelector + ' .easyPaginateNav a.last').on('click', function(e) {
            e.preventDefault();
            displayPage($(this).attr('rel'));                
        });

        $(elSelector + ' .easyPaginateNav a.prev').on('click', function(e) {
            e.preventDefault();
            page = plugin.settings.currentPage > 1?parseInt(plugin.settings.currentPage) - 1:1;
            displayPage(page);
        });

        $(elSelector + ' .easyPaginateNav a.next').on('click', function(e) {
            e.preventDefault();
            page = plugin.settings.currentPage < plugin.settings.pages?parseInt(plugin.settings.currentPage) + 1:plugin.settings.pages;
            displayPage(page);
        });
    };

我试图同时把plugin.nav .before和.after plugin.el放在一起但顶部不会显示和工作，但是会有人工作。

这里是jSFiddle链接 - https://jsfiddle.net/ezq9zf1j/

Answer 1

使用clone克隆导航并将其添加到父元素

$('#easyPaginate').easyPaginate({
    paginateElement: 'img',
    elementsPerPage: 3,
    effect: 'climb'
});
var nav  = $('.easyPaginateNav').clone(true,true);
nav.prependTo('body');

演示：http://jsfiddle.net/s41buqkc/

Easy Pagination在顶部添加额外的导航栏

1 个答案: