"Original" jquery Plugin-booklet book Special Effects Tutorial (i) General settings

Source: Internet
Author: User
Tags blank page

JqueryPlugins- Booklet Book Special Effects Tutorial (a) General settings this article from May rain Love to provide, reproduced please indicate the source. One, Wide height (Width/height)1. Custom size

$ (function () {

custom page size unit default px Note Do not take unit px!

$ (' #mybook1 '). Booklet ({

width:600,// do not bring a unit px!

height:200// do not bring a unit px!

});

});

2. Percentage

$ (function () {

custom page size usage percent

$ (' #mybook2 '). Booklet ({

Width: ' 100% ',// note with single quote!

height:600

});

});


Second, paging speed (tempo) custom paging speed

$ (function () {

Custom Paging Speed unit Ms

$ (' #mybook1 '). Booklet ({

speed:600,// setting 600ms

});

});


Iii. Start Page Custom Start Page

$ (function () {

Customizing the Start Page

$ (' #mybook1 '). Booklet ({

startingpage:3,// setting 600ms

});

});


Iv. direction of Reading (readdingDirection) direction is set to left to right by default.

$ (function () {

direction is set to left to right by default

$ (' #mybook1 '). Booklet ({

Direction: ' LTR ',// set to left to right

});

});

Alternatively , You can modify the right-to-left direction. If you use this option , You may need to use your own CSS to set the right alignment for the text.

$ (function () {

Modify right-to-left orientation

$ (' #mybook2 '). Booklet ({

Direction: ' RTL ',// modify right-to-left direction

});

});


V. Page Padding

Booklet ' s default page padding set to 10px

$ (function () {

default page padding set to 10px

$ (' #mybook1 '). booklet ();

});

You can also modify this quantity if you want to have different effects.

$ (function () {

Padding set to 0

$ (' #mybook2 '). Booklet ({

pagepadding:0

});

});


Six, page number (page Numbers)

Booklet ' s default setting has page numbers.

$ (function () {

The default setting has page numbers

$ (' #mybook1 '). booklet ();

});

You can also not display page numbers.

$ (function () {

You can also not display the page number

$ (' #mybook2 '). Booklet ({

Pagenumbers:false

});

});


Seven, custom Shadow (named Shadows)

You can disable page shadow animation. To use a different picture, all available options, refer to the documentation.

$ (function () {

do not show shadows

$ (' #mybook2 '). Booklet ({

Shadows:false

});

});


Closing books (Closed book)

The close option sets the appearance after the book closes , adding a blank page at the beginning and end.

$ (function () {

Close Books

$ (' #mybook2 '). Booklet ({

Closed:true

});

});

1,Automatically center when books are closed

If you want the book to be centered after closing, use the AutoCenter option.

$ (function () {

Center display after closing a book

$ (' #mybook2 '). Booklet ({

Closed:true,

Autocenter:true

});

});

2, closing books and covers

When using the closed option , You can also set your first and last pages as cover pages ,(if appropriate) add a unique style (. b-page-cover) to them and do not display page numbers. Front Cover

$ (function () {

set up cover pages

$ (' #mybook3 '). Booklet ({

Closed:true,

Autocenter:true,

Covers:true

});

});

Back Cover

3. Close the book and turn right to left

$ (function () {

set the cover page and the right to the left to turn the book

$ (' #mybook4 '). Booklet ({

closed:true,// Close the book

autocenter:true,// Center Display after closing the book

covers:true,// Setting up cover pages

Direction: ' RTL '// right-to-left book

});

});

Over

4,Closing books and Chapters &Page Selection

You can always use Chapterselector and pageselector for closed books. To add a chapter name and page title before and after the beginning of the book, refer to the document in detail ...

cover and chapter names & page titles

<div id= "Custom-menu" ></div>

<div id= "Mybook5" >

<div>

</div>

<div rel= "Chapter 1" >

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

<!--

</div>

<div rel= "Chapter 2" >

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

<!--

</div>

</div>

$ (function () {

cover pages and chapters & page Titles

$ (' #mybook5 '). Booklet ({

closed:true,// Close the book

autocenter:true,// Center Display after closing the book

covers:true,// Setting up cover pages

Menu: ' #custom-menu ',

Pageselector:true,

Chapterselector:true

});

});

"Original" jquery Plugin-booklet book Special Effects Tutorial (i) General settings

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.