jQuery分页按div高度（不是项目）答案

【问题标题】：jQuery Pagination by div height (not item)jQuery分页按div高度（不是项目）
【发布时间】：2011-01-03 01:27:25
【问题描述】：

我有兴趣使用 jQuery 根据内容和 div 的高度而不是项目数来为内容创建自动分页。我能找到的大多数分页示例都是基于要分页的项目数，而不是包含 div 的高度和内容的高度。此解决方案不适用于不同长度的内容。

有谁知道现有的解决方案会根据高度而不是项目编号对内容进行分页？理想情况下，这将是一种在标签内拆分内容的解决方案，例如跨多个页面的长段落。

我在下面包含了一些虚拟代码。或者，可以在此处访问代码： Example, Code

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css" media="screen">
body {background-color:white; font:16px Helvetica, Arial; color:black;}
.pagination {margin:auto; display:block; height:275px; width:300px; position:relative; overflow:hidden; border:1px solid black;}
</style>
</head>
<body>
<div class="pagination">
  <p>The House of Representatives shall be composed of Members chosen every second Year by the People of the several States, and the Electors in each State shall have the Qualifications requisite for Electors of the most numerous Branch of the State Legislature.</p>
  <p>No Person shall be a Representative who shall not have attained to the Age of twenty five Years, and been seven Years a Citizen of the United States, and who shall not, when elected, be an Inhabitant of that State in which he shall be chosen.</p>
  <p>(Representatives and direct Taxes shall be apportioned among the several States which may be included within this Union, according to their respective Numbers, which shall be determined by adding to the whole Number of free Persons, including those bound to Service for a Term of Years, and excluding Indians not taxed, three fifths of all other Persons.) (The previous sentence in parentheses was modified by the 14th Amendment, section 2.) The actual Enumeration shall be made within three Years after the first Meeting of the Congress of the United States, and within every subsequent Term of ten Years, in such Manner as they shall by Law direct. The Number of Representatives shall not exceed one for every thirty Thousand, but each State shall have at Least one Representative; and until such enumeration shall be made, the State of New Hampshire shall be entitled to chuse three, Massachusetts eight, Rhode Island and Providence Plantations one, Connecticut five, New York six, New Jersey four, Pennsylvania eight, Delaware one, Maryland six, Virginia ten, North Carolina five, South Carolina five and Georgia three.</p>
  <p>When vacancies happen in the Representation from any State, the Executive Authority thereof shall issue Writs of Election to fill such Vacancies.</p>
  <p>The House of Representatives shall chuse their Speaker and other Officers; and shall have the sole Power of Impeachment.</p>
</div>
<ul>
    <li>Previous</li>
    <li>Next</li>
</body>
</html>

【问题讨论】：

您将无法将一个段落拆分到多个页面。（除非您编写了一个更复杂的函数来分割文本并（在循环内）将其重新组合成块，直到找到适合剩余区域的块。）
我不相信我见过插件，但我似乎有一些类似的例子。但是，它们通常会根据您滚动页面的距离添加更多内容（我觉得这很痛苦……恕我直言，页面的高度永远不应该是动态的）。

标签： javascript jquery pagination

【解决方案1】：

听起来您想一次加载所有内容，但一次只向用户显示一点点。分页 HTML 内容服务器端实际上并不可行，并且在任何情况下都与 jQuery 没有任何关系。

好的用户体验是只使用滚动条而不是尝试重新设计页面向上/向下。也就是说，如果你绝对必须这样做，那么你想要这样的东西：

$('.pagination').children().wrapAll('<div class="content"/>');
$('.next').click(function() {
    var current = ($('.content').css('margin-top') || '0px');
    $('.content').css('margin-top',current.substring(0,current.length-2) - $('.pagination').height() + 'px');
});

基本思想是保留overflow: hidden 的分页 div，并使用负边距上下移动其中的内容。

再一次，这是糟糕的用户体验。只需使用滚动条。

【讨论】：

我同意滚动这是一个糟糕的设计，但规范超出了我的控制范围。感谢您对此的帮助。
为了让它与 IE6 一起工作，我需要添加一个检查“auto”的边距值我用这个来解决它： if (current == 'auto') { current = '0px '; }

【解决方案2】：

我不知道现有的解决方案。但是，使用一些 JavaScript（使用 jQuery 之类的东西），您可以计算元素的高度。 $(element).height() 例如。使用此方法，您可以遍历元素循环并将它们添加到 div，具体取决于剩余的可用空间（我猜是设置为常量）。因此，如果我有 3 个元素并且我的可用高度为 100 px，并且 jQuery 为每个元素返回 35 px 的高度，我将显示前两个元素，然后将最后一个元素添加到队列中，以便在用户单击下一步时显示。

在中间元素中拆分文本会有点困难，但我想您可以使用字符串解析将元素的文本切成两半，测量高度，再次切成两半，测量高度等。它会不漂亮，但它可能会工作。

【讨论】：

【解决方案3】：

听起来你只需要实现$.scrollTo()：我刚刚使用一个“前进”按钮制定了以下概念（注意：您必须引用 jQuery 和 scrollTo 插件：

<button class="next">Next</button>
<div id="pagination">
  <p>The House of Representatives shall be composed of Members chosen every second Year by the People of the several States, and the Electors in each State shall have the Qualifications requisite for Electors of the most numerous Branch of the State Legislature.</p>
  <p>No Person shall be a Representative who shall not have attained to the Age of twenty five Years, and been seven Years a Citizen of the United States, and who shall not, when elected, be an Inhabitant of that State in which he shall be chosen.</p>
  <p>(Representatives and direct Taxes shall be apportioned among the several States which may be included within this Union, according to their respective Numbers, which shall be determined by adding to the whole Number of free Persons, including those bound to Service for a Term of Years, and excluding Indians not taxed, three fifths of all other Persons.) (The previous sentence in parentheses was modified by the 14th Amendment, section 2.) The actual Enumeration shall be made within three Years after the first Meeting of the Congress of the United States, and within every subsequent Term of ten Years, in such Manner as they shall by Law direct. The Number of Representatives shall not exceed one for every thirty Thousand, but each State shall have at Least one Representative; and until such enumeration shall be made, the State of New Hampshire shall be entitled to chuse three, Massachusetts eight, Rhode Island and Providence Plantations one, Connecticut five, New York six, New Jersey four, Pennsylvania eight, Delaware one, Maryland six, Virginia ten, North Carolina five, South Carolina five and Georgia three.</p>
  <p>When vacancies happen in the Representation from any State, the Executive Authority thereof shall issue Writs of Election to fill such Vacancies.</p>
  <p>The House of Representatives shall chuse their Speaker and other Officers; and shall have the sole Power of Impeachment.</p>
</div>

var numElmnts = $("#pagination p").length;
var lastIndex = 0;
$(".next").click(function(){
  var nextIndex = (lastIndex >= (numElmnts-1)) ? 0 : (lastIndex+1) ;
  var nextParag = $("#pagination p:eq("+nextIndex+")");
  $("#pagination").animate({ height: $(nextParag).outerHeight() }, 800, "linear", function(){
    $("#pagination").scrollTo(nextParag, 800);
  });
  lastIndex = nextIndex;
});

【讨论】：

【解决方案4】：

看看这个 jQuery 插件：http://rascarlito.free.fr/hoverscroll/

【讨论】：