我的页面需要从 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 中插入动态分页符......