兩年前在 Monocle EPUB Reader 看到的作法，今天被朋友問了一下分頁作法，我一時之間也想不起來 XD 只好翻翻以前寫的 HTML EPUB Reader，順便做個筆記吧！
概念是透過 CSS Multi-column Layout Module http://www.w3.org/TR/css3-multicol/ 實作的，假設定一個 DIV 並在裡頭塞滿字，透過設定 [-moz- | -webkit-]column-width = 150px 話，假設瀏覽器視窗為 600px ，那就會一頁看到 4 個 columns 囉。
於是，分頁的作法就是在指定的顯示範圍內，切換指定的 column 而已。
範例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#show {
position:absolute;
height:100%;width:100%;
margin: 0;
z-index:100;
overflow: hidden;
}
#content {
position:absolute;
font-size:20px;
-webkit-column-gap: 0pt; -webkit-column-width: 1000px;
-moz-column-gap: 0pt; -moz-column-width: 1000px;
z-index:100;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
function windowResize() {
var window_width = $(window).width() - 20;
var window_height = $(window).height() - 50;
window_width += 'px';
window_height += 'px';
$( '#show' ).width( window_width).height(window_height);
$( '#content' ).width(window_width).height(window_height)
.css( '-moz-column-width' , window_width ).css( '-webkit-column-width' , window_width );
}
$( window ).resize( function() {
windowResize();
} );
$( document ).ready( function() {
windowResize();
$('#prev').click( function() {
//console.log('prev');
var obj = document.getElementById('show');
if( obj.scrollLeft > 0 )
obj.scrollLeft -= $('#show').width();
else
obj.scrollLeft = 0;
} );
$('#next').click( function() {
//console.log('next');
var obj = document.getElementById('show');
if( obj.scrollLeft < $('#show').width() )
obj.scrollLeft += $('#show').width();
} );
setTimeout(function() { window.scrollTo(0, 1) }, 100);
} );
</script>
</head>
<body>
<button id="prev">Prev</button><button id="next">Next</button>
<div id="show">
<div id="content">
<p>大量文字</p>
</div>
</div>
</body>
</html>
沒有留言:
張貼留言