The tabs can be easily used to make wizard-like interfaces. The
following example uses next/prev buttons that use
the tabs API to navigate
between the panes. We also have a checkbox that must be
checked if the user wants to advance to the next pane.
You can also see an exposing
effect when you start using the wizard. This is an effective way
to shift the user's focus to the task at hand.
We have a div tag with its id equal to
"wizard" as the root element, but otherwise the setup is similar to
the minimal setup.
custom background color: #789. The effect becomes
active when the root element is clicked. Of course, this effect is
optional and can be easily removed.
Here is the tabs setup. The complexity comes from the checkbox
behaviour. We require the user to accept our "terms and conditions"
before it is possible to move forward. The trick is to
return false inside the onBeforeClick
Here is how the navigational buttons are setup. First we get a
handle to the API and then we assign custom click
events to the buttons that are contained inside the wizard.