AppSuite:Wizard framework: Difference between revisions

From Open-Xchange
No edit summary
mNo edit summary
Line 3: Line 3:
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:
<pre class="language-javascript">


== Simple example ==
The starting point is the "Wizard" (or "Tour") class defined in io.ox/core/tk/wizard.js. A simple example:
<syntaxhighlight lang="javascript">
require(['io.ox/core/tk/wizard'], function (Tour) {
require(['io.ox/core/tk/wizard'], function (Tour) {
   new Tour()
   new Tour()
Line 16: Line 15:
   .start();
   .start();
});
});
</syntaxhighlight>


== API ==
</pre>
 
=== API ===
Bla bla.
Bla bla.

Revision as of 12:20, 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.