the*_*lls 4 javascript jquery pagination
我有兴趣使用jQuery根据内容和div的高度而不是按项目数创建内容的自动分页.我能够找到的大多数分页示例都是基于要分页的项目数,而不是包含div的高度和内容的高度.该解决方案不适用于不同长度的内容.
有人知道现有的解决方案会根据高度而不是项目编号对内容进行分页吗？理想情况下,它将是一种解决方案,可以在标记内拆分内容,例如跨多个页面的长段落.
我在下面列出了一些虚拟代码.或者,可以在此处访问代码: 示例,代码
<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>
听起来您想要一次加载所有内容,但一次只向用户显示一点内容.分散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');
});
基本的想法是保持你拥有的分页div overflow: hidden并使用负边距上下移动内部的内容.
还有一次,这是糟糕的用户体验.只需使用滚动条.