將客戶端內容分解爲多個「頁面」的方法

我有一個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

將客戶端內容分解爲多個「頁面」的方法

回答

相關問題