turn(‘page’, 4);
API DOCUMENTATION
turn.js 4
th
release
www.turnjs.com
©2012 Emmanuel Garcia – All rights reserved
The turn.js API was conveniently built as a jQuery plugin, it
provides access to a set of features and allows you to define the
user interaction.
The API includes properties, methods and events. Most setter and
getter functions have the same name.
Essentials
• jQuery 1.7 or later
Browser Support
• Safari for iOS (iPad, iPhone, iPod)
• Safari 5
• Chrome 11
• Chrome for Android
• Firefox 9
• IE 9
• IE 8 Using turn.html4.js
4
th
Release - Commercial Version
+ Added option autoCenter
+ Added option zoom
+ Added property animating
+ Added property zoom
+ Added method center
+ Added method destroy
+ Added method is
+ Added method zoom
+ Added event missing
+ Added event zooming
+ Added class .even
+ Added class .fixed
+ Added class .hard
+ Added class .odd
+ Added class .own-size
+ Added class .sheet
+ Added class .sheet
+ Added the ignore attribute
+ New turn.html4.js
+ New scissors.js
+ Changed the class .turn-page to .page
+ Improved the animation frame generator with requestAnimationFrame
+ Improved the animation speed for hard pages with CSS3 transitions
+ Redesigned the event sequence to listen to only three events
+ Fixed issue #79
+ Fixed issue #91
+ Fixed issue about the event order turning + turned
+ Fixed issue about appending pages in wrong locations
Preparing the HTML
Turn.js uses a DOM element as a container for all the pages. This
DOM element is typically the flipbook. There are three ways to add
pages to your flipbook:
1. Adding pages directly in the container. The HTML
contains all the content of your flipbook. For example:
<div id=”flipbook”>
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
<div>Page 4</div>
</div>
2. Adding pages dynamically through the API. The HTML
contains only the container and all the pages will be dynamically
added after getting the data through an Ajax Request. For
example:
<div id=”flipbook”>
<!— Load the content here-->
</div>
3. A combination of both. Sometimes it’s a better idea to have
some pages in the HTML and another loaded dynamically. For
example:
<div id=”flipbook”>
<div>Front1</div>
<div>Front 2</div>
<!— Load the content here-->
<div>Back 2</div>
<div>Back 1</div>
</div>
Performance
Turn.js can work with very long flipbooks. That is, there’s no limit
regarding the amount of pages that it can contain. This is because
turn.js only keeps in DOM the last 6 pages no matter how long the
book is. There will still be references to the content that was
previously loaded, but it’s possible to reduce the cache in order to
release memory.
IE8/7 Support
The turn.js library includes turn.html4.js, which is optimized for IE 8
as well as any other browsers with no support of CSS3 features
such as transformation. You can use CSS tricks to include
turn.html4.js for older versions of IE, but it’s recommended to use
the Modernizr library and a resource loader like YepNope.js both
available on modernizr.com. For instance the following JavaScript
code:
yepnope({
test : Modernizr.csstransforms,
yep: ['lib/turn.js', 'css/flipbook-html5.css']
nope : ['lib/turn.html4.js', 'css/flipbook-html4.css']
});
CSS Classes
Turn.js uses classes to define the way a page or the flipbook as a
whole should look. The classes also allow you to add CSS rules or
use them as a selector for that page.
