Методы разбиения содержимого на стороне клиента на несколько «страниц»

У меня есть длинная текстовая статья 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

Это хорошее начало. Я ищу способ скопировать блоки текста справа налево, но должно быть относительно легко клонировать содержимое и смещать его для создания «страниц». –

Методы разбиения содержимого на стороне клиента на несколько «страниц»

ответ

Смежные вопросы