Reference

A new documentation is available on http://turnjs.com/docs

---

Constructor

　$('selector').turn([options]);

　Creates an instance of turn.

　Example: $('selector').turn({page:1});

options

• acceleration - Sets the hardware acceleration mode, default: true
• display (r3) - Defines the initial display, default:double
• duration - Sets the duration of the effect in microseconds, default: 600
• gradients - Sets the gradient mode, default: true
• height - Defines the height, default: $('selector').height()
• inclination (r3) - Defines the inclination of the folded page when turning, default: 0
• page - Defines the initial page, default: 1
• pages - Sets the number of pages, default: $('selector').children().length
• when (r3) - Defines the events (see the Event section for more), default: empty object
• width - Defines the width, $('selector').width()

Properties

display

　Gets the current display. The possible values are double and single.

　$('selector').turn('display');

page

　Gets the current page.

　$('selector').turn('page');

pages (r3)

　Gets the number of pages.

　$('selector').turn('pages');

view

　Gets the current view. A view is basically an array of two values, in which the key [0] is the left page and [1] the right page.
　 In cases where there is only one page, the value will be zero.

$('selector').turn('view');

Methods

addPage (r3)

　Adds a page using element as content. If pageNumber is not defined, the page will be added at the end

$('selector').turn('addPage', element[, pageNumber]);

animating

　Detects if there is an animation.

　$('selector').turn('animating');

display (r3)

　Sets the display. The possible values are double and single.

　$('selector').turn('display', displayMode);

disable

　Disables and enables the effect.

　$('selector').turn('disable', disableBool);

hasPage (r3)

　Detects if a page is already in the book or magazine.

$('selector').turn('hasPage', pageNumber);

next

　Turns to the next view.

　Example: $('selector').turn('next');

page

　Turns to a specific page. The page number must be a Number.

$('selector').turn('page', pageNumber);

pages (r3)

　Sets the number of pages.

$('selector').turn('pages', numberOfPages);

previous

　Turns to the previous view.

　Example: $('selector').turn('previous');

range (r3)

　Gets a range of pages from pageNumber needed to keep in memory.

$('selector').turn('range', pageNumber);

removePage (r3)

　Removes a page

$('selector').turn('removePage', pageNumber);

resize

　Resets the size of all the wrappers used by turn.

　 $('selector').turn('resize');

size

　Changes the size.

$('selector').turn('size', width, height);

stop

　Stops the current page flip effect.

　$('selector').turn('stop');

Events

Turn.js allows you to define events in two different ways:

1. You can use the reserved key when within your options for the initial configuration.

$('#selector').turn({when: {turn: function(e, page, view){ alert('page'+page); }}};

2. Using the jQuery's method bind to add listeners.

$('#selector').bind('turn', turnEvent);

List of events

end

　This event was removed in the 3rd release.

first (r3)

　Fired when the page is set to 1.

last (r3)

　Fired when the page is set to $('#selector').turn('pages')

start

Fired before the folded page appears.

Arguments

1. event - Event object

2. page - Page object

3. corner - Corner selected. The corners can be: tl (top left), tr (top right), br (bottom right), bl (bottom left).

Prevent default

It's possible to prevent the default action, which is to show the folded page. In order to prevent it, use event.preventDefault()

turning

Fired before a page starts turning.

Arguments

1. event - Event object

2. page - The new page number

3. view - The new view.

Prevent default

The default action is to turn the page. In order to prevent it, use event.preventDefault()

turned

Fired when a page has been turned.

Arguments

1. event - Event object

2. page - The new page number

3. view - The new view.

CSS SubClasses

.p[0-9]+

　A subclass for specific pages.

　Example:
　Page 1 -> .p1 -> $('selector .p1')
　Page 2 -> .p2 -> $('selector .p2')

.page

　A common subclass for every page.

Tips

1. turn.js allows you to concatenate different methods, just like jQuery.

$('selector').turn('next').turn('next');

$('selector').turn('next').turn('previous');

$('selector').turn('next').turn('stop');