Disons que j'ai une très longue page de contenu composé de plusieurs paragraphes qui ne peuvent pas être Affiché dans une seule fenêtre de navigateur avec barre de défilement vertical
<!-- page 1 --> <p>...very long sentence ...</p> <p>...very long </p><!-- the ending p tag is automatic inserted since the following text cannot be displayed --> <!-- page 2 --> <p>sentence ...</p> <p>...very long sentence ...</p> <p>...very long sentence ...</p>
10 Réponses :
Jetez un coup d'œil à
Vous pouvez utiliser le contrôle JQuery Accordion Si vous avez plusieurs paragaraphmes que vous ne devriez diviser, puis dans l'accordéon, il améliorera la lecture de votre page
Quelqu'un a créé une fonctionnalité Afficher / masquer avec jQuery.
Ceci peut vous aider. P>
<div style="height:500px;overflow:hidden" id="blah">
Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.
</div>
<a href="#" id="showmore">Show more</a>
<script>
$("#showmore").live('click', function() {
$("#blah").css('height','1000px');
});
</script>
édité: ( Demo Link mise à jour ) Voir cette En utilisant le code ci-dessous, vous pouvez paginer des paragraphes sans limites comme selon vos besoins. html:
Merci pour votre démo, vous répondez à proximité, sauf que j'ai besoin d'une hauteur fixe, par exemple. Lorsque la largeur est plus étroite, je veux que le texte supplémentaire passe dans la page suivante au lieu d'envelopper dans une nouvelle ligne.
Bonjour, j'ai essayé la démo mise à jour, je regarde en fait la hauteur absolue d'une page, pas le nombre absolu de bals p par page. Si une largeur de page est plus étroite, une balle P pourrait avoir besoin de se diviser en deux afin d'accueillir la hauteur absolue.
De ce que je comprends, cela est très similaire à la manière dont un lecteur en ligne fonctionne, où le contenu est formaté dans différentes pages ou diapositives, ce qui ne comporte pas ce que le contenu à l'intérieur est, car cela s'adapte à son conteneur. < P> Pour atteindre votre objectif, je recommanderais une mise en page CSS3 multi-colonnes (voir http://www.w3.org/tr/2001/wd-css3-multicol-20010118/ )
CSS jQuery Voir exemple et code :
Le Financial Times a mis au point une solution JavaScript pour la mise en page multi-colonnes avec une mise au point spéciale sur des cas compliqués (c'est-à-dire comme des cas de journaux), FTColumnflow .
Si vous définissez un conteneur sur la largeur d'une colonne et faites alors une pagination, c'est-à-dire via JQuery UI onglets, cela pourrait être une solution, qui correspond à des cas les plus difficiles.
Remarque: Aucune compatibilité avec IE9 et moins (mais elle a beaucoup de fonctionnalités)
J'espère que ce code vous aider. Peut-être que certains cas sont omis ou vous pouvez trouver un meilleur alhorithme ou vous pouvez l'optimiser. C'est juste un moyen de vous conduire.
$(document).ready(function(){
var current_page_height = $(window).innerHeight() - $("div.pagination").innerHeight();
function createPages(page_height){
var current_page_height = 0;
var pages = [];
var current_page = [];
var cpt_page = 0;
$("div.content").children().each(function(index, element){
var el = $(element);
el.hide();
if(current_page_height + el.innerHeight() > page_height){
var height_over = (current_page_height+el.innerHeight()) - page_height;
var line_height_el = el.css("line-height").replace("px","")
if( line_height_el < height_over && el.find("img").length == 0){
var number_line_to_remove = Math.round(height_over/line_height_el);
var number_line = el.innerHeight() / line_height_el;
var char_by_line = Math.floor(el.html().length / number_line);
var content_el = el.html();
var pointer_substr = (number_line - number_line_to_remove) * char_by_line;
while(content_el.charAt(pointer_substr) != " " && pointer_substr > 0){
pointer_substr--;
}
var new_element = $("<p>" + content_el.substr( pointer_substr, content_el.length-1) + "</p>");
el.html( content_el.substr(0, pointer_substr+1));
current_page.push(el);
el.after(new_element);
el = new_element;
el.hide();
}
pages[cpt_page] = current_page;
current_page_height = 0;
current_page = [];
cpt_page++;
}
current_page.push( el );
current_page_height += el.innerHeight();
});
if(current_page.length > 0){
pages[cpt_page] = current_page;
}
return pages;
}
function displayPage(page_to_display){
if( page_to_display >= 0 && page_to_display < pages.length){
$(pages[page_to_display]).each(function(index, element){
element.show();
});
$(pages[$("span.page").html()]).each(function(index,element){
element.hide();
});
$("span.page").html(page_to_display);
}
}
var pages = createPages(current_page_height);
displayPage(0);
$("span.next").click(function(){
var page = new Number($("span.page").html());
displayPage( page+1 );
});
$("span.prev").click(function(){
var page = new Number($("span.page").html());
displayPage( page-1 );
});
});
sucre.js a une excellente fonction () () () qui cultive le texte sur vos spécifications
Il y a quelque temps, j'ai créé Pagify , un plugin JQuery à faire exactement cela. Il détecte la hauteur de la page en divisant des éléments en mots et en ajoutant progressivement les mots jusqu'à ce que la hauteur atteigne une hauteur spécifiée. Je lui ai donné des CSS pour qu'il ressemble à des pages de la démo ci-dessous, mais vous pouvez le styler à 100% de largeur et de hauteur. Vous pouvez l'appeler simplement avec $ («corps»). Pagify (options); code> Les options par défaut sont les suivantes $('body').pagify({
pageSize : 'screen-size'
});
Qu'entendez-vous par page? Vous voulez dire des pages HTML séparées que vous souhaitez naviguer avec pagination?
Si vous recherchez simplement une sorte de pagination frontale, alors jQuery plugins disponibles, tels que celui-ci tympanus.net/codrops/2009/11/17/...
@Yoga: a ajouté une démo de travail dans ma réponse ci-dessous. J'espère que c'est celui que vous recherchez. Merci!