CSS Multi-column Layout Module (html pagination)

兩年前在 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>


, , ,

changyy 發表在 痞客邦 PIXNET 留言(0) 人氣()