Today I tested the Booklet jQuery tool because I did not find too much data on this tool on the internet.
This helps 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 the documentation and download it from here.
I download and unarchive this tool to default folder booklet-master.
Because this tool comes with an index.html file, I create an 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
85
<!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>

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Translate »