Author: | shipshapecode |
---|---|
Views Total: | 834 |
Official Page: | Go to website |
Last Update: | December 27, 2018 |
License: | MIT |
Preview:

Description:
shepherd is a JavaScript library that creates an interactive, dynamic visual guide to let your users learn about new features and functions on your web app.
Full responsive, user-friendly and mobile compatible.
The library requires Tether.js which is a client-side library to make absolutely positioned elements attach to elements in the page efficiently.
How to use it:
Import the necessary Tether.js and shepherd.js into the document.
<script src="tether.js"></script> <script src="shepherd.js"></script>
Create a new tour.
let myTour = new Shepherd.Tour({ // options here });
Add steps to the tour.
myTour.addStep('step-1', { title: 'Step 1', text: 'This is Step 1', attachTo: '.where-to-attach', advanceOn: '.advance-on' });
Start the tour.
myTour.start();
All default tour options.
let myTour = new Shepherd.Tour({ // an array of Steps steps: [], // Default options for Steps defaults: {} })
All default step options.
myTour.addStep('stepName', { // The text in the body of the step. It can be one of four types: // HTML string // Array of HTML strings // HTMLElement object // Function to be executed when the step is built. It must return one the three options above. text: '', // Step title title: '', // where to attach the step to attachTo: '', // returns a promise. When the promise resolves, the rest of the show code for the step will execute. beforeShowPromise: function (){}, // extra classes classes: '', // an array of buttons to add to the step. buttons: [{ text: '', classes: '', action: function (){}, events: {'mouseover': function(){}}, }], // An action on the page which should advance shepherd to the next step. // It can be of the form "selector event", or an object with those properties. // For example: ".some-element click", or {selector: '.some-element', event: 'click'}. // It doesn't have to be an event inside the tour, it can be any event fired on any element on the page. // You can also always manually advance the Tour by calling myTour.next(). advanceOn: '', // shows cancel link showCancelLink: true or false // scrolls the page to the current step scrollTo: true or false // You can define show, hide, etc events inside when when: {} });
Tour’s API.
// Methods myTour.addStep(id, options) myTour.getById(id) myTour.next() myTour.back() myTour.cancel() myTour.hide() myTour.show([id]) myTour.start() myTour.getCurrentStep() myTour.on(eventName, handler, [context]) myTour.off(eventName, [handler]) myTour.once(eventName, handler, [context]) // Events myTour.on('start', function(){ // ... }) myTour.on('show', function(){ // ... }) myTour.on('hide', function(){ // ... }) myTour.on('cancel', function(){ // ... }) myTour.on('complete', function(){ // ... })
Step’s API.
// Methods myStep.show() myStep.hide() myStep.cancel() myStep.complete() myStep.scrollTo() myStep.isOpen() myStep.destroy() myStep.on(eventName, handler, [context]) myStep.off(eventName, [handler]) myStep.once(eventName, handler, [context]) // Events myStep.on('destroy', function(){ // ... }) myStep.on('show', function(){ // ... }) myStep.on('hide', function(){ // ... }) myTour.on('cancel', function(){ // ... }) myTour.on('complete', function(){ // ... }) myTour.on('before-hide', function(){ // ... }) myTour.on('before-show', function(){ // ... })
Changelog:
12/27/2018
- v2.0.0-beta.35