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に動的な改ページを挿入するようなものだと思います..