按 div 高度(不是项目)的 jQuery 分页 [英] jQuery Pagination by div height (not item)

查看：26
本文介绍了按 div 高度(不是项目)的 jQuery 分页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

我在下面包含了一些虚拟代码.或者，可以在此处访问代码:示例、代码

<小时>

<头><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><style type="text/css" media="screen">身体{背景颜色:白色；字体:16px Helvetica、Arial；颜色:黑色;}.分页{边距:自动；显示:块；高度:275px；宽度:300px；位置:相对；溢出:隐藏；边框:1px 纯黑色；}</风格><身体><div class="分页"><p>众议院应由各州人民每两年选出的议员组成，每个州的选举人应具备成为州立法机关最多分支的选举人所需的资格.</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他将被选中.</p><p>(代表税和直接税应在可能包括在本联盟内的几个州之间根据各自的人数进行分配，该人数应通过将自由人的总数加起来来确定，包括那些必须为年期限，不包括未征税的印度人，为所有其他人的五分之三.)(括号中的前一句由第 14 条修正案第 2 节修改.)实际枚举应在第一次会议后三年内进行美国国会，并在随后的每十年任期内，按照法律规定的方式进行.每三万名众议员不得超过一名，但每个州至少有一名众议员；并且在进行此类列举之前，新罕布什尔州应有权选择三个，马萨诸塞州八个，罗德岛和普罗维登斯种植园一 个，康涅狄格州五个，纽约州六个，新泽西州四个，宾夕法尼亚州八个，特拉华州一个，马里兰州六个，弗吉尼亚十，北卡罗来纳五，南卡罗来纳五和佐治亚三. </p><p>当任何州的代表出现空缺时，其执行机构应签发选举令以填补这些空缺.</p><p>众议院将选举他们的议长和其他官员；并且拥有唯一的弹劾权.</p>

<ul><li>上一个</li><li>下一步</li>

解决方案

听起来您想一次加载所有内容，但一次只向用户显示其中的一小部分.分页 HTML 内容服务器端并不是真正可行的，并且在任何情况下都与 jQuery 没有任何关系.

好的 UX 应该只是使用滚动条，而不是尝试向上/向下重新创建页面.也就是说，如果您绝对必须这样做，那么您需要这样的东西:

$('.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，并使用负边距上下移动其中的内容.

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

I am interested in using jQuery to create automatic pagination for content based on the height of the content and the div, rather than by number of items. Most pagination examples I have been able to find are based on the number of items to be paginated, rather than the height of the containing div and the height of the contents. This solution does not work well with content of varying length.

Do anyone know of an existing solution that will paginate content based on height rather than item number? Ideally it would be a solution that would split content within a tag, such as a long paragraph across multiple pages.

I have included some dummy code below. Alternatively, the code can be accessed here: 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>

解决方案

It sounds like you want to load all the content at once, but only show a little bit of it at a time to the user. Paginating HTML content server side isn't really feasible, and wouldn't have anything to do with jQuery in any case.

Good UX would be to just use a scroll bar instead of trying to reinvent page up/down. That said, if you absolutely must do this, then you want something like this:

$('.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');
});

The basic idea is to keep the pagination div that you have with overflow: hidden and move the content inside of it up and down using negative margins.

One more time though, this is bad UX. Just use a scrollbar.

这篇关于按 div 高度(不是项目)的 jQuery 分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆