mirror of
https://github.com/blasten/turn.js.git
synced 2026-07-14 05:41:08 +08:00
Up to jq4 and add démo
This commit is contained in:
poongaloo
parent
08c1f6599a
commit
9ceba31662
10
demos/minimal/assets/browser.svg
Normal file
10
demos/minimal/assets/browser.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-labelledby="title">
|
||||
<title id="title">Fenetre de navigateur avec indicateurs de compatibilite</title>
|
||||
<rect width="640" height="360" fill="#f8fafc"/>
|
||||
<rect x="88" y="66" width="464" height="228" rx="16" fill="#ffffff" stroke="#8795a8" stroke-width="4"/>
|
||||
<rect x="88" y="66" width="464" height="46" rx="16" fill="#dbe4ef"/>
|
||||
<rect x="130" y="144" width="110" height="88" rx="12" fill="#dff0ff"/>
|
||||
<rect x="266" y="144" width="110" height="88" rx="12" fill="#dcfce7"/>
|
||||
<rect x="402" y="144" width="110" height="88" rx="12" fill="#fef3c7"/>
|
||||
<path d="M158 188l20 20 36-44M294 188l20 20 36-44M430 188l20 20 36-44" fill="none" stroke="#0f766e" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 829 B |
10
demos/minimal/assets/cover.svg
Normal file
10
demos/minimal/assets/cover.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-labelledby="title">
|
||||
<title id="title">Livre ouvert avec pages colorees</title>
|
||||
<rect width="640" height="360" fill="#f3f6fb"/>
|
||||
<rect x="82" y="62" width="238" height="236" rx="10" fill="#fff4c7" stroke="#8b95a5" stroke-width="3"/>
|
||||
<rect x="320" y="62" width="238" height="236" rx="10" fill="#dff0ff" stroke="#8b95a5" stroke-width="3"/>
|
||||
<path d="M320 62v236" stroke="#657184" stroke-width="5"/>
|
||||
<path d="M116 112h154M116 146h126M116 180h168M370 112h142M370 146h116M370 180h150" stroke="#64748b" stroke-width="8" stroke-linecap="round"/>
|
||||
<circle cx="472" cy="236" r="34" fill="#3b82f6"/>
|
||||
<path d="M456 237l12 12 24-30" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 835 B |
8
demos/minimal/assets/finish.svg
Normal file
8
demos/minimal/assets/finish.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-labelledby="title">
|
||||
<title id="title">Marque de validation sur une page</title>
|
||||
<rect width="640" height="360" fill="#eef2ff"/>
|
||||
<rect x="184" y="58" width="272" height="244" rx="18" fill="#ffffff" stroke="#7c8aa0" stroke-width="4"/>
|
||||
<path d="M232 116h176M232 154h132M232 228h176" stroke="#94a3b8" stroke-width="10" stroke-linecap="round"/>
|
||||
<circle cx="320" cy="192" r="48" fill="#2563eb"/>
|
||||
<path d="M296 193l17 17 33-42" fill="none" stroke="#ffffff" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 639 B |
12
demos/minimal/assets/layout.svg
Normal file
12
demos/minimal/assets/layout.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-labelledby="title">
|
||||
<title id="title">Composition de pages dans un navigateur</title>
|
||||
<rect width="640" height="360" fill="#eef6ff"/>
|
||||
<rect x="74" y="50" width="492" height="260" rx="16" fill="#ffffff" stroke="#8ca0b8" stroke-width="4"/>
|
||||
<rect x="74" y="50" width="492" height="38" rx="16" fill="#cbd5e1"/>
|
||||
<circle cx="104" cy="69" r="7" fill="#ef4444"/>
|
||||
<circle cx="128" cy="69" r="7" fill="#f59e0b"/>
|
||||
<circle cx="152" cy="69" r="7" fill="#22c55e"/>
|
||||
<rect x="116" y="122" width="180" height="142" fill="#fff7d6" stroke="#94a3b8" stroke-width="3"/>
|
||||
<rect x="344" y="122" width="180" height="142" fill="#e0f2fe" stroke="#94a3b8" stroke-width="3"/>
|
||||
<path d="M320 112v166" stroke="#64748b" stroke-width="4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 836 B |
9
demos/minimal/assets/media.svg
Normal file
9
demos/minimal/assets/media.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-labelledby="title">
|
||||
<title id="title">Image abstraite avec cadres de contenu</title>
|
||||
<rect width="640" height="360" fill="#fff7ed"/>
|
||||
<rect x="78" y="58" width="484" height="244" rx="14" fill="#ffffff" stroke="#9aa7ba" stroke-width="4"/>
|
||||
<rect x="112" y="94" width="212" height="156" rx="10" fill="#fed7aa"/>
|
||||
<circle cx="162" cy="136" r="24" fill="#f97316"/>
|
||||
<path d="M112 250l82-74 58 48 42-34 30 60z" fill="#fb923c"/>
|
||||
<path d="M370 112h124M370 152h92M370 192h136M370 232h108" stroke="#64748b" stroke-width="10" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 661 B |
8
demos/minimal/assets/navigation.svg
Normal file
8
demos/minimal/assets/navigation.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-labelledby="title">
|
||||
<title id="title">Fleches de navigation autour d'un livre</title>
|
||||
<rect width="640" height="360" fill="#f0fdf4"/>
|
||||
<rect x="184" y="78" width="128" height="206" rx="8" fill="#fff7d6" stroke="#718096" stroke-width="4"/>
|
||||
<rect x="328" y="78" width="128" height="206" rx="8" fill="#dff0ff" stroke="#718096" stroke-width="4"/>
|
||||
<path d="M320 78v206" stroke="#64748b" stroke-width="5"/>
|
||||
<path d="M128 180h-54m0 0 26-26m-26 26 26 26M512 180h54m0 0-26-26m26 26-26 26" fill="none" stroke="#16a34a" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 697 B |
203
demos/minimal/index.html
Normal file
203
demos/minimal/index.html
Normal file
@ -0,0 +1,203 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>turn.js - exemple minimal</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
font-family: Arial, sans-serif;
|
||||
background: #eef1f5;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
main {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
justify-items: center;
|
||||
gap: 18px;
|
||||
padding: 28px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#book {
|
||||
width: 720px;
|
||||
height: 460px;
|
||||
background: #cbd3df;
|
||||
}
|
||||
|
||||
#book .page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
width: 360px;
|
||||
height: 460px;
|
||||
box-sizing: border-box;
|
||||
padding: 28px;
|
||||
border: 1px solid #aeb8c8;
|
||||
background: #fff8df;
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
#book .page:nth-child(even) {
|
||||
background: #e7f1ff;
|
||||
}
|
||||
|
||||
#book .page h1,
|
||||
#book .page h2 {
|
||||
margin: 0;
|
||||
font-size: 30px;
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
#book .page p {
|
||||
margin: 0;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
#book .page img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
border: 1px solid #aeb8c8;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.kicker {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: #536173;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
button {
|
||||
min-width: 96px;
|
||||
min-height: 38px;
|
||||
border: 1px solid #9aa7ba;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
color: #1f2937;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #f6f8fb;
|
||||
}
|
||||
|
||||
#status {
|
||||
min-width: 92px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
#book {
|
||||
width: 92vw;
|
||||
height: 58vw;
|
||||
max-height: 460px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div id="book">
|
||||
<div class="page">
|
||||
<span class="kicker">Demo minimale</span>
|
||||
<h1>Explorer turn.js</h1>
|
||||
<img src="assets/cover.svg" alt="Livre ouvert avec pages colorees">
|
||||
<p>Un exemple autonome pour verifier rapidement le chargement de jQuery 4, l'initialisation du plugin et le changement de page.</p>
|
||||
</div>
|
||||
<div class="page">
|
||||
<span class="kicker">Page 2</span>
|
||||
<h2>Un livre HTML</h2>
|
||||
<p>Chaque page est un simple element HTML. Le plugin ajoute les wrappers, gere les vues et anime le passage d'une page a l'autre.</p>
|
||||
<img src="assets/layout.svg" alt="Composition de pages dans un navigateur">
|
||||
</div>
|
||||
<div class="page">
|
||||
<span class="kicker">Page 3</span>
|
||||
<h2>Images et texte</h2>
|
||||
<img src="assets/media.svg" alt="Image abstraite avec cadres de contenu">
|
||||
<p>La demo contient du texte et des images locales afin de tester un rendu un peu plus proche d'un cas reel.</p>
|
||||
</div>
|
||||
<div class="page">
|
||||
<span class="kicker">Page 4</span>
|
||||
<h2>Navigation</h2>
|
||||
<p>Utilise les boutons, les fleches du clavier ou le coin de page pour changer de vue.</p>
|
||||
<img src="assets/navigation.svg" alt="Fleches de navigation autour d'un livre">
|
||||
</div>
|
||||
<div class="page">
|
||||
<span class="kicker">Page 5</span>
|
||||
<h2>Compatibilite</h2>
|
||||
<img src="assets/browser.svg" alt="Fenetre de navigateur avec indicateurs de compatibilite">
|
||||
<p>Cette page charge jQuery 4.0.0 depuis le CDN officiel et la version locale de turn.js depuis le depot clone.</p>
|
||||
</div>
|
||||
<div class="page">
|
||||
<span class="kicker">Page 6</span>
|
||||
<h2>Fin du test</h2>
|
||||
<p>Si cette derniere page s'affiche et que le retour fonctionne, le scenario minimal est operationnel.</p>
|
||||
<img src="assets/finish.svg" alt="Marque de validation sur une page">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button type="button" id="previous">Previous</button>
|
||||
<span id="status">Page 1</span>
|
||||
<button type="button" id="next">Next</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
|
||||
<script src="../../turn.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
var $book = $('#book');
|
||||
var $status = $('#status');
|
||||
|
||||
function updateStatus() {
|
||||
$status.text('Page ' + $book.turn('page') + ' / ' + $book.turn('pages'));
|
||||
}
|
||||
|
||||
$book.turn({
|
||||
width: 720,
|
||||
height: 460,
|
||||
display: 'double',
|
||||
gradients: true,
|
||||
acceleration: true,
|
||||
when: {
|
||||
turned: updateStatus
|
||||
}
|
||||
});
|
||||
|
||||
$('#previous').on('click', function() {
|
||||
$book.turn('previous');
|
||||
});
|
||||
|
||||
$('#next').on('click', function() {
|
||||
$book.turn('next');
|
||||
});
|
||||
|
||||
$(document).on('keydown', function(event) {
|
||||
if (event.key === 'ArrowLeft') $book.turn('previous');
|
||||
if (event.key === 'ArrowRight') $book.turn('next');
|
||||
});
|
||||
|
||||
updateStatus();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
24
turn.js
24
turn.js
@ -34,6 +34,10 @@ var has3d,
|
||||
events = (isTouch) ? {start: 'touchstart', move: 'touchmove', end: 'touchend'}
|
||||
: {start: 'mousedown', move: 'mousemove', end: 'mouseup'},
|
||||
|
||||
turnEventNamespace = '.turn',
|
||||
|
||||
turnFlipEventNamespace = '.turnFlip',
|
||||
|
||||
// Contansts used for each corner
|
||||
// tl * tr
|
||||
// * *
|
||||
@ -255,7 +259,7 @@ turnMethods = {
|
||||
if (opts.when)
|
||||
for (i in opts.when)
|
||||
if (has(i, opts.when))
|
||||
this.bind(i, opts.when[i]);
|
||||
this.on(i + turnEventNamespace, opts.when[i]);
|
||||
|
||||
|
||||
this.css({position: 'relative', width: opts.width, height: opts.height});
|
||||
@ -275,18 +279,18 @@ turnMethods = {
|
||||
|
||||
// Event listeners
|
||||
|
||||
$(this).bind(events.start, function(e) {
|
||||
$(this).on(events.start + turnEventNamespace, function(e) {
|
||||
for (var page in data.pages)
|
||||
if (has(page, data.pages) && flipMethods._eventStart.call(data.pages[page], e)===false)
|
||||
return false;
|
||||
});
|
||||
|
||||
$(document).bind(events.move, function(e) {
|
||||
$(document).on(events.move + turnEventNamespace, function(e) {
|
||||
for (var page in data.pages)
|
||||
if (has(page, data.pages))
|
||||
flipMethods._eventMove.call(data.pages[page], e);
|
||||
}).
|
||||
bind(events.end, function(e) {
|
||||
on(events.end + turnEventNamespace, function(e) {
|
||||
for (var page in data.pages)
|
||||
if (has(page, data.pages))
|
||||
flipMethods._eventEnd.call(data.pages[page], e);
|
||||
@ -431,11 +435,11 @@ turnMethods = {
|
||||
frontGradient: data.opts.gradients
|
||||
}).
|
||||
flip('disable', data.disabled).
|
||||
bind('pressed', turnMethods._pressed).
|
||||
bind('released', turnMethods._released).
|
||||
bind('start', turnMethods._start).
|
||||
bind('end', turnMethods._end).
|
||||
bind('flip', turnMethods._flip);
|
||||
on('pressed' + turnFlipEventNamespace, turnMethods._pressed).
|
||||
on('released' + turnFlipEventNamespace, turnMethods._released).
|
||||
on('start' + turnFlipEventNamespace, turnMethods._start).
|
||||
on('end' + turnFlipEventNamespace, turnMethods._end).
|
||||
on('flip' + turnFlipEventNamespace, turnMethods._flip);
|
||||
}
|
||||
return data.pages[page];
|
||||
},
|
||||
@ -1930,4 +1934,4 @@ $.extend($.fn, {
|
||||
|
||||
$.isTouch = isTouch;
|
||||
|
||||
})(jQuery);
|
||||
})(jQuery);
|
||||
|
||||
66
turn.min.js
vendored
66
turn.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user