jQueryNavPages

Animated, programmable and easily navigated pages.

Usage

HTML:

<div id="nav-pages">     <div class="nav-page" id="nav-page-1">         Welcome to page 1 <a href="#nav-page-2">Go to page 2</a> <a href="#" data-goto-nav-page="#nav-page-3">Go to page 3</a>     </div>     <div class="nav-page" id="nav-page-2">         Welcome to page 2 <a href="#" class="nav-page-back">Back</a> <a href="#nav-page-3">Go to page 3</a>     </div>     <div class="nav-page" id="nav-page-3">         Welcome to page 3 <a href="#" data-goback-nav-page>Back</a>     </div> </div> 

JS:

$('#nav-pages').navPages('.nav-page'); or $('.nav-page').navPages();

CSS:

You don't need to add any!

Options

• pages
  Default: Selector
  Required
  Set by jQuery selector $(pages).navPages(); or by the first argument $(parent).navPages(pages);

• parent
  Default: Selector parent
  Required
  Set by jQuery selector $(parent).navPages(pages);. This element is used to wrap its contents in a <div> necessary for pages to render correctly.

• animation
  _Default: {}
  Optional
  This option is directly passed on to $.animate(). Please see jQuery API docs for more information

• startPage
  _Default: 0
  Optional
  0 based index of which page to show first

• selectors
  

  • goto
    _Default: goto-nav-page
    Optional
    This sets the name of the data-* attribute that overrides the href attribute when a link is clicked.
  • back
    _Default: [data-goback-nav-page], .nav-page-back
    Optional
    When these elements are clicked, the page navigates in reverse.
  • ignore
    _Default: [data-ignore-nav-page], .nav-page-ignore
    Optional
    These elements are ignored when clicked.

All options (except pages) can also be set by passing an object when calling $.navPages();

API

• goTo(selector)
  If an element with the selector is found inside the parent then it navigates to that page. Triggers nav-page-nav and nav-page-goto.

• goBack()
  Navigates back. Triggers nav-page-nav and nav-page-back.

• settings
  The settings used as an object, in case you ever need them.

Events

• nav-page-init
  Arguments: parent
  Triggered once page markup is complete and events are bound

• nav-page-nav
  Arguments: new_page, old_page
  Triggered when navigating back or navigating to a page

• nav-page-goto
  Arguments: new_page, old_page
  Triggered when navigating to a page

• nav-page-back
  Arguments: new_page, old_page
  Triggered when navigating back