|
|
Line 8: |
Line 8: |
| background:#ccc; | | background:#ccc; |
| } | | } |
- | #book{ | + | #notebookigem{ |
- | width:800px; | + | width:1152px; |
- | height:500px; | + | height:752px; |
| } | | } |
- | | + | #notebookigem .turn-page{ |
- | #book .turn-page{ | + | background-color:#ccc; |
- | background-color:white; | + | background-size:100% 100%; |
- | }
| + | |
- | | + | |
- | #book .cover{
| + | |
- | background:#333;
| + | |
- | }
| + | |
- | | + | |
- | #book .cover h1{
| + | |
- | color:white;
| + | |
- | text-align:center;
| + | |
- | font-size:50px;
| + | |
- | line-height:500px;
| + | |
- | margin:0px;
| + | |
- | }
| + | |
- | | + | |
- | #book .loader{
| + | |
- | background-image:url(loader.gif); | + | |
- | width:24px;
| + | |
- | height:24px;
| + | |
- | display:block;
| + | |
- | position:absolute;
| + | |
- | top:238px;
| + | |
- | left:188px;
| + | |
- | }
| + | |
- | | + | |
- | #book .data{
| + | |
- | text-align:center;
| + | |
- | font-size:40px;
| + | |
- | color:#999;
| + | |
- | line-height:500px;
| + | |
- | }
| + | |
- | | + | |
- | #controls{
| + | |
- | width:800px;
| + | |
- | text-align:center;
| + | |
- | margin:20px 0px;
| + | |
- | font:30px arial;
| + | |
- | }
| + | |
- | | + | |
- | #controls input, #controls label{
| + | |
- | font:30px arial;
| + | |
- | }
| + | |
- | | + | |
- | #book .odd{
| + | |
- | background-image:-webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
| + | |
- | background-image:-moz-linear-gradient(left, #FFF 95%, #ddd 100%);
| + | |
- | background-image:-o-linear-gradient(left, #FFF 95%, #ddd 100%);
| + | |
- | background-image:-ms-linear-gradient(left, #FFF 95%, #ddd 100%);
| + | |
- | }
| + | |
- | | + | |
- | #book .even{
| + | |
- | background-image:-webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
| + | |
- | background-image:-moz-linear-gradient(right, #FFF 95%, #ddd 100%);
| + | |
- | background-image:-o-linear-gradient(right, #FFF 95%, #ddd 100%);
| + | |
- | background-image:-ms-linear-gradient(right, #FFF 95%, #ddd 100%);
| + | |
| } | | } |
| </style> | | </style> |
Line 74: |
Line 20: |
| <body> | | <body> |
| | | |
- | <div id="book"> | + | <div id="notebookigem"> |
- | <div class="cover"><h1>The Bible</h1></div> | + | <div>asdasdasd</div> |
| + | <div>asdasdasd</div> |
| + | <div>asdasdasd</div> |
| + | <div>asdasdasd</div> |
| + | <div>asdasdasd</div> |
| </div> | | </div> |
| | | |
- | <div id="controls">
| |
- | <label for="page-number">Page:</label> <input type="text" size="3" id="page-number"> of <span id="number-pages"></span>
| |
- | </div>
| |
| | | |
| <script type="text/javascript"> | | <script type="text/javascript"> |
| | | |
- | // Sample using dynamic pages with turn.js
| + | $(window).ready(function() { |
- | | + | $('#notebookigem').turn({ |
- | var numberOfPages = 1000;
| + | display: 'double', |
- | | + | acceleration: true, |
- | | + | |
- | // Adds the pages that the book will need
| + | |
- | function addPage(page, book) {
| + | |
- | // First check if the page is already in the book
| + | |
- | if (!book.turn('hasPage', page)) {
| + | |
- | // Create an element for this page
| + | |
- | var element = $('<div />', {'class': 'page '+((page%2==0) ? 'odd' : 'even'), 'id': 'page-'+page}).html('<i class="loader"></i>');
| + | |
- | // If not then add the page
| + | |
- | book.turn('addPage', element, page);
| + | |
- | // Let's assum that the data is comming from the server and the request takes 1s.
| + | |
- | setTimeout(function(){
| + | |
- | element.html('<div class="data">Data for page '+page+'</div>');
| + | |
- | }, 1000);
| + | |
- | }
| + | |
- | }
| + | |
- | | + | |
- | $(window).ready(function(){ | + | |
- | $('#book').turn({acceleration: true, | + | |
- | pages: numberOfPages, | + | |
- | elevation: 50, | + | |
| gradients: !$.isTouch, | | gradients: !$.isTouch, |
| + | elevation:50, |
| when: { | | when: { |
- | turning: function(e, page, view) {
| |
- |
| |
- | // Gets the range of pages that the book needs right now
| |
- | var range = $(this).turn('range', page);
| |
- |
| |
- | // Check if each page is within the book
| |
- | for (page = range[0]; page<=range[1]; page++)
| |
- | addPage(page, $(this));
| |
- |
| |
- | },
| |
- |
| |
| turned: function(e, page) { | | turned: function(e, page) { |
- | $('#page-number').val(page); | + | /*console.log('Current view: ', $(this).turn('view'));*/ |
| } | | } |
| } | | } |
| }); | | }); |
- |
| |
- | $('#number-pages').html(numberOfPages);
| |
- |
| |
- | $('#page-number').keydown(function(e){
| |
- |
| |
- | if (e.keyCode==13)
| |
- | $('#book').turn('page', $('#page-number').val());
| |
- |
| |
- | });
| |
| }); | | }); |
- | | + | |
| + | |
| $(window).bind('keydown', function(e){ | | $(window).bind('keydown', function(e){ |
- | | + | |
- | if (e.target) | + | if (e.keyCode==37) |
- | if(e.target.tagName.toLowerCase()!='input')
| + | $('#notebookigem').turn('previous'); |
- | if (e.keyCode==37)
| + | else if (e.keyCode==39) |
- | $('#book').turn('previous');
| + | $('#notebookigem').turn('next'); |
- | else if (e.keyCode==39)
| + | |
- | $('#book').turn('next');
| + | |
- | | + | |
| }); | | }); |
| | | |
| </script> | | </script> |
- |
| |
| | | |
| </body> | | </body> |
| </html> | | </html> |