Пейджер jQuery со статической высотой и динамическим контентом - PullRequest
Новая
       30

Пейджер jQuery со статической высотой и динамическим контентом

0 голосов
/ 31 марта 2011

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

Я изучил множествоПлагины jQuery Pager и все они требуют определенного тега для цели (p, div, li), где в моем случае я не буду знать, какой тег пользователь вводит в CMS.

var content = $("#weekly-features").children();
var pageHeight = 0;
var nextHeight = 0;
var pageCount = 0;
var start = 0;

    // loop through and wrap p's with page divs
for (var i = 0; i < content.length; i++) {

        pageHeight += $(content[i]).outerHeight();

        if ((i + 1) < content.length) {
nextHeight = $(content[i + 1]).outerHeight();
}

        if ((pageHeight + nextHeight) >= 400) {
pageCount++;
$(content.slice(start, i)).wrapAll('<div class="page' + pageCount + '" />');
pageHeight = 0;
start = i;
}
}

    // wrap remaining page
if (start < content.length) {
pageCount++;
$(content.slice(start)).wrapAll('<div class="page' + pageCount + '" />');
}

    // show first page
$("#weekly-features div").each(function() {
if ($(this).attr('class') == "page1") { return; }
else { $(this).hide(); }
});

    buildPagerNav(pageCount);
}

Есть идеи?

  • Изменить, чтобы быть более конкретным - проблема с требованием статической высоты: мой HTML выглядит примерно так:

абзац 1 (короткий)

абзац 2 (короткий)

абзац 3 (длинный)

  • список 1
  • список 2
  • список 3
  • список 4
  • список 5

пункт 4 (короткий)

  • список 1
  • список 2
  • список 3
  • список 4
  • список 5

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

1 Ответ

1 голос
/ 31 марта 2011

Рассматривали ли вы использовать $ ("*") селектор?Это позволит выбрать любой доступный тег

, если быть точным, вы можете сделать что-то вроде этого

$ ("# contentCMS *"). Pager ();

ИЛИ

$ ("# contentCMS"). Find (*). Pager ();

...