-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
129 lines (123 loc) · 4.67 KB
/
index.html
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue-BookBlock</title>
<link rel="stylesheet" href="./styles/bookblock.css">
<style>
.bb-bookblock {
/* A5 */
width: 1120px;
height: 798px;
}
.page {
width: 50%;
float: left;
height: 100%;
padding: 5%;
box-sizing: border-box;
border: 1px solid #eee;
}
.page + .page {
border-left: 0;
}
nav {
margin-top: 1em;
}
.cover {
width: 50%;
margin-left: auto;
float: none;
}
</style>
</head>
<body>
<app>
<div class="bb-bookblock" v-bookBlock="options" ref="bookBlock">
<div class="bb-item">
<div class="page cover">
<h1>Cover</h1>
<p>lorem ipsum</p>
</div>
</div>
<div class="bb-item">
<div class="page">
<h1>Page 1</h1>
<p>Lorem ipsum dolor sit amet, utinam audiam forensibus vim no, mel solum graecis recusabo ei. Et viris placerat
qui, ad quodsi eleifend constituam eam. Ex iusto partiendo gubergren per, quis assentior dissentias cum ad, te
eruditi utroque dissentiunt qui. Ad vix debet mucius iriure. Cu soleat facilis vim, sit nullam delenit ne. Sea
simul aliquam in, has augue soleat at.</p>
</div>
<div class="page">
<h1>Page 2</h1>
<p>Vis mollis consulatu et, has in facilisis posidonium. Minim choro ea quo, iisque feugait consectetuer at mei.
Ne ius omnium maiestatis, et augue indoctum elaboraret cum. Ad his mutat munere, choro saperet no quo. Duo ne
adolescens consequuntur, etiam essent patrioque te ius, legendos inimicus mea ex. Qui cu lorem comprehensam,
cu nominati sententiae definitionem eos.</p>
</div>
</div>
<div class="bb-item">
<div class="page">
<h1>Page 3</h1>
<p>Lorem ipsum dolor sit amet, utinam audiam forensibus vim no, mel solum graecis recusabo ei. Et viris placerat
qui, ad quodsi eleifend constituam eam. Ex iusto partiendo gubergren per, quis assentior dissentias cum ad, te
eruditi utroque dissentiunt qui. Ad vix debet mucius iriure. Cu soleat facilis vim, sit nullam delenit ne. Sea
simul aliquam in, has augue soleat at.</p>
</div>
<div class="page">
<h1>Page 4</h1>
<p>Vis mollis consulatu et, has in facilisis posidonium. Minim choro ea quo, iisque feugait consectetuer at mei.
Ne ius omnium maiestatis, et augue indoctum elaboraret cum. Ad his mutat munere, choro saperet no quo. Duo ne
adolescens consequuntur, etiam essent patrioque te ius, legendos inimicus mea ex. Qui cu lorem comprehensam,
cu nominati sententiae definitionem eos.</p>
</div>
</div>
<div class="bb-item">
<div class="page">
<h1>Page 5</h1>
<p>Lorem ipsum dolor sit amet, utinam audiam forensibus vim no, mel solum graecis recusabo ei. Et viris placerat
qui, ad quodsi eleifend constituam eam. Ex iusto partiendo gubergren per, quis assentior dissentias cum ad, te
eruditi utroque dissentiunt qui. Ad vix debet mucius iriure. Cu soleat facilis vim, sit nullam delenit ne. Sea
simul aliquam in, has augue soleat at.</p>
</div>
<div class="page">
<h1>Page 6</h1>
<p>Vis mollis consulatu et, has in facilisis posidonium. Minim choro ea quo, iisque feugait consectetuer at mei.
Ne ius omnium maiestatis, et augue indoctum elaboraret cum. Ad his mutat munere, choro saperet no quo. Duo ne
adolescens consequuntur, etiam essent patrioque te ius, legendos inimicus mea ex. Qui cu lorem comprehensam,
cu nominati sententiae definitionem eos.</p>
</div>
</div>
</div>
<nav style="text-align: center;">
<a id="bb-nav-first" href="javascript:" @click="bookblock.first()">First page</a>
<a id="bb-nav-prev" href="javascript:" @click="bookblock.prev()">Previous</a>
<a id="bb-nav-next" href="javascript:" @click="bookblock.next()">Next</a>
<a id="bb-nav-last" href="javascript:" @click="bookblock.last()">Last page</a>
</nav>
</app>
<script src="https://unpkg.com/vue@2.2.2/dist/vue.min.js"></script>
<script src="./bookblock.js"></script>
<script src="./vue-bookblock.js"></script>
<script>
new Vue({
el: 'app',
data: function () {
return {
options: {
speed: 500
}
}
},
computed: {
bookblock: function () {
return this.$refs.bookBlock.bookblock
}
}
})
</script>
</body>
</html>