A plugin that takes advantage of Framework7 Popover elements to display a tour guide through your application.
1) Copy tourguide.css and tourguide.js to your project and reference them:
<link rel="stylesheet" href="https://github.com/razekteixeira/Framework7-Plugin-Tour-Guide/blob/master/tourguide.css">
<script src="https://github.com/razekteixeira/Framework7-Plugin-Tour-Guide/raw/master/tourguide.js"></script>
2) Define tour steps
var tourSteps = [
{
step: 0,
header: '1st Tour Step',
message: 'This is our first tour step.<br />Please click "next" or "back" to move forward and backwards respectively',
element: "body > div.views > div > div.toolbar > div > a:nth-child(1)",
action: function ()
{
console.log('Started guided tour');
console.log('Step 0');
}
},
{
step: 1,
header: '2nd Tour Step',
message: 'This is our seconds tour step.<br />You can use icons and images too! Wow!<br /><br /> F7 Icon:<br /> <i class="icon icon-back"></i><br /><br />Image:<br /> <div style="background-image: url(http://cdn.framework7.io/i/logo-new.png); width: 100px; height: 100px; background-size: cover; margin: 0 auto";></div><br />Please click "next" or "back" to move forward and backwards respectively',
element: "body > div.views > div > div.navbar > div > div.right > a",
action: function ()
{
console.log('Step 1');
}
},
{
step: 2,
header: '3rd and Final Step',
message: 'Congratulations! You have finished your Tour Guide tutorial. Enjoy it :D',
element: "body > div.views > div > div.navbar > div > div.right > a",
action: function ()
{
console.log('Step 2');
console.log('Last step on guided tour');
}
}];
Parameters
3) Initialize & options
var myApp = new Framework7();
var options = {...};
var tourguide = myApp.tourguide(tourSteps, options);
Available options (if not set, default will be used)
The following methods are available on a tourguide instance
tourguide.moveForward(); // moves to next step
tourguide.moveBackward(); // moves to previous step if allowed
Developed by https://www.cesarteixeira.pt
Please contribute ;)