Reference

Vinny edited this page Nov 20, 2015 · 54 revisions

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); }}};

  1. 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');

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.