将客户端内容分解为多个“页面”的方法

我有一个HTML文本格式的文章，格式为段落标签。我想要做的是将此内容分解为N个div，以便我可以创建单独的页面。因此，例如，在iPad/iPhone上，用户可以左右滑动来浏览页面，而不是阅读一个长页面。将客户端内容分解为多个“页面”的方法

我最初的JavaScript的尝试已经有点令人费解：创建所述文本的阵列，测量线的高度，设备窗口高度，将关闭/打开段落标签和页结束/开始。

有关处理此问题的好方法的想法？我将无法访问服务器端处理，这必须是客户端解决方案。

2010-05-28 Tom Genoni

如何通过点击按钮滚动固定金额的div？

我已经在这里使用YUI，但它很容易翻译。基本上你只需创建一个固定大小的div，并在点击时改变它的scrollTop值。

<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>

来源

2010-05-28 20:10:27

这是一个良好的开端。我正在寻找一种从右向左滑动文本块的方法，但应该相对容易地克隆内容并抵消它以创建“页面”。 – 2010-06-02 21:07:21

将客户端内容分解为多个“页面”的方法

回答

相关问题