클라이언트 측을 여러 "페이지"로 분할하는 방법

단락 태그로 서식이 지정된 긴 HTML 텍스트 전용 기사가 있습니다. 내가 원하는 것은 개별 페이지를 만들 수 있도록이 콘텐츠를 N 개의 div 수로 나누는 것입니다. 예를 들어, iPad/iPhone에서 하나의 긴 페이지를 읽는 대신 사용자가 오른쪽/왼쪽으로 스 와이프하여 페이지를 탐색 할 수 있습니다.클라이언트 측을 여러 "페이지"로 분할하는 방법

텍스트의 배열 만들기, 줄 높이 측정, 장치 창 높이 측정, 닫기/여는 단락 태그 추가, 끝/페이지 시작 등 자바 스크립트의 초기 시도는 다소 복잡해졌습니다.

좋은 접근 방식에 대한 생각은 이것에 접근하고 있습니까? 서버 측 처리에 액세스 할 수 없으며 클라이언트 측 솔루션이어야합니다.

출처

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

이것은 좋은 시작입니다. 텍스트를 오른쪽에서 왼쪽으로 슬라이드하는 방법을 찾고 있지만 내용을 복제하고 '페이지'를 만들기 위해 오프셋하는 것이 상대적으로 쉽습니다. –

클라이언트 측을 여러 "페이지"로 분할하는 방법

답변

관련 문제