Question

尝试使用javascript实现jQuery手风琴的分页。我发现这个link用于实现手风琴分页的javascript类。但是，它的表现并不像预期的那样。我玩了一段时间，但没有结果。有人可以帮我弄清楚故障在哪里吗？我非常感激。在这里，我为它创建了JSfiddle。

Javascript代码

     var paginatorHandle = null;
jQuery(document).ready(function () {
jQuery("#dalist").accordion({
    autoHeight: false
});

paginatorHandle = jQuery("#dalist").paginateAccordion({
    "currentPage": 0,
        "itemsPerPage": 3,
        "paginatorControl": jQuery("#accordionPaginator")
});

// initial paginate call
paginatorHandle.paginate();

jQuery("#accordionPaginator .nextPage").click(function () {
    paginatorHandle.nextPage();
});

jQuery("#accordionPaginator .previousPage").click(function () {
    paginatorHandle.previousPage();
});

jQuery("#accordionPaginator .goToPage").change(function () {
    var pageIndex = parseInt($(this).val(), radix);
    paginatorHandle.goToPage(pageIndex);
   });
});


//this is the main class

function AccordionPaginator(element, currentPage, itemsPerPage, paginatorControl) {
this.element = element;
this.currentPage = currentPage;
this.itemsPerPage = itemsPerPage;
this.paginatorControl = paginatorControl;

// does the actual pagination (shows/hides items)
this.paginate = function () {
    var index = this.currentPage * this.itemsPerPage;

    element.accordion("activate", index);
    element.children().hide();

    if (index < 0) {
        this.element.children("div:first").show();
        this.element.children("h3:first").show();
    } else {

        this.element.children("div:eq(" + index + ")")
            .show();

        this.element.children("h3:eq(" + index + "),h3:gt(" + index + ")")
            .filter(":lt(" + this.itemsPerPage + ")")
            .show();
    }

    this.refreshControl();
};

// increments the currentPage var (if possible) and calls paginate
this.nextPage = function () {
    if (this.currentPage + 1 >= this.getMaxPageIndex()) {
        return;
    }

     this.currentPage++;
    this.paginate();
};

// decrements the currentPage var (if possible) and calls paginate
this.previousPage = function () {
    if (this.currentPage - 1 < 0) {
        return;
    }

    this.currentPage--;
    this.paginate();
};

// sets currentPage var (if possible) and calls paginate
this.goToPage = function (pageIndex) {
    if ((pageIndex < 0) || (pageIndex >= this.getMaxPageIndex())) {
        return;
    }

    this.currentPage = pageIndex;
    this.paginate();
    };

// returns the maximum of pages possible with the current number of items
this.getMaxPageIndex = function () {
    var items = this.element.children("h3");
    var fullPages = items.length / this.itemsPerPage;
    var restPage = items.length % (this.itemsPerPage > 0 ? 1 : 0);
    return fullPages + restPage;
};

// fills up the paginator control
this.refreshControl = function () {
    if (this.paginatorControl === null) {
        return;
    }

    var pageList = this.paginatorControl.children(".goToPage");
    pageList.empty();
    for (var i = 0; i < this.getMaxPageIndex(); i++) {
        pageList.append("<option value=\"" + i + "\">" + (i + 1) + "</option>");
    }
    pageList.val(this.currentPage);
};
}

jQuery.fn.extend({
paginateAccordion: function (options) {
    var currentPage = options.currentPage ?parseInt(options.currentPage, radix) : 0;
    var itemsPerPage = options.itemsPerPage ? parseInt(options.itemsPerPage, radix) : 5;
    var paginatorControl = options.paginatorControl;

    return new AccordionPaginator(this, currentPage, itemsPerPage, paginatorControl);
    }
});

Answer 1

我在JSFiddle中对您的代码进行了一些更改，并且分页工作正常。这是修改后的jsfiddle的链接。 http://jsfiddle.net/moLwmyyr/

我删除了

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

使用JSFiddle Frameworks和Extensions包含jQuery

我将jQuery UI include更改为

<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

我移动了

jQuery.fn.extend({
    paginateAccordion: function (options) {
        var currentPage = options.currentPage ?parseInt(options.currentPage, 10) : 0;
        var itemsPerPage = options.itemsPerPage ? parseInt(options.itemsPerPage, 10) : 5;
        var paginatorControl = options.paginatorControl;

        return new AccordionPaginator(this, currentPage, itemsPerPage, paginatorControl);
    }
});

高于您的文档准备方法。

并更改了以下内容。

element.accordion（“activate”，index）;

要 element.accordion（“option”，“activate”，index）;

分页工作。当你进入下一页并点击第5节时，我发现了一些小故障，它没有折叠第4节。

分页使用Javascript

1 个答案: