1

Есть несколько табов, в каждом из которых, скажем, 10 селектов с различными элементами (что-то вроде фильтров). Как сделать так, чтобы в каждом из табов выводилось, к примеру, только 4 первых селекта? Следующие 4 селекта появляются при нажатии на кнопку вперед и т.д. Перейти к предыдущим селектам можно с помощью кнопки, к примеру, назад. Что-то вроде пагинации.

Обновление

Есть, скажем, 12 li-элементов в одном ul. Как сделать так, чтобы при загрузке страницы отображались первые 5 элементов и появлялась кнопка ДАЛЕЕ. По нажатии на кнопку появляются следующие 5 элементов и, соответственно, добавляется кнопка НАЗАД. Если нажать на кнопку ДАЛЕЕ еще раз, выводяться последние 2 элемента, кнопка ДАЛЕЕ исчезает и остается только НАЗАД.

0

1 ответ 1

3

Это можно сделать примерно так: http://jsfiddle.net/IonDen/0mrco8r8/ Обратите внимание, список слева оставлен для примера, список справа был обработан.

var Paginator = function (wrap) {
    this.$wrap = $(wrap);
    this.$items = this.$wrap.find('li');

    this.count = this.$wrap.data('count');
    this.prevText = this.$wrap.data('prev');
    this.nextText = this.$wrap.data('next');
    this.currentPage = 0;
    this.pages = Math.floor(this.$items.length / this.count);

    this.prevHtml = '<span class="list-paginator js-prev">' + this.prevText + '</span>';
    this.nextHtml = '<span class="list-paginator js-next">' + this.nextText + '</span>';

    this.init();
};

Paginator.prototype = {
    init: function () {
        var self = this;

        this.$wrap.on("click", ".js-prev", function () {
            self.currentPage--;
            if (self.currentPage < 0) {
                self.currentPage = 0;
            }

            self.changePage();
        });

        this.$wrap.on("click", ".js-next", function () {
            self.currentPage++;
            if (self.currentPage > self.pages) {
                self.currentPage = self.pages;
            }
            self.changePage();
        });

        this.changePage();
    },

    changePage: function () {
        this.$wrap.find(".js-prev").remove();
        this.$wrap.find(".js-next").remove();

        if (this.currentPage === 0) {
            this.$wrap.append(this.nextHtml);
        } else if (this.currentPage === this.pages) {
            this.$wrap.append(this.prevHtml);
        } else {
            this.$wrap.append(this.nextHtml);
            this.$wrap.append(this.prevHtml);
        }

        this.showItems();
    },

    showItems: function () {
        var start = this.currentPage * 5;

        this.$items.each(function (i) {
            var $this = $(this);

            if (i < start) {
                $this.hide();
            } else if (i >= start + 5) {
                $this.hide();
            } else {
                $this.show();
            }
        });
    }
};

var paginator1 = new Paginator('.js-list-1');
1
  • Спасибо большое за ответ, именно это я и искал) 7 июн 2015 в 14:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.