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