-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Reference
##Constructor
$('selector').turn([options]);
Creates an instance of turn.
Example:
$('selector').turn({page:1});
Parameters:
options
-
width (type: number, default:
$('selector').width()
) -
height (type: number, default:
$('selector').height()
) -
page (type: number, default: 1)
-
shadows (type: boolean, default: true)
-
duration (type: number, default: 600)
-
acceleration (type: boolean, default: true)
###Calling methods or properties
$('selector').turn(property | method [, parameters]);
page
Gets the current page.
Example:
alert($('selector').turn('page'));
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.
Example:
alert($('selector').turn('view'));
page
Turns to a specific page. The page number must be a Number
Example:
$('selector').turn('page', 2);
next
Turns to the next view.
Example:
$('selector').turn('next');
previous
Turns to the previous view.
Example:
$('selector').turn('previous');
stop
Stops the current page flip effect.
Example:
$('selector').turn('next').turn('stop');
resize
Resets the size of all the wrappers used by turn.
Example:
$('selector').turn('resize');
disable
Disables and enables the effect.
Example:
$('selector').turn('disable', true);
size
Changes the size of the publication.
Example:
$('selector').turn('size', 1000, 500);
turning
Fired before a page starts turning.
Example:
$('selector').bind('turning', function(e, page) { console.log(page+' says bye...'); });
turned
Fired when a page has been turned.
Example:
$('selector').bind('turned', function(e, page, pageObj) { alert('Page turned to '+page); });
start
Fired before the folded page is showed.
Example:
$('selector').bind('start', function(e, turn) { console.log('Is it turning?' + turn); });
end
Fired after the folded page is hidden.
Example:
$('selector').bind('end', function(e) { });
.p[0-9]+
You can use this subclass in order to add CSS attributes in a specific page.
Example:
Page 1 -> .p1
Page 2 -> .p2
.turn-page
You must use this subclass to define the size of all the pages.
##Examples
$('selector').turn('next').turn('next');
Passes two views from the current one.
$('selector').turn('next').turn('previous');
Nothing happens.
$('selector').turn('next').turn('stop');
Passes the current view to the next one without page flip effect.
#syllabus div:nth-child(odd) { background-image: -webkit-linear-gradient(left, #fff 95%, #ddd 100%); background-image: -moz-linear-gradient(left, #fff 95%, #ddd 100%); background-image: -o-linear-gradient(left, #fff 95%, #ddd 100%); background-image: -ms-linear-gradient(left, #fff 95%, #ddd 100%); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
#syllabus div:nth-child(even) { background-image: -webkit-linear-gradient(right, #fff 95%, #ddd 100%); background-image: -moz-linear-gradient(right, #fff 95%, #ddd 100%); background-image: -o-linear-gradient(right, #fff 95%, #ddd 100%); background-image: -ms-linear-gradient(right, #fff 95%, #ddd 100%); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } #syllabus .cover { background: #333; }