Skip to content
This repository has been archived by the owner on Dec 18, 2019. It is now read-only.
/ jquery.wizard Public archive

Turns set of elements to wizard like pages, and provides an optional breadcrumb for navigation.

Notifications You must be signed in to change notification settings

teelahti/jquery.wizard

Repository files navigation

jquery.wizard

Converts given elements to pages that may be navigated with auto-generated back/forward buttons. Publishes navigation information for listeners to use. The feature set of this plugin is close to existing jquery.formwizard plugin, but that project is not very active and it has gotten a bit too complex for my own taste.

Key principles of this plugin:

  • Gradual enhancement: the original source should be usable without this plugin
  • Simplicity: too many options will kill you
  • Modularity. JS should remain clean and understandable.

.wizard(options)

Options:

  • namespace: The namespace to use for all HTML5 data attributes and all CSS classes. Default is 'wizard'.
  • breadcrumb: The jQuery selector to find the breadcrumb container. Breadcrumb is automatically created inside this element at runtime.
  • texts: buttonNext: Next button text; buttonPrevious: Previous button text

Example:

$("form > fieldset").wizard( { 
    namespace: "random-wizard", 
    breadcrumb: "#breadcrumb",
    texts: {
        buttonNext: "Go to next page",
        buttonPrevious: "Go to previous page"
    }
} );

Generated button format

Generated breadcrumb format

When breadcrumb is used the following format HTML is inserted into given container.

<ul>
    <li>Title 1</li>
    <li class="wizard-breadcrumb-active">Title 2</title>
    <li>Title 3</li>
</ul>

Breadcrumb titles are the ones collected from wizard page's title attributes.

Sample CSS styles

Wizard adds CSS classes for all pages and their states. Names with default namespace are: wizard-page, wizard-page-hidden, wizard-page-visible. These styles can be used to create CSS3 animations for page changes. See samples/css/samples.css for very basic slide out animation.

About

Turns set of elements to wizard like pages, and provides an optional breadcrumb for navigation.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published