Фальсификация нагрузки с помощью jQuery (без AJAX / PHP)

Question

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

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

Я изучил простые плагины для разбивки на страницы, такие как jPaginate, но хотел бы, чтобы список каждый раз расширялся на 25.

Просто любопытно твои мысли - спасибо!

Answer 1

Разделите общий класс среди всех ваших предметов и используйте jQuery, чтобы каждый раз показывать больше элементов.

<div class="listitem">list item 1</div>
<div class="listitem">list item 2</div>
<div class="listitem">list item 3</div>
<div class="listitem">list item 4</div>
<div class="listitem">list item 5</div>
<div class="listitem">list item 6</div>
<div class="listitem">list item 7</div>
<div class="listitem">list item 8</div>
<div class="listitem">list item 9</div>
<div class="more">showmore</div>

** the jquery **

$(".listitem").hide();
$(".listitem").slice(0, 2).show();

$(".more").click(function(){
    var showing = $(".listitem:visible").length;
    $(".listitem").slice(showing - 1, showing + 2).show();
});

Для справки: http://api.jquery.com/slice/

Редактировать: Вот jsFiddle, показывающий это в действии ... http://jsfiddle.net/uQWGB/1/

Answer 2

Создайте 4 DIV и поместите 25 предметов в каждый. Сделайте первый видимым, а другой - скрытым. 3. Создайте переменную и установите для нее значение 1, а также создайте 2 ссылки для разбиения на страницы назад и вперед.

Логика была бы проста: нажатие на любую из ссылок на пагинацию проверит локальную переменную и убедится, что после увеличения или уменьшения она все еще будет действительна, поэтому 1,2,3 или 4. Вы вызываете свою функцию рендеринга .

Ваша функция рендеринга не будет делать ничего другого, кроме как скрыть 3 деления из 4, показывая выбранную и отключая ссылки нумерации страниц при необходимости.

---

Для расширяемого списка создайте 1 ссылку показать больше вместо 2 ссылок на страницы.

Ваша функция рендеринга в этом случае никогда не будет скрывать div, просто покажет другой. Когда все 4 деления будут включены, тогда ссылка show more должна быть скрыта.

Надеюсь, это поможет.

Answer 3

Оберните куски ваших вещей в DIV с помощью style = "display: none" и class = "hiddenMore" (или чего-то еще).

<a href="javascript://" onclick="showMore(this)">more...</a>

function showMore(e) {
       $('.hiddenMore').eq(0).show()
       $(e).removeClass('hiddenMore')    
}