jQuery Pagination par hauteur div (pas article)

Je suis intéressé par l'utilisation de jQuery pour créer une pagination automatique pour le contenu en fonction de la hauteur du contenu et de la div, plutôt que par le nombre d'éléments. La plupart des exemples de pagination que j'ai pu trouver sont basés sur le nombre d'éléments à paginer, plutôt que sur la hauteur du div contenant et la hauteur du contenu. Cette solution ne fonctionne pas bien avec un contenu de longueur variable.jQuery Pagination par hauteur div (pas article)

Quelqu'un connaît-il une solution existante qui paginera le contenu en fonction de la hauteur plutôt que du numéro d'article? Idéalement, ce serait une solution qui diviserait le contenu d'une étiquette, comme un long paragraphe sur plusieurs pages.

J'ai inclus un code fictif ci-dessous. Sinon, le code peut être consulté ici: 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>

Source

2010-01-08 the3seashells

Vous ne serez pas en mesure de diviser un paragraphe sur plusieurs pages. (Sauf si vous écrivez une fonction beaucoup plus compliquée qui coupe le texte et (à l'intérieur d'une boucle) le regroupe en morceaux jusqu'à ce qu'il trouve le morceau qui convient dans la zone restante.) –

Je ne crois pas avoir vu un plugin, mais j'ai des exemples similaires. Cependant, ils ajoutent généralement plus de contenu en fonction de la profondeur de la page que vous faites défiler (ce que je trouve être une douleur ...la hauteur d'une page ne devrait jamais être dynamique à mon humble avis). –

Il semble que vous vouliez charger tout le contenu à la fois, mais en montrer seulement un peu à la fois à l'utilisateur. Paginer le côté serveur de contenu HTML n'est pas vraiment réalisable, et n'aurait rien à voir avec jQuery dans tous les cas.

Bon UX serait juste d'utiliser une barre de défilement au lieu d'essayer de réinventer la page haut/bas. Cela dit, si vous devez absolument le faire, alors vous voulez quelque chose comme ceci:

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

L'idée de base est de garder la div pagination que vous avez avec overflow: hidden et déplacer le contenu à l'intérieur de celui-ci de haut en bas à l'aide négative marges.

Encore une fois cependant, c'est un mauvais UX. Utilisez simplement une barre de défilement.

Source

2010-01-08 20:39:54 noah

Je suis d'accord que le défilement de ce n'était pas une bonne conception, mais la spécification est hors de mon contrôle. Merci pour votre aide avec ceci. – the3seashells

Pour que cela fonctionne avec IE6, j'avais besoin d'ajouter une vérification pour une valeur de marge de "auto" je l'ai adressé avec ceci: if (current == 'auto') { \t current = '0px'; } – the3seashells

me semble que vous avez juste besoin de mettre en œuvre $.scrollTo(): Je viens travaillé à la conception suivante à l'aide d'un seul bouton « Forward Advance » (note: Vous devez avoir jQuery et le plugin scrollTo référencé:

<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; 
});

Source

2010-01-08 19:33:08 Sampson

Je ne connais pas de solution existante. Cependant, avec un peu de JavaScript (en utilisant quelque chose comme jQuery), vous pouvez calculer la hauteur d'un élément. $ (élément) .height() par exemple. En utilisant cette méthode, vous pouvez parcourir une boucle d'éléments et les ajouter à un div en fonction de la pièce disponible à gauche (définie comme une constante je suppose). Donc, si j'ai 3 éléments et que ma taille disponible est de 100 px et que jQuery renvoie une hauteur de 35 px pour chaque élément, j'indiquerais les deux premiers et ensuite ajouterai le dernier à une file d'attente à afficher lorsque l'utilisateur cliquera dessus. Il serait un peu plus difficile de fractionner le texte en mi-élément mais je suppose que vous pourriez utiliser l'analyse de chaîne pour couper le texte de l'élément en deux, mesurer la hauteur, couper à nouveau en deux, mesurer la hauteur, etc. ce ne serait pas joli, mais ça marcherait probablement.

Source

2010-01-08 19:34:36

Regardez ce plugin jQuery: http://rascarlito.free.fr/hoverscroll/

Source

2010-02-01 21:32:44 Dumitru

jQuery Pagination par hauteur div (pas article)

Répondre

Questions connexes