Difference between revisions of "AppSuite:Wizard framework"

(Created page with "===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...")
 
Line 1: Line 1:
===Wizard/Tour framework===
+
<div class="title">Wizard/Tour framework</div>
  
 
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.
 
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.
  
 +
__TOC__
 +
 +
== Simple example ==
 
The starting point is the "Wizard" (or "Tour") class defined in io.ox/core/tk/wizard.js. A simple example:
 
The starting point is the "Wizard" (or "Tour") class defined in io.ox/core/tk/wizard.js. A simple example:
<code language="javascript">
+
<syntaxhighlight lang="javascript">
 
require(['io.ox/core/tk/wizard'], function (Tour) {
 
require(['io.ox/core/tk/wizard'], function (Tour) {
 
   new Tour()
 
   new Tour()
Line 13: Line 16:
 
   .start();
 
   .start();
 
});
 
});
</code>
+
</syntaxhighlight>
 +
 
 +
== API ==
 +
Bla bla.

Revision as of 12:19, 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();
});

API

Bla bla.