mirror of
https://github.com/blasten/turn.js.git
synced 2025-05-02 15:56:39 +08:00
270 lines
5.5 KiB
HTML
270 lines
5.5 KiB
HTML
<!doctype html>
|
|
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
|
|
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
|
|
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
|
|
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
|
|
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
|
|
<head>
|
|
<script type="text/javascript" src="../../extras/jquery.min.1.7.js"></script>
|
|
<script type="text/javascript" src="../../extras/jquery-ui-1.8.20.custom.min.js"></script>
|
|
<script type="text/javascript" src="../../extras/jquery.mousewheel.min.js"></script>
|
|
<script type="text/javascript" src="../../extras/modernizr.2.5.3.min.js"></script>
|
|
<script type="text/javascript" src="../../lib/hash.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div id="canvas">
|
|
<div id="book-zoom">
|
|
<div class="sample-docs">
|
|
<div ignore="1" class="tabs"><div class="left"> </div> <div class="right"> </div></div>
|
|
<div class="hard"></div>
|
|
<div class="hard"></div>
|
|
<div class="hard p29"></div>
|
|
<div class="hard p30"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="slider-bar" class="turnjs-slider">
|
|
<div id="slider"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
function loadApp() {
|
|
|
|
var flipbook = $('.sample-docs');
|
|
|
|
// Check if the CSS was already loaded
|
|
|
|
if (flipbook.width()==0 || flipbook.height()==0) {
|
|
setTimeout(loadApp, 10);
|
|
return;
|
|
}
|
|
|
|
// Mousewheel
|
|
|
|
$('#book-zoom').mousewheel(function(event, delta, deltaX, deltaY) {
|
|
|
|
var data = $(this).data(),
|
|
step = 30,
|
|
flipbook = $('.sample-docs'),
|
|
actualPos = $('#slider').slider('value')*step;
|
|
|
|
if (typeof(data.scrollX)==='undefined') {
|
|
data.scrollX = actualPos;
|
|
data.scrollPage = flipbook.turn('page');
|
|
}
|
|
|
|
data.scrollX = Math.min($( "#slider" ).slider('option', 'max')*step,
|
|
Math.max(0, data.scrollX + deltaX));
|
|
|
|
var actualView = Math.round(data.scrollX/step),
|
|
page = Math.min(flipbook.turn('pages'), Math.max(1, actualView*2 - 2));
|
|
|
|
if ($.inArray(data.scrollPage, flipbook.turn('view', page))==-1) {
|
|
data.scrollPage = page;
|
|
flipbook.turn('page', page);
|
|
}
|
|
|
|
if (data.scrollTimer)
|
|
clearInterval(data.scrollTimer);
|
|
|
|
data.scrollTimer = setTimeout(function(){
|
|
data.scrollX = undefined;
|
|
data.scrollPage = undefined;
|
|
data.scrollTimer = undefined;
|
|
}, 1000);
|
|
|
|
});
|
|
|
|
// Slider
|
|
|
|
$( "#slider" ).slider({
|
|
min: 1,
|
|
max: 100,
|
|
|
|
start: function(event, ui) {
|
|
if (!window._thumbPreview) {
|
|
_thumbPreview = $('<div />', {'class': 'thumbnail'}).html('<div></div>');
|
|
setPreview(ui.value);
|
|
_thumbPreview.appendTo($(ui.handle));
|
|
} else
|
|
setPreview(ui.value);
|
|
|
|
moveBar(false);
|
|
},
|
|
|
|
slide: function(event, ui) {
|
|
setPreview(ui.value);
|
|
},
|
|
|
|
stop: function() {
|
|
if (window._thumbPreview)
|
|
_thumbPreview.removeClass('show');
|
|
|
|
$('.sample-docs').turn('page', Math.max(1, $(this).slider('value')*2 - 2));
|
|
}
|
|
});
|
|
|
|
|
|
// URIs
|
|
|
|
Hash.on('^page\/([0-9]*)$', {
|
|
yep: function(path, parts) {
|
|
var page = parts[1];
|
|
|
|
if (page!==undefined) {
|
|
if ($('.sample-docs').turn('is'))
|
|
$('.sample-docs').turn('page', page);
|
|
}
|
|
|
|
},
|
|
nop: function(path) {
|
|
|
|
if ($('.sample-docs').turn('is'))
|
|
$('.sample-docs').turn('page', 1);
|
|
}
|
|
});
|
|
|
|
// Arrows
|
|
|
|
$(document).keydown(function(e){
|
|
|
|
var previous = 37, next = 39;
|
|
|
|
switch (e.keyCode) {
|
|
case previous:
|
|
|
|
$('.sample-docs').turn('previous');
|
|
|
|
break;
|
|
case next:
|
|
|
|
$('.sample-docs').turn('next');
|
|
|
|
break;
|
|
}
|
|
|
|
});
|
|
|
|
// Create the flipbook
|
|
|
|
flipbook.turn({
|
|
elevation: 50,
|
|
acceleration: false,
|
|
gradients: true,
|
|
autoCenter: true,
|
|
duration: 1000,
|
|
pages: 30,
|
|
when: {
|
|
|
|
turning: function(e, page, view) {
|
|
|
|
var book = $(this),
|
|
currentPage = book.turn('page'),
|
|
pages = book.turn('pages');
|
|
|
|
if (currentPage>3 && currentPage<pages-3) {
|
|
if (page==1) {
|
|
book.turn('page', 2).turn('stop').turn('page', page);
|
|
e.preventDefault();
|
|
return;
|
|
} else if (page==pages) {
|
|
book.turn('page', pages-1).turn('stop').turn('page', page);
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
} else if (page>3 && page<pages-3) {
|
|
if (currentPage==1) {
|
|
book.turn('page', 2).turn('stop').turn('page', page);
|
|
e.preventDefault();
|
|
return;
|
|
} else if (currentPage==pages) {
|
|
book.turn('page', pages-1).turn('stop').turn('page', page);
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
}
|
|
|
|
Hash.go('page/'+page).update();
|
|
|
|
if (page==1 || page==pages)
|
|
$('.sample-docs .tabs').hide();
|
|
|
|
|
|
},
|
|
|
|
turned: function(e, page, view) {
|
|
|
|
var book = $(this);
|
|
|
|
$('#slider').slider('value', getViewNumber(book, page));
|
|
|
|
if (page!=1 && page!=book.turn('pages'))
|
|
$('.sample-docs .tabs').fadeIn(500);
|
|
else
|
|
$('.sample-docs .tabs').hide();
|
|
|
|
book.turn('center');
|
|
updateTabs();
|
|
|
|
},
|
|
|
|
start: function(e, pageObj) {
|
|
|
|
moveBar(true);
|
|
|
|
},
|
|
|
|
end: function(e, pageObj) {
|
|
|
|
var book = $(this);
|
|
|
|
setTimeout(function() {
|
|
$('#slider').slider('value', getViewNumber(book));
|
|
}, 1);
|
|
|
|
moveBar(false);
|
|
|
|
},
|
|
|
|
missing: function (e, pages) {
|
|
|
|
for (var i = 0; i < pages.length; i++)
|
|
addPage(pages[i], $(this));
|
|
|
|
}
|
|
}
|
|
}). turn('page', 2);
|
|
|
|
|
|
$('#slider').slider('option', 'max', numberOfViews(flipbook));
|
|
|
|
flipbook.addClass('animated');
|
|
|
|
|
|
// Show canvas
|
|
|
|
$('#canvas').css({visibility: 'visible'});
|
|
}
|
|
|
|
// Hide canvas
|
|
|
|
$('#canvas').css({visibility: 'hidden'});
|
|
|
|
yepnope({
|
|
test: Modernizr.csstransforms,
|
|
yep: ['../../lib/turn.min.js', 'css/jquery.ui.css'],
|
|
nope: ['../../lib/turn.html4.min.js', 'css/jquery.ui.html4.css'],
|
|
both: ['css/docs.css', 'js/docs.js'],
|
|
complete: loadApp
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |