Today I tested the Booklet jQuery tool, because I did not find too much data on this tool on the internet.
This help me to display the content on the web in a flipbook layout.
In this tutorial, I will only present a book of web page sizes, changing the color of the cover and adding text.
This tool also allows other features, but I will return to the right time.
It was built using the jQuery library and is licensed under the MIT license.
You can read documentation and download it from here.
I download and unarchive this tool to default folder booklet-master.
Because this tool come with a index.html file, I create a index2.html file and I add my source code.
To change the default brown cover I change this line of code from this file jquery.booklet.latest.css ( from src folder ).
.booklet .b-page-cover {padding:0; width:100%; height:100%; background:#dddddd;}
This is my index2.html file and result is a book with some text.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<!doctype html> <html> <head> <link href="src/jquery.booklet.latest.css" type="text/css" rel="stylesheet" media="screen, projection, tv" /> <script src="src/jquery.easing.1.3.js"></script> <script src="src/jquery-2.1.0.min.js"></script> <script src="src/jquery.booklet.latest.min.js"></script> <script src="src/jquery-ui-1.10.4.min.js"></script> <style> #mybook { color: #000000 ; } </style> <style type="text/css"> body {background:#ccc; font:normal 16px/1.2 arial, verdana, sans-serif;} </style> </head> <body> <div id="mybook"> <div> <h3>Yay, Page 1!</h3> <h1>The cover book.</h1> </div> <div> <h3>Yay, Page 2!</h3> <p>Booklet is a jQuery tool for displaying content on the web in a flipbook layout. It was built using the jQuery library.</p> </div> <div> <h3>Yay, Page 3!</h3> </div> <div> <h3>Yay, Page 4!</h3> <p>Licensed under the MIT license. </p> </div> <div> <h3>Yay, Page 5!</h3> </div> <div> <h3>Yay, Page 6!</h3> </div> </div> <script> function contentAutoSize(){ $("#mybook").height($(window).height()); $("#mybook").width($(window).width()); } contentAutoSize(); // call on first load // call on browser resize $(window).resize(contentAutoSize); $(function() { //single book $('#mybook').booklet({ pagePadding:10, pageBorder:10, cursor: "pointer", // size of the book width: "95%", height: "95%", // the book is close with covers closed: true, covers: true, manual: false, overlays: true, hovers: true, //enable shadow: value true/false shadows: false, //enable arrows: value true/false arrows: false, }); }); </script> </body> </html> |