Interactive Guide For Web App – Driver.js
source link: https://www.tuicool.com/articles/hit/jAN7zuz
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Preview:
Description:
Driver.js is a lightweight yet powerful JavaScript library to create an animated, interactive, user-friendly visual guide for any web elements.
Features:
- With or without animations.
- With or without background overlay.
- Highlights web elements when the guide is active.
- Popover style step-by-step guide.
Basic usage:
Installation.
# Yarn $ yarn add driver.js # NPM $ npm install driver.js --save
Insert the Driver.js’ JavaScript and CSS files into the html document.
<link rel="stylesheet" href="/path/to/driver.min.css"> <script src="/path/to/driver.min.js"></script>
Create new Driver instance and we’re ready to go.
const myDriver = new Driver();
Highlight a specific element within the document.
myDriver.highlight('#element');
Highlight a specific element with a popover.
myDriver.highlight({ element: '#element', popover: { title: 'Popover Title', description: 'Description', } });
Create a step-by-step guide.
// define your steps myDriver.defineSteps([ { element: '#element-1', popover: { title: 'Title 1', description: 'Desc 1', position: 'left', offset: 20 } }, { element: '#element-2', popover: { title: 'Title 2', description: 'Desc 2', position: 'right' } }, { element: '#element-3', popover: { title: 'Title 3', description: 'Desc 3', position: 'right' } }, ... ]); // start the guide driver.start();
All possible options for the Driver.js.
const driver = new Driver({ // enable the animation animate: true, // background opacity opacity: 0.75, // padding of element padding: 10, // is closable? allowClose: true, // Allow controlling through keyboard (escape to close, arrow keys to move) keyboardControl: true, // Whether the click on overlay should move next overlayClickNext: false, // text on the Done button doneBtnText: 'Done', // text on the Close button closeBtnText: 'Close', // background color stageBackground: '#ffffff', // text on the Next button nextBtnText: 'Next', // text on the Prev button prevBtnText: 'Previous', // shows navigation buttons showButtons: false, // scrollIntoView options scrollIntoViewOptions: {}, // callback functions onHighlightStarted: (Element) {}, onHighlighted: (Element) {}, onDeselected: (Element) {}, onReset: () {}, onNext: () {}, onPrevious: () {}, });
Changelog:
v0.9.2 (02/09/2019)
- Add more options
v0.7.1 (10/12/2018)
- Add more options
- Optimize
v0.6.0 (06/30/2018)
- Add support for asynchronous actions
v0.5.2 (05/23/2018)
- Add keyboardControl option and typo in readme
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK