Difference between revisions of "AppSuite:Wizard framework"
m |
m |
||
Line 18: | Line 18: | ||
=== API === | === API === | ||
+ | |||
+ | {| | ||
+ | |- | ||
+ | ! Function !! Description | ||
+ | |- | ||
+ | | step(options) | ||
+ | | Add a new wizard/tour step. | ||
+ | |- | ||
+ | | start() | ||
+ | | Start the wizard/tour | ||
+ | |- | ||
+ | | title() | ||
+ | | Set the popup title. Handed over to jQuery's append; can be String, DOM element, jQuery set, a function. | ||
+ | |- | ||
+ | | content() | ||
+ | | Set the popup content. Handed over to jQuery's append; can be String, DOM element, jQuery set, a function. | ||
+ | |- | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | |||
+ | === Using the registry === | ||
Bla bla. | Bla bla. |
Revision as of 12:31, 15 July 2015
Wizard/Tour framework
App Suite UI provides a simple but flexible framework to implement wizards and guided tours. The essence of both a wizard and a tour is a set of steps the end-user walks through. Usually a step is a smaller modal popup.
Simple example
The starting point is the "Wizard" (or "Tour") class defined in io.ox/core/tk/wizard.js. A simple example:
require(['io.ox/core/tk/wizard'], function (Tour) { new Tour() .step() .title('Welcome') .content('Lorem ipsum dolor sit amet, consetetur sadipscing elitr') .end() .start(); });
The function step() adds a new step. Each step is separate Backbone view instance (DisposableView to be more precise). The following function calls title() and content() both work on that view; end() just returns to the tour (same idea as in jQuery's end()). This allows long definition chains.
API
Using the registry
Bla bla.
Function | Description |
---|---|
step(options) | Add a new wizard/tour step. |
start() | Start the wizard/tour |
title() | Set the popup title. Handed over to jQuery's append; can be String, DOM element, jQuery set, a function. |
content() | Set the popup content. Handed over to jQuery's append; can be String, DOM element, jQuery set, a function. |