« go to builtbywill.com

Booklet - jQuery Plugin

documentation

version 1.4.4

Expand All

Options

Below are all available options and their default values for each booklet. Override these at initialization with an options object, or after init using the option method.

  • General

  • name

    Type:
    String
    Default:
    null

    Name of the booklet to display in the browser's document title bar.

    Code examples

    Initialize booklet with the name option.
    $(".selector").booklet({ name: "Booklet" });
    Get or set the name option, after init.
    //getter
    var name = $(".selector").booklet( "option", "name" );
    //setter
    $(".selector").booklet( "option", "name", "Booklet" );
  • width

    Type:
    Number, String
    Default:
    600

    The width of the booklet. The option can either be a number (default is 600), a CSS string ("600px") or a percentage string ("50%").

    Code examples

    Initialize booklet with the width option.
    $(".selector").booklet({ width: 500 });
    Get or set the width option, after init. Getter will always return a number.
    //getter
    var width = $(".selector").booklet( "option", "width" );
    //setter
    $(".selector").booklet( "option", "width", 500 );
  • height

    Type:
    Number, String
    Default:
    400

    The height of the booklet. The option can either be a number (default is 400), a CSS string ("400px") or a percentage string ("50%").

    Code examples

    Initialize booklet with the height option.
    $(".selector").booklet({ height: 500 });
    Get or set the height option, after init. Getter will always return a number.
    //getter
    var height = $(".selector").booklet( "option", "height" );
    //setter
    $(".selector").booklet( "option", "height", 500 );
  • speed

    Type:
    Number
    Default:
    1000

    Speed of the transition between pages in milliseconds.

    Code examples

    Initialize booklet with the speed option.
    $(".selector").booklet({ speed: 500 });
    Get or set the speed option, after init.
    //getter
    var speed = $(".selector").booklet( "option", "speed" );
    //setter
    $(".selector").booklet( "option", "speed", 500 );
  • direction

    Type:
    String
    Default:
    "LTR"

    Direction of the overall page organization. Default is "LTR", left to right. Can also be "RTL" for languages which read right to left.

    Code examples

    Initialize booklet with the direction option.
    $(".selector").booklet({ direction: "RTL" });
    Get or set the direction option, after init.
    //getter
    var direction = $(".selector").booklet( "option", "direction" );
    //setter
    $(".selector").booklet( "option", "direction", "RTL" );
  • startingPage

    Type:
    Number
    Default:
    0

    Zero-based index of the page that will be visible when the booklet is first created.

    Code examples

    Initialize booklet with the startingPage option.
    $(".selector").booklet({ startingPage: 2 });
    Get or set the startingPage option, after init.
    //getter
    var startingPage = $(".selector").booklet( "option", "startingPage" );
    //setter
    $(".selector").booklet( "option", "startingPage", 2 );
  • easing

    Type:
    String
    Default:
    "easeInOutQuad"

    Easing method for the complete page transition. Options defined in the Easing Plugin.

    Code examples

    Initialize booklet with the easing option.
    $(".selector").booklet({ easing: "easeInOutExpo" });
    Get or set the easing option, after init.
    //getter
    var easing = $(".selector").booklet( "option", "easing" );
    //setter
    $(".selector").booklet( "option", "easing", "easeInOutExpo" );
  • easeIn

    Type:
    String
    Default:
    "easeInQuad"

    Easing method for the first half of the page transition. Options defined in the Easing Plugin.

    Code examples

    Initialize booklet with the easeIn option.
    $(".selector").booklet({ easeIn: "easeInExpo" });
    Get or set the easeIn option, after init.
    //getter
    var easeIn = $(".selector").booklet( "option", "easeIn" );
    //setter
    $(".selector").booklet( "option", "easeIn", "easeInExpo" );
  • easeOut

    Type:
    String
    Default:
    "easeOutQuad"

    Easing method for the second half of the page transition. Options defined in the Easing Plugin.

    Code examples

    Initialize booklet with the easeOut option.
    $(".selector").booklet({ easeOut: "easeOutExpo" });
    Get or set the easeOut option, after init.
    //getter
    var easeOut = $(".selector").booklet( "option", "easeOut" );
    //setter
    $(".selector").booklet( "option", "easeOut", "easeOutExpo" );
  • Closed / Covers

  • closed

    Type:
    Boolean
    Default:
    false

    Gives the booklet the appearance of being closed. Adds empty pages to beginning and end of book with the class .b-page-empty.

    Code examples

    Initialize booklet with the closed option.
    $(".selector").booklet({ closed: true });
    Get or set the closed option, after init.
    //getter
    var closed = $(".selector").booklet( "option", "closed" );
    //setter
    $(".selector").booklet( "option", "closed", true );
  • closedFrontTitle

    Type:
    String
    Default:
    "Beginning"

    Used with closed, menu and pageSelector options. Determines title of blank starting page.

    Code examples

    Initialize booklet with the closedFrontTitle option.
    $(".selector").booklet({ closedFrontTitle: "Start" });
    Get or set the closedFrontTitle option, after init.
    //getter
    var closedFrontTitle = $(".selector").booklet( "option", "closedFrontTitle" );
    //setter
    $(".selector").booklet( "option", "closedFrontTitle", "Start" );
  • closedFrontChapter

    Type:
    String
    Default:
    "Beginning of Book"

    Used with closed, menu and chapterSelector options. Determines chapter name of blank starting page.

    Code examples

    Initialize booklet with the closedFrontChapter option.
    $(".selector").booklet({ closedFrontChapter: "Start of Book" });
    Get or set the closedFrontChapter option, after init.
    //getter
    var closedFrontChapter = $(".selector").booklet( "option", "closedFrontChapter" );
    //setter
    $(".selector").booklet( "option", "closedFrontChapter", "Start of Book" );
  • closedBackTitle

    Type:
    String
    Default:
    "End"

    Used with closed, menu and pageSelector options. Determines title of blank ending page.

    Code examples

    Initialize booklet with the closedBackTitle option.
    $(".selector").booklet({ closedBackTitle: "End" });
    Get or set the closedBackTitle option, after init.
    //getter
    var closedBackTitle = $(".selector").booklet( "option", "closedBackTitle" );
    //setter
    $(".selector").booklet( "option", "closedBackTitle", "End" );
  • closedBackChapter

    Type:
    String
    Default:
    "End of Book"

    Used with closed, menu and chapterSelector options. Determines chapter name of blank ending page.

    Code examples

    Initialize booklet with the closedBackChapter option.
    $(".selector").booklet({ closedBackChapter: "End of Book" });
    Get or set the closedBackChapter option, after init.
    //getter
    var closedBackChapter = $(".selector").booklet( "option", "closedBackChapter" );
    //setter
    $(".selector").booklet( "option", "closedBackChapter", "End of Book" );
  • covers

    Type:
    Boolean
    Default:
    false

    Used with closed option. Makes the first and last pages into covers by hiding page numbers (if enabled) and adding the class .b-page-cover to the page content.

    Code examples

    Initialize booklet with the closed option.
    $(".selector").booklet({ closed: true });
    Get or set the closed option, after init.
    //getter
    var closed = $(".selector").booklet( "option", "closed" );
    //setter
    $(".selector").booklet( "option", "closed", true );
  • autoCenter

    Type:
    Boolean
    Default:
    false

    Used with closed option. Makes the booklet position in the center of its container when closed.

    Code examples

    Initialize booklet with the autoCenter option.
    $(".selector").booklet({ autoCenter: true });
    Get or set the autoCenter option, after init.
    //getter
    var autoCenter = $(".selector").booklet( "option", "autoCenter" );
    //setter
    $(".selector").booklet( "option", "autoCenter", true );
  • Pages

  • pagePadding

    Type:
    Number
    Default:
    10

    Padding added to each page wrapper .b-wrap.

    Code examples

    Initialize booklet with the pagePadding option.
    $(".selector").booklet({ pagePadding: 20 });
    Get or set the pagePadding option, after init.
    //getter
    var pagePadding = $(".selector").booklet( "option", "pagePadding" );
    //setter
    $(".selector").booklet( "option", "pagePadding", 20 );
  • pageNumbers

    Type:
    Boolean
    Default:
    true

    Display page numbers on each page. Page numbers are given the class .b-counter.

    Code examples

    Initialize booklet with the pageNumbers option.
    $(".selector").booklet({ pageNumbers: false });
    Get or set the pageNumbers option, after init.
    //getter
    var pageNumbers = $(".selector").booklet( "option", "pageNumbers" );
    //setter
    $(".selector").booklet( "option", "pageNumbers", false );
  • pageBorder

    Type:
    Number
    Default:
    0

    The size of the border around each page, .b-page. This should only be updated if you have added a CSS border to this class.

    Code examples

    Initialize booklet with the pageBorder option.
    $(".selector").booklet({ pageBorder: 5 });
    Get or set the pageBorder option, after init.
    //getter
    var pageBorder = $(".selector").booklet( "option", "pageBorder" );
    //setter
    $(".selector").booklet( "option", "pageBorder", 5 );
  • Controls

  • manual

    Type:
    Boolean
    Default:
    true

    Enables manual page turning using click and drag. Requires jQuery UI in order to function.

    Code examples

    Initialize booklet with the manual option.
    $(".selector").booklet({ manual: false });
    Get or set the manual option, after init.
    //getter
    var manual = $(".selector").booklet( "option", "manual" );
    //setter
    $(".selector").booklet( "option", "manual", false );
  • hovers

    Type:
    Boolean
    Default:
    true

    Enables a preview page turn hover animation, which shows a small preview of the previous or next page on hover.

    Code examples

    Initialize booklet with the hovers option.
    $(".selector").booklet({ hovers: false });
    Get or set the hovers option, after init.
    //getter
    var hovers = $(".selector").booklet( "option", "hovers" );
    //setter
    $(".selector").booklet( "option", "hovers", false );
  • hoverWidth

    Type:
    Number
    Default:
    50

    The width of the page turn hover preview.

    Code examples

    Initialize booklet with the hoverWidth option.
    $(".selector").booklet({ hoverWidth: 100 });
    Get or set the hoverWidth option, after init.
    //getter
    var hoverWidth = $(".selector").booklet( "option", "hoverWidth" );
    //setter
    $(".selector").booklet( "option", "hoverWidth", 100 );
  • hoverSpeed

    Type:
    Number
    Default:
    500

    The speed in milliseconds of the page turn hover preview.

    Code examples

    Initialize booklet with the hoverSpeed option.
    $(".selector").booklet({ hoverSpeed: 1000 });
    Get or set the hoverSpeed option, after init.
    //getter
    var hoverSpeed = $(".selector").booklet( "option", "hoverSpeed" );
    //setter
    $(".selector").booklet( "option", "hoverSpeed", 1000 );
  • hoverTreshold

    Type:
    Number
    Default:
    0.25

    The percentage used with manual page dragging. Sets the percentage amount of the page width a drag must reach before the next of previous transition will occur when released.

    Code examples

    Initialize booklet with the hoverTreshold option.
    $(".selector").booklet({ hoverTreshold: 0.50 });
    Get or set the hoverTreshold option, after init.
    //getter
    var hoverTreshold = $(".selector").booklet( "option", "hoverTreshold" );
    //setter
    $(".selector").booklet( "option", "hoverTreshold", 0.50 );
  • hoverClick

    Type:
    Boolean
    Default:
    true

    Enables a "click" on the page turn hover preview, when using manual page turning, to begin the page turn.

    Code examples

    Initialize booklet with the hoverClick option.
    $(".selector").booklet({ hoverClick: false });
    Get or set the hoverClick option, after init.
    //getter
    var hoverClick = $(".selector").booklet( "option", "hoverClick" );
    //setter
    $(".selector").booklet( "option", "hoverClick", false );
  • overlays

    Type:
    Boolean
    Default:
    false

    Enables navigation using a page sized overlay. When enabled page content, like links, will not be clickable. If manual option is enabled, overlays are removed.

    Code examples

    Initialize booklet with the overlays option.
    $(".selector").booklet({ overlays: true });
    Get or set the overlays option, after init.
    //getter
    var overlays = $(".selector").booklet( "option", "overlays" );
    //setter
    $(".selector").booklet( "option", "overlays", true );
  • tabs

    Type:
    Boolean
    Default:
    false

    Adds tabs along the top of the booklet.

    Code examples

    Initialize booklet with the tabs option.
    $(".selector").booklet({ tabs: true });
    Get or set the tabs option, after init.
    //getter
    var tabs = $(".selector").booklet( "option", "tabs" );
    //setter
    $(".selector").booklet( "option", "tabs", true );
  • tabWidth

    Type:
    Number, String
    Default:
    60

    Set the width of each tab. Can be a number or CSS string value.

    Code examples

    Initialize booklet with the tabWidth option.
    $(".selector").booklet({ tabWidth: 100 });
    Get or set the tabWidth option, after init.
    //getter
    var tabWidth = $(".selector").booklet( "option", "tabWidth" );
    //setter
    $(".selector").booklet( "option", "tabWidth", 100 );
  • tabHeight

    Type:
    Number, String
    Default:
    20

    Set the height of each tab. Can be a number or CSS string value.

    Code examples

    Initialize booklet with the tabHeight option.
    $(".selector").booklet({ tabHeight: 100 });
    Get or set the tabHeight option, after init.
    //getter
    var tabHeight = $(".selector").booklet( "option", "tabHeight" );
    //setter
    $(".selector").booklet( "option", "tabHeight", 100 );
  • nextControlText

    Type:
    String
    Default:
    "Next"

    Set the inline text for all "next" controls (tabs, arrows, etc.).

    Code examples

    Initialize booklet with the nextControlText option.
    $(".selector").booklet({ nextControlText: "Forward" });
    Get or set the nextControlText option, after init.
    //getter
    var nextControlText = $(".selector").booklet( "option", "nextControlText" );
    //setter
    $(".selector").booklet( "option", "nextControlText", "Forward" );
  • previousControlText

    Type:
    String
    Default:
    "Previous"

    Set the inline text for all "previous" controls (tabs, arrows, etc.).

    Code examples

    Initialize booklet with the previousControlText option.
    $(".selector").booklet({ previousControlText: "Back" });
    Get or set the previousControlText option, after init.
    //getter
    var previousControlText = $(".selector").booklet( "option", "previousControlText" );
    //setter
    $(".selector").booklet( "option", "previousControlText", "Back" );
  • nextControlTitle

    Type:
    String
    Default:
    "Next Page"

    Set the text for the title attributes of all "next" controls (tabs, arrows, etc.).

    Code examples

    Initialize booklet with the nextControlTitle option.
    $(".selector").booklet({ nextControlTitle: "Forward" });
    Get or set the nextControlTitle option, after init.
    //getter
    var nextControlTitle = $(".selector").booklet( "option", "nextControlTitle" );
    //setter
    $(".selector").booklet( "option", "nextControlTitle", "Forward" );
  • previousControlTitle

    Type:
    String
    Default:
    "Previous Page"

    Set text for title attributes of all "previous" controls (tabs, arrows, etc.).

    Code examples

    Initialize booklet with the previousControlTitle option.
    $(".selector").booklet({ previousControlTitle: "Back" });
    Get or set the previousControlTitle option, after init.
    //getter
    var previousControlTitle = $(".selector").booklet( "option", "previousControlTitle" );
    //setter
    $(".selector").booklet( "option", "previousControlTitle", "Back" );
  • arrows

    Type:
    Boolean
    Default:
    false

    Adds arrow overlays on the sides of the booklet.

    Code examples

    Initialize booklet with the arrows option.
    $(".selector").booklet({ arrows: true });
    Get or set the arrows option, after init.
    //getter
    var arrows = $(".selector").booklet( "option", "arrows" );
    //setter
    $(".selector").booklet( "option", "arrows", true );
  • arrowsHide

    Type:
    Boolean
    Default:
    false

    Auto hide the arrows when the controls are not hovered.

    Code examples

    Initialize booklet with the arrowsHide option.
    $(".selector").booklet({ arrowsHide: true });
    Get or set the arrowsHide option, after init.
    //getter
    var arrowsHide = $(".selector").booklet( "option", "arrowsHide" );
    //setter
    $(".selector").booklet( "option", "arrowsHide", true );
  • cursor

    Type:
    String
    Default:
    "pointer"

    The CSS cursor used for all controls (tabs, arrows, etc.). Accepts any CSS Cursor

    Code examples

    Initialize booklet with the cursor option.
    $(".selector").booklet({ cursor: "move" });
    Get or set the cursor option, after init.
    //getter
    var cursor = $(".selector").booklet( "option", "cursor" );
    //setter
    $(".selector").booklet( "option", "cursor", "move" );
  • hash

    Type:
    Boolean
    Default:
    false

    Enables navigation using a hash string (e.g. "#/page/1"). Will affect all booklets with hash enabled on the same page.

    Code examples

    Initialize booklet with the hash option.
    $(".selector").booklet({ hash: true });
    Get or set the hash option, after init.
    //getter
    var hash = $(".selector").booklet( "option", "hash" );
    //setter
    $(".selector").booklet( "option", "hash", true );
  • hashTitleText

    Type:
    String
    Default:
    " - Page"

    Text which forms the hash page title (e.g. "Booklet - Page 1").

    Code examples

    Initialize booklet with the hashTitleText option.
    $(".selector").booklet({ hashTitleText: " - " });
    Get or set the hashTitleText option, after init.
    //getter
    var hashTitleText = $(".selector").booklet( "option", "hashTitleText" );
    //setter
    $(".selector").booklet( "option", "hashTitleText", " - " );
  • next

    Type:
    String
    Default:
    null

    jQuery selector for element to use as a click trigger for the next page.

    Code examples

    Initialize booklet with the next option.
    $(".selector").booklet({ next: "#customNext" });
    Get or set the next option, after init.
    //getter
    var next = $(".selector").booklet( "option", "next" );
    //setter
    $(".selector").booklet( "option", "next", "#customNext" );
  • prev

    Type:
    String
    Default:
    null

    jQuery selector for element to use as a click trigger for the previous page.

    Code examples

    Initialize booklet with the prev option.
    $(".selector").booklet({ prev: "#customPrev" });
    Get or set the prev option, after init.
    //getter
    var prev = $(".selector").booklet( "option", "prev" );
    //setter
    $(".selector").booklet( "option", "prev", "#customPrevious" );
  • auto

    Type:
    Boolean
    Default:
    false

    Enables automatic navigation. Requires delay option in order to function. When the end of the booklet is reached it jumps back to the first page.

    Code examples

    Initialize booklet with the auto option.
    $(".selector").booklet({ auto: true });
    Get or set the auto option, after init.
    //getter
    var auto = $(".selector").booklet( "option", "auto" );
    //setter
    $(".selector").booklet( "option", "auto", true );
  • delay

    Type:
    Number
    Default:
    5000

    The time in milliseconds between each automatic page flip transition.

    Code examples

    Initialize booklet with the delay option.
    $(".selector").booklet({ delay: 1000 });
    Get or set the delay option, after init.
    //getter
    var delay = $(".selector").booklet( "option", "delay" );
    //setter
    $(".selector").booklet( "option", "delay", 1000 );
  • pause

    Type:
    String
    Default:
    null

    jQuery selector for element to use as a click trigger for pausing auto page flipping.

    Code examples

    Initialize booklet with the pause option.
    $(".selector").booklet({ pause: "#customPause" });
    Get or set the pause option, after init.
    //getter
    var pause = $(".selector").booklet( "option", "pause" );
    //setter
    $(".selector").booklet( "option", "pause", "#customPause" );
  • play

    Type:
    String
    Default:
    null

    jQuery selector for element to use as a click trigger for restarting auto page flipping after it has been paused.

    Code examples

    Initialize booklet with the play option.
    $(".selector").booklet({ play: "#customPlay" });
    Get or set the play option, after init.
    //getter
    var play = $(".selector").booklet( "option", "play" );
    //setter
    $(".selector").booklet( "option", "play", "#customPlay" );
  • menu

    Type:
    String
    Default:
    null

    jQuery selector for the element to use as the menu area. It is required for pageSelector and chapterSelector.

    Code examples

    Initialize booklet with the menu option.
    $(".selector").booklet({ menu: "#customMenu" });
    Get or set the menu option, after init.
    //getter
    var menu = $(".selector").booklet( "option", "menu" );
    //setter
    $(".selector").booklet( "option", "menu", "#customMenu" );
  • pageSelector

    Type:
    Boolean
    Default:
    false

    Enables navigation with a drop-down menu of page titles. Requires menu. Uses the title attribute from each of your starting pages.

    Code examples

    Initialize booklet with the pageSelector option.
    $(".selector").booklet({ pageSelector: true });
    Get or set the pageSelector option, after init.
    //getter
    var pageSelector = $(".selector").booklet( "option", "pageSelector" );
    //setter
    $(".selector").booklet( "option", "pageSelector", true );
  • chapterSelector

    Type:
    Boolean
    Default:
    false

    Enables navigation with a drop-down menu of chapter titles. Requires menu. Uses the rel attribute from each of your starting pages.

    Code examples

    Initialize booklet with the chapterSelector option.
    $(".selector").booklet({ chapterSelector: true });
    Get or set the chapterSelector option, after init.
    //getter
    var chapterSelector = $(".selector").booklet( "option", "chapterSelector" );
    //setter
    $(".selector").booklet( "option", "chapterSelector", true );
  • Shadows

  • shadows

    Type:
    Boolean
    Default:
    true

    Display shadows on pages during animations.

    Code examples

    Initialize booklet with the shadows option.
    $(".selector").booklet({ shadows: false });
    Get or set the shadows option, after init.
    //getter
    var shadows = $(".selector").booklet( "option", "shadows" );
    //setter
    $(".selector").booklet( "option", "shadows", false );
  • shadowTopFwdWidth

    Type:
    Number
    Default:
    166

    The width of the top forward shadow. Only change if you change the shadow images.

    Code examples

    Initialize booklet with the shadowTopFwdWidth option.
    $(".selector").booklet({ shadowTopFwdWidth: 100 });
    Get or set the shadows option, after init.
    //getter
    var shadowTopFwdWidth = $(".selector").booklet( "option", "shadowTopFwdWidth" );
    //setter
    $(".selector").booklet( "option", "shadowTopFwdWidth", 100 );
  • shadowTopBackWidth

    Type:
    Number
    Default:
    166

    The width of the top back animation shadow. Only change if you change the shadow images.

    Code examples

    Initialize booklet with the shadowTopBackWidth option.
    $(".selector").booklet({ shadowTopBackWidth: 100 });
    Get or set the shadowTopBackWidth option, after init.
    //getter
    var shadowTopBackWidth = $(".selector").booklet( "option", "shadowTopFwdWidth" );
    //setter
    $(".selector").booklet( "option", "shadowTopBackWidth", 100 );
  • shadowBtmWidth

    Type:
    Number
    Default:
    50

    The width of the bottom animation shadow. Only change if you change the shadow images.

    Code examples

    Initialize booklet with the shadowBtmWidth option.
    $(".selector").booklet({ shadowBtmWidth: 100 });
    Get or set the shadowBtmWidth option, after init.
    //getter
    var shadowBtmWidth = $(".selector").booklet( "option", "shadowBtmWidth" );
    //setter
    $(".selector").booklet( "option", "shadowBtmWidth", 100 );
Expand All

Events

The following events are triggered when using a booklet.

  • bookletcreate
  • bookletstart, bookletchange
  • bookletadd, bookletremove

Each event returns a data object which contains data related to the event. Common to all events are:

  • data.options - the current booklet options at time of the event (read-only)
  • data.index - zero-based index of the currently visible page spread

Only available for bookletcreate, bookletstart and bookletchange events:

  • data.pages - an array of elements, the two currently visible pages

Only available for bookletadd and bookletremove events:

  • data.page - element, the page that was either just added or just removed
  • create

    Type:
    bookletcreate

    This event triggers when booklet is created.

    Code examples

    Supply a callback function to handle the create event as an init option.
    $(".selector").booklet({
    	create: function(event, data) { ... }
    });
    Bind to the create event by type: bookletcreate.
    $(".selector").bind("bookletcreate", function(event, data) {
    	...
    });
  • start

    Type:
    bookletstart

    This event triggers when pages begin turning.

    Code examples

    Supply a callback function to handle the start event as an init option.
    $(".selector").booklet({
    	start: function(event, data) { ... }
    });
    Bind to the start event by type: bookletstart.
    $(".selector").bind("bookletstart", function(event, data) {
    	...
    });
  • change

    Type:
    bookletchange

    This event triggers after pages have finished turning.

    Code examples

    Supply a callback function to handle the change event as an init option.
    $(".selector").booklet({
    	change: function(event, data) { ... }
    });
    Bind to the change event by type: bookletchange.
    $(".selector").bind("bookletchange", function(event, data) {
    	...
    });
  • add

    Type:
    bookletadd

    This event triggers when a page is added.

    Code examples

    Supply a callback function to handle the add event as an init option.
    $(".selector").booklet({
    	add: function(event, data) { ... }
    });
    Bind to the add event by type: bookletadd.
    $(".selector").bind("bookletadd", function(event, data) {
    	...
    });
  • remove

    Type:
    bookletremove

    This event triggers when a page is removed.

    Code examples

    Supply a callback function to handle the remove event as an init option.
    $(".selector").booklet({
    	remove: function(event, data) { ... }
    });
    Bind to the remove event by type: bookletremove.
    $(".selector").bind("bookletremove", function(event, data) {
    	...
    });
Expand All

Methods

The methods available for each booklet can be called on one or more booklets at the same time. Methods which return a value, such as an option, when called on more than one selector will return an array of values. Otherwise, the chainability of the elements will be maintained.

  • destroy

    Signature:
    .booklet("destroy")

    Remove the booklet completely. Returns the element back to its original state.

  • disable

    Signature:
    .booklet("disable")

    Disable the booklet.

  • enable

    Signature:
    .booklet("enable")

    Enable the booklet.

  • option

    Signature:
    .booklet("option", "name", [value])

    Get or set any option. If no value is provided, will act as a getter.

  • option

    Signature:
    .booklet("option", [option])

    Set multiple options at once by passing in an options object (just like during init). If no options object is provided it returns the complete object of all current options.

  • next

    Signature:
    .booklet("next")

    Moves the booklet to the next page spread.

  • prev

    Signature:
    .booklet("prev")

    Moves the booklet to the previous page spread.

  • gotopage

    Signature:
    .booklet("gotopage", index)

    Moves the booklet to the provided index. Index must either be a zero-based page index or one of the strings "start" or "end".

  • add

    Signature:
    .booklet("add", index, html)

    Add a new page. Index must either be a zero-based page index where the new page will be inserted or one of the strings "start" or "end". html must be a string of HTML content.

  • remove

    Signature:
    .booklet("remove", index)

    Remove a page. Index must either be a zero-based page index of the page that will be removed or one of the strings "start" or "end".

Style

Once the booklet is created, the basic generated structure and CSS will appear below. The basic top level classes are bolded.

If more customization is desired, all generated classes are visible in the current jQuery Booklet stylesheet.

<div class="booklet" id="mybook">
    <div class="b-page b-page-0 b-p1">
        <div class="b-wrap b-wrap-left">
            ...
        </div>
    </div>
    <div class="b-page b-page-1 b-p2">
        <div class="b-wrap b-wrap-right">
            ...
        </div>
    </div>
    <div class="b-page b-page-2 b-p3">
        <div class="b-wrap b-wrap-left">
            ...
        </div>
    </div>
    <div class="b-page b-page-3 b-p4">
        <div class="b-wrap b-wrap-right">
            ...
        </div>
    </div>
    <div class="b-controls">
        ...
    </div>
</div>
  • General

  • .booklet

    The outer container of the booklet. This class is added to the element you designate as the booklet.

  • .b-page

    The outer container of each page. Given a zero-based index class (.b-page-0, etc.) which numbers the pages.

    The other classes (.b-pN, .b-p0, .b-p1, .b-p2, .b-p3, .b-p4) are used for animating the booklet. They correspond to the previous, current and next page spreads (paired together).

  • .b-wrap

    The inner container of each page. Given either .b-wrap-left or .b-wrap-right, depending if the page is on the left or right side of the booklet.

  • .b-page-cover

    Added to .b-wrap of the first and last pages, when using the "closed" and "covers" options.