Author: | pjmazenot |
---|---|
Views Total: | 653 views |
Official Page: | Go to website |
Last Update: | July 29, 2019 |
License: | MIT |
Preview:

Description:
Yet another JavaScript library that helps developers create guided tours to drive the user’s focus across the web application.
Features:
- Supports unlimited steps.
- Custom trigger events to go to the next step.
- Custom step styles.
- Fast and simple to use.
How to use it:
Link to the steps.js library and we’re ready to go.
<script src="build/stepsjs.min.js"></script>
Create steps with element ID, titles, descriptions and custom trigger events as follows:
var steps = [ { elementId: 'email', title: 'Step 1: Type your email', description: 'Type your email to go to the next step', triggerNext: ['change', 'keydown'] }, { elementId: 'pwd', title: 'Step 2: Enter the password', description: 'Enter the password to go to the next step', triggerNext: ['change', 'keydown'] }, { elementId: 'finish', title: 'Step 3: Finish the tour', description: 'Click on the "Submit" button to finish the tour', triggerNext: ['click', 'touchstart'] } ];
Initialize the library to start the tour.
var myTour = new StepsJs(steps);
Available options to customize the guided tour.
var myTour = new StepsJs(steps,{ duration: 300, // in ms styles: { frame: { customClass: '', borderWidth: 3, borderColor: '#ff0000' }, hint: { customClass: '', borderWidth: 1, borderColor: '#00ff00', borderRadius: 5, backgroundColor: '#dbffdb' } } });
Force the tour to go to the next step.
myTour.processStep('next');