Как изменить количество элементов на странице в зависимости от размера окна

harish

1 июля 2021 в 18:14

У меня есть список элементов, в котором изначально отображается 12 элементов на странице, и я хотел повысить отзывчивость своей страницы. Когда я изменяю размер окна или использую разные устройства, мне нужно отображать элементы в соответствии с этим размером окна.

Я попытался получить текущий размер окна, используя window.innerwidth, используя ifelse для изменения. Как я могу передать переменную count в свои itemsPerPage.

Вот мой код JS. (Попробовал это после предложения из комментария)

var detect = function (width) {
      var count;
      if (width < 576) {
           count = 6;
      } else if (width >= 576 && width < 768) {
            count = 8;
      } else if (width >= 768 && width < 992) {
            count = 12;
      } else if (width >= 992) {
            count = 16;
      }
  }

$(function () {
    $("#content")
        .flexiblePagination({
            //I wanted to change this itemperPage value according to my window size
            itemsPerPage: count,
            displayedPages: 4,
            itemSelector: "div.result:visible",
            pagingControlsContainer: "#pagingControls",
            showingInfoSelector: "#showingInfo",
            searchBox: { onClick: !0, onClickSelector: "#search" },
        })
        .getController().onPageClick = function (s, n) {
        console.log("You Clicked Page: " + s);
    };
});

$(document).ready(function() {
var width = window.innerWidth;
detect(width) $(window).resize(function() {
    var width = window.innerWidth;
    detect(width)
});

});

Не работает, в чем проблема.

javascript

Источник

Поделиться Скопировать ссылку Скопировано

harish

1 июля 2021 в 18:46

Кто угодно......???

Vitalii

1 июля 2021 в 21:23

Самый простой вариант - вычислить itemsPerPage на основе размера окна (ширина или высота, укажите, что нужно). Однако это не будет обновляться динамически и потребует перезагрузки страницы при изменении размера окна. Пример: itemsPerPage: window.innerWidth < 1024 ? (window.innerWidth < 768 ? 6 : 8) : 12

harish

2 июля 2021 в 20:08

Можно ли это сделать, не обновляя страницу?

Ответы (2)

Vitalii

4 июля 2021 в 01:34

Сначала window.innerWidth следует использовать для вычисления itemsPerPage.

Вы уже создали функцию detect(width) для ее вычисления.

Однако была проблема, что переменная count объявлена внутри функции detect и не видна (и не может использоваться) снаружи. Самый простой способ использовать результат функции detect — добавить оператор return.

const detect = function (width) {
        let count;
        if (width < 576) {
            count = 6;
        } else if (width >= 576 && width < 768) {
            count = 8;
        } else if (width >= 768 && width < 992) {
            count = 12;
        } else if (width >= 992) {
            count = 16;
        }
        return count;
}

Теперь мы можем вызывать detect(window.innerWidth) при инициализации компонента разбиения на страницы, чтобы получить соответствующий itemsPerPage.

Давайте переместим настройку нумерации страниц в отдельную функцию для повторного использования.

function setupPagination() {
    $("#content")
        .flexiblePagination({
            itemsPerPage: detect(window.innerWidth), // calculate using detect()
            displayedPages: 4,
            itemSelector: "div.result:visible",
            pagingControlsContainer: "#pagingControls",
            showingInfoSelector: "#showingInfo",
            searchBox: { onClick: !0, onClickSelector: "#search" },
        })
        .getController().onPageClick = function (s, n) {
        console.log("You Clicked Page: " + s);
    };
}

Функция setupPagination должна вызываться во время начальной загрузки и при изменении размера окна для обновления настроек.

Что-то вроде этого:

$(document).ready(function() {
    setupPagination();
    
    $(window).resize(function () {
        setupPagination();
    });
});

Однако при тестировании я обнаружил, что плагин разбиения на страницы удаляет некоторые элементы из content div при вызове. Это довольно неприятно, но мы можем иметь резервную копию content div HTML ($('#content').html()) и восстанавливать ее, когда размер окна изменяется и нам нужно снова вызывать плагин пагинации.

$(document).ready(function() {
    const backup = $('#content').html(); // plugin kills content, keep backup
    setupPagination();
    
    $(window).resize(function () {
        $('#content').html(backup); // restore content
        setupPagination();
    });
});

См. рабочий пример ниже:

const detect = function (width) {
        let count;
        if (width < 576) {
            count = 6;
        } else if (width >= 576 && width < 768) {
            count = 8;
        } else if (width >= 768 && width < 992) {
            count = 12;
        } else if (width >= 992) {
            count = 16;
        }
        return count;
}

function setupPagination() {
    $("#content")
        .flexiblePagination({
            itemsPerPage: detect(window.innerWidth), // calculate
            displayedPages: 4,
            itemSelector: "div.result:visible",
            pagingControlsContainer: "#pagingControls",
            showingInfoSelector: "#showingInfo",
            searchBox: { onClick: !0, onClickSelector: "#search" },
        })
        .getController().onPageClick = function (s, n) {
        console.log("You Clicked Page: " + s);
    };
}

$(document).ready(function() {
    const backup = $('#content').html(); // plugin kills content, keep backup
    setupPagination();
    
    $(window).resize(function () {
        $('#content').html(backup); // restore content
        setupPagination();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
    <script src="https://www.jqueryscript.net/demo/content-paginator-flexiblepaginationjs/Flexible.Pagination.js"></script>

<input type="text" id="search">
<div id="content">
    <div>
    <div class="result">Item 1</div>
    <div class="result">Item 2</div>
    <div class="result">Item 3</div>
    <div class="result">Item 4</div>
    <div class="result">Item 5</div>
    <div class="result">Item 6</div>
    <div class="result">Item 7</div>
    <div class="result">Item 8</div>
    <div class="result">Item 9</div>
    <div class="result">Item 10</div>
    <div class="result">Item 11</div>
    <div class="result">Item 12</div>
    <div class="result">Item 13</div>
    <div class="result">Item 14</div>
    <div class="result">Item 15</div>
    <div class="result">Item 16</div>
    <div class="result">Item 17</div>
    <div class="result">Item 18</div>
    <div class="result">Item 19</div>
    <div class="result">Item 20</div>
    <div class="result">Item 21</div>
    <div class="result">Item 22</div>
    <div class="result">Item 23</div>
    <div class="result">Item 24</div>
    </div>
</div>
<div id="pagingControls"></div>
<div id="showingInfo"><div>

Поделиться Скопировать ссылку Скопировано

harish

4 июля 2021 в 23:13

Это здорово. Большое спасибо.

0xLogN

1 июля 2021 в 20:58

window.innerHeight содержит высоту окна (в пикселях, кто-нибудь поправьте меня, если я ошибаюсь). Затем вы можете разделить это значение на максимальную высоту одного из размеров контейнеров содержимого.

Если вы хотите продолжать обновлять его, вы можете создать для этого интервал.

Поделиться Скопировать ссылку Скопировано