This compact solution for guided tours has 27 languges support. It requires only two very common dependencies: jQuery and Bootstrap. Also has usefull features like auto scroll and "spotlight". We hope you enjoy it.
We tryed to keep all data regarding usage as short as possible.
Features that we considerble important:
Lets start with two step tour for elements below:
First of all we need to include two common libraries jQuery and Bootstrap. You ca use some CDN for that.
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
Then it's time tour library dknotus-tour.js
or dknotus-tour.min.js
.
<script src="dknotus-tour.js"></script>
Finally we can define our own tour and run it with Tour.run()
. Yes, it's that simple.
$(function(){
$('#simpleBtn').click(function(){
Tour.run([
{
element: $('#btn1'),
content: 'first btn'
},
{
element: $('#btn2'),
content: 'and the second one<br>description might be <strong>HTML</strong>'
},
]);
});
});
$(function(){
$('#positionsBtn').click(function(){
Tour.run([
{
element: $('#posBtn'),
content: 'by default tour is on the right'
},
{
element: $('#posBtn'),
content: 'but it can be on top',
position: 'top'
},
{
element: $('#posBtn'),
content: 'bottom',
position: 'bottom'
},
{
element: $('#posBtn'),
content: 'and finally on the left',
position: 'left'
}
]);
});
});
Tour may be run with two parameters: tour description (mandatory) and global options (optional)
Tour.run(tourDescription, options)
. If for some tour hint some parameter is not set,
then if it's possible it's taken from options.
Parameter | Default value | Description |
---|---|---|
element | none | jQuery element (might be more then one), if it's not set then hint is skiped. |
content | empty string | It's for contents of particular hints. |
close | true | Defines if close button should be shown. |
language | en |
Defines interface language. Available languages:
|
padding | 3 | Extra space around tour exposed elements. (Has only sense when sptlight option is true). |
position | right |
Determines where hint shoul be shown relativly to element it describes. Possible values: right, left, top and bottom. |
scroll | true | If true then scrolls window so selected element and hint would be as close as possible to the view center. |
spotlight | true | If true then covers everything except selected element and hint with shadow. |
All above options can be used for both: single hint description and for global options. With global options previous example can be writen like:
$(function(){
$('#positionsShorterBtn').click(function(){
var globalOptions = {element: $('#posBtn')};
var tourDescription = [
{
content: 'by default tour is on the right'
},
{
content: 'but it can be on top',
position: 'top'
},
{
content: 'bottom',
position: 'bottom'
},
{
content: 'and finally on the left',
position: 'left'
}
];
Tour.run(tourDescription, globalOptions);
});
});
There are four events that can be used by developers:
Tour.run()
).Tour.close()
).Tour.next()
or Tour.prev()
).Method | Description |
---|---|
Tour.run( tourDescription, globlOptions ) | Function for running Tour. |
Tour.next() | Goes to next tour step. |
Tour.prev() | Goes to previous tour step. |
Tour.close() | Interupts tour and closes it. |
Tour.current() | Returns current step description. |
By default all except onresize are set to null.
Event | Description |
---|---|
Tour.onstart | Trigered when new tour starts ( Tour.run() ). |
Tour.onfinish | Triggered when Finish button is clicked. |
Tour.onclose | Triggered when Close button is pressed ( Tour.close() ). |
Tour.onstep | Triggered on every step shown ( Tour.next() or Tour.prev() ). |
Tour.onresize | By default this one is set. |