Methods for breaking up content client-side into multiple "pages"_问答_开发者

Methods for breaking up content client-side into multiple "pages"

开发者 https://www.devze.com 2023-01-01 15:57 出处：网络

I have a long HTML text-only article formatted with paragraph tags. What I\'d 开发者_Go百科like to do is break this content into N number of divs so that I can create individual pages. So, for instanc

相关专题：javascript

I have a long HTML text-only article formatted with paragraph tags. What I'd 开发者_Go百科like to do is break this content into N number of divs so that I can create individual pages. So, for instance, on an iPad/iPhone, instead of reading one long page the user could swipe right/left to navigate to pages.

My initial javascript attempts have been somewhat convoluted: creating an array of the text, measuring line-heights, device window heights, adding closing/opening paragraph tags and the end/beginning of pages.

Thoughts on a good way to approach this? I will not have access to server-side processing, this has to be a client-side solution.

How about a div that scrolls a fixed amount on the click of a button?

I've used YUI here, but it's easily translatable. Basically you just create a fixed size div and change it's scrollTop value on click.

<html><head><script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.1/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<style>
    #page {
        border: inset;
        height:400px;
        width:400px;
        overflow:hidden;
    }
</style>
<script>
   (function() {
    var Dom = YAHOO.util.Dom,
        Evt = YAHOO.util.Event;
    var getPageSize = function(){
        return Dom.get('size').value;
    };
    Evt.addListener('Next', "click", function() {
        var page = document.getElementById('page');
        Dom.get('page').scrollTop += getPageSize();
    });
    Evt.addListener('Previous', "click", function() {
        var page = document.getElementById('page');
        Dom.get('page').scrollTop -= getPageSize();
    });
})();
</script></head>
<body><input type='text' id='size' value='50'>
<div id='Next'>Next</div>
<div id='Previous'>Previous</div>
<div id='page'> INSERT LOTS OF TEXT HERE </div></body></html>