Add Content to the Book
As discussed before, there are 2 ways to set up the Book contents: these examples below can be placed directly in the div#pageflip or in an external file.
Example 1:
Cover is a special Page type, it can be larger as the inside Pages, and can behave like a Hard cover while flipping.
Page defines a single Page in the Book.
Example 2 - There is a third type: the Outer Page. You can add optionaly one before the Book, and one after:
Example 3 - If you want to make a Book which is always opened (can't close the front cover) enable AlwaysOpened Config Option (AlwaysOpened: true) and start Page definitions by the first visible Cover:
And this is how these Page Layouts looks like:
Page-Options
In addition to the Configuration-Options, there are some page level options that can help setting up page behaviors. Here is a list of available Page-Options:
And an example how you can set Page-Options:
Page Content
The most important part, after reviewing all the options, it's how to add content. Once you set up your book, and the Page Layout, you can easy add/change its Content.
Inline Content
As seen in the previous code examples, the Page definition div's content is the Content added to the Page. The container of the content can be formatted with CSS, will talk about it little later.
data-html-file
If you wish, you can load the Page Content from an external file, in this case the Content defined inline will be replaced with the loaded Content.
data-background-file
The third option to add Content, is to simply define a background image for the page. The loaded background image will be added to the Page container div, which encloses the defined Content
This is just another option, if you wish you can set a div as Page Content, and add your own background, with more styling options. This option is useful if you make a Book based on image files, so you don't need to define all img tags, just add the URL
data-unload
If the content on that page can be edited (like form entries, selection), you can prevent it from unloading while it isn't displayed, so it will keep its content. Default setting is true, that means pages no longer needed to display are automatically unloaded. All unloaded pages are reloaded when requested, but user edited content are lost in that case.
Page Content Loading Order
The loading order of the page contents are depending on the way they was defined: all inline defined content will be loaded at start, while content defined in data-background-file or data-html-file attributes will be loaded only when the page containing them is displayed.
Page Setup
data-disable-embossing
By default, all soft pages get an embossing effect at the center of the book. With Option enabled, you disable rendering of that effect on the Page.
data-transparent-page
If Transparency was previously enabled in the Configuration-Options, you can mark a Page transparent by enabling this Option, so the Page behind it will also rendered.
data-page-number
You can change the page number of any Page, it's useful for set the starting page number, the rest of the Pages will numbered based on this value.
data-page-name
By adding a name to a Page, it will be displayed instead its Page Number. It can be also referenced using API call: gotoPageName( "pageName" [,skip] ); The Name is case-insensitive. You can also enter Page Name in the Pager input field, to go to that Page.
data-page-label
You can add a label to a page, to later reference it with API call: gotoPageLabel( "pageLabel" [,skip] ); This way, if the page order is changed (added/ removed pages), you can still access safely the page you want. The label is case-sensitive!
data-data
With this custom variable, you can associate any information with the Page, you can retrieve or set it's value at runtime using API call: data( [value] );
data-thumbnail-image
If enabled in Configuration-Options, you can add thumbnail images for any Page. It is optional, thumbnail will be displayed only for Pages with thumbanil-image set. This way, Thumbnails can be an alternative for an index.
