Simple Tour Demo
The simple demo displays a couple of dialogs in the center of the screen. This demo relies on the default options to display the dialogs and dialog buttons. If you just want to display a few pages of help text or a tip of the day then this is a good place to start.
While this approach is easy to use, it doesn't provide much control over when to display the dialogs, their appearance or even where they are positioned. For those scenarios you'll want to use the extensive set of options and events.
Source
<!-- HTML -->
<div id="tourContainer" style="display:none;">
<div id="tour-1" title="Step 1">
The webtour makes it easy to provide a little extra help on your website.
</div>
<div id="tour-2" title="Step 2">
Each step in the tour is displayed in a dialog box which can be styled using
standard jQuery UI themes.
</div>
</div>
<!-- Webtour Script -->
<script>
jQuery(function($) {
$("button#demo-startTour").click(function() {
$("#tourContainer").webtour();
});
});
</script>
The webtour makes it easy to provide a little extra help on your website.
Each step in the tour is displayed in a dialog box which can be styled using standard jQuery UI themes.