A lightweight, dependency-free native JavaScript engine that focuses the user’s attention on the entire page; this is a powerful and highly customizable new user onboarding library based on native JavaScript development.
Introduction and tutorial
Driver.js
is a powerful and highly customizable new user onboarding library based on native JavaScript development. It has no dependencies and supports all major browsers.
Features:
- Simple: easy to use, no external dependencies at all
- Highly customizable: there is a powerful api for anything you wish to highlight
- Highlight: any element on the page function introduction (literally any)
- Feature Introduction: Create powerful feature introductions for your web applications
- Focus Shifter: Add focus shifter for user friendliness
- User friendly: control everything with keyboard actions
- Consistent Behavior: Works in all browsers (including the famous IE)
- MIT Disclaimer: Free for personal and commercial use.
Install
Npm
npm i driver.js
Yarn
yarn add driver.js
Browser
<script src="//i2.wp.com/unpkg.com/driver.js/dist/driver.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css"> <!-- or --> <link rel="stylesheet" href="/dist/driver.min.css"> <script src="/dist/driver.min.js"></script>
Use
Introduction
import Driver from 'driver.js'; import 'driver.js/dist/driver.min.css'; /* up to date */ import { driver } from "driver.js"; import "driver.js/dist/driver.css";
Simple example
const driver = new Driver(); driver.highlight('#create-post'); /* up to date */ const driverObj = driver(); driverObj.highlight({ element: "#some-element", popover: { title: "Title", description: "Description" } });
Highlight elements during interaction
const focusDriver = new Driver(); // Highlight the section on focus document.getElementById('creation-input') .addEventListener('focus', (e) => { focusDriver. focus('#creation-input'); });
with pop-up window
const driver = new Driver(); driver.highlight({ element: '#some-element', popover: { title: 'Title for the Popover', description: 'Description for it', } });
The pop-up window supports the definition of location, HTML content, etc.
Create function introduction
const driver = new Driver(); // Define the steps for introduction driver.defineSteps([ { element: '#first-element-introduction', popover: { className: 'first-step-popover-class', title: 'Title on Popover', description: 'Body of the popover', position: 'left' } }, { element: '#second-element-introduction', popover: { title: 'Title on Popover', description: 'Body of the popover', position: 'top' } }, { element: '#third-element-introduction', popover: { title: 'Title on Popover', description: 'Body of the popover', position: 'right' } }, ]); // Start the introduction driver.start();
Positioning of the pop-up box
You can also change the position of the popup to
left, left-center, left-bottom, top, top-center, top-right, right, right-center,right-bottom
orbottom, bottom-center, bottom-right, mid-center
.
const driver = new Driver(); driver.highlight({ element: '#some-element', popover: { title: 'Title for the Popover', description: 'Description for it', // position can be left, left-center, left-bottom, top, // top-center, top-right, right, right-center, right-bottom, // bottom, bottom-center, bottom-right, mid-center position: 'left', } });
If you do not specify a position or specify it as be auto, it will automatically find a suitable position for the popover and display it
Options
Driver Options
const driver = new Driver({ className: 'scoped-class', //class name to wrap driver.js popover className to wrap driver.js popover animate: true, // Whether to display animation when the highlighted element changes Animate while changing highlighted element opacity: 0.75, //Background transparency (0 means only popovers and no mask) Background opacity (0 means only popovers and without overlay) padding: 10, // Distance of element from around the edges allowClose: true, // Whether to allow closing when clicking on the overlay Whether clicking on overlay should close or not overlayClickNext: false, //Whether it is allowed to move to the next step when the mask is clicked Should it move to next step on overlay click doneBtnText: 'Done', // Text on the final button Text on the final button closeBtnText: 'Close', // Text on the close button for this step Text on the close button for this step nextBtnText: 'Next', //The text on the next button of the current step Next button text for this step prevBtnText: 'Previous', // Text on the previous button of the current step Previous button text for this step showButtons: false, //Whether to display control buttons at the bottom Do not show control buttons in footer keyboardControl: true, // Allow notification of keyboard control (escape off, arrow keys to move) Allow controlling through keyboard (escape to close, arrow keys to move) scrollIntoViewOptions: {}, // options for `scrollIntoView()` method We use `scrollIntoView()` when possible, pass here the options for it if you want any onHighlightStarted: (Element) {}, // Called when element is about to be highlighted onHighlighted: (Element) {}, // Called when element is fully highlighted onDeselected: (Element) {}, // Called when element has been deselected onReset: (Element) {}, // Called when the overlay is about to be cleared onNext: (Element) => {}, // Called when moving to next step on any step onPrevious: (Element) => {}, // Called when moving to next step on any step });
step option
const stepDefinition = { element : '#some-item' , // query selector string or node to highlight stageBackground : '#ffffff' , // this will override the one set in the driver popover : { // There will be no popover if empty or not given className : 'popover-class' , // the className to wrap this specific step popover in addition to the general className in the driver options title : 'Title' , // title on the popup description : 'Description' , // The body of the popup box showButtons : false , // don't show control buttons in the footer doneBtnText : 'Done' , // Text on the last button closeBtnText : 'Close' , // Text on the close button nextBtnText : 'Next' , // next button text prevBtnText : 'Previous' , // previous button text } , onNext : ( ) => { } , // called when moving from the current step to the next step onPrevious :( ) => { } , // called when moving from the current step to the previous step } ;
API method
const driver = new Driver(driverOptions); const isActivated = driver.isActivated; // Check if the driver is activated Checks if the driver is active or not driver.moveNext(); // Moves to next step in the steps list driver.movePrevious(); // Move to previous step in the steps list Moves to previous step in the steps list driver.start(stepNumber = 0); // Starts driving through the defined steps driver.highlight(string|stepDefinition); // Highlights the element using query selector or the step definition highlights the element using query selector or the step definition driver.reset(); // Reset the mask and clear the screen Resets the overlay and clears the screen driver.hasHighlightedElement(); //Check if there is any highlighted element Checks if there is any highlighted element driver.hasNextStep(); // Checks if there is next step to move to driver.hasPreviousStep(); // Check if there is a previous step element to move to. Checks if there is previous step to move to driver.preventMove();// Prevent the current movement. Useful in `onNext` or `onPrevious` if you want to perform some asynchronous task and manually move to the next step Prevents the current move. Useful in `onNext` or `onPrevious` if you want to // perform some asynchronous task and manually move to next step const activeElement = driver.getHighlightedElement();// Get the currently highlighted element on the screen Gets the currently highlighted element on screen const lastActiveElement = driver. getLastHighlightedElement(); activeElement.getCalculatedPosition(); // Gets the screen coordinates of the active element Gets screen co-ordinates of the active element activeElement.hidePopover(); // Hide the popover Hide the popover activeElement.showPopover(); // Show the popover Show the popover activeElement.getNode(); // Get the DOM element behind this element Gets the DOM Element behind this element You can use various options to achieve everything you want. You can use a variety of options to achieve whatever you may want.
Guide page effect
Driver.js – Demo is a tutorial library
Visit GitHub
General guide page
Create a new main page file
layout
<template> <div :class="classObj" class="app-wrapper"> <div v-if="device==='mobile' & amp; & amp;sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> <sidebar class="sidebar-container" /> <div :class="{hasTagsView:needTagsView}" class="main-container"> <div :class="{'fixed-header':fixedHeader}"> <navbar /> <tags-view v-if="needTagsView" /> </div> <app-main /> <right-panel v-if="showSettings"> <settings /> </right-panel> </div> </div> </template> <script> import RightPanel from '@/components/RightPanel' import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components' import ResizeMixin from './mixin/ResizeHandler' import { mapState } from 'vuex' import Driver from 'driver.js' // import driver.js import 'driver.js/dist/driver.min.css' // import driver.js css import steps from './steps' export default { name: 'Layout', components: { AppMain, Navbar, RightPanel, Settings, Sidebar, TagsView }, mixins: [ResizeMixin], data() { return { driver: null } }, computed: { ...mapState({ sidebar: state => state.app.sidebar, device: state => state.app.device, showSettings: state => state.settings.showSettings, needTagsView: state => state.settings.tagsView, fixedHeader: state => state.settings.fixedHeader }), classObj() { return { hideSidebar: !this.sidebar.opened, openSidebar: this.sidebar.opened, withoutAnimation: this.sidebar.withoutAnimation, mobile: this.device === 'mobile' } } }, mounted() { this.driver = new Driver({ opacity: 0.1, animate: true, doneBtnText: 'I know', closeBtnText: 'Skip', // close button text nextBtnText: 'Next', // next button text prevBtnText: 'Previous step', // button text of the previous step keyboardControl: true // Allow keyboard control (exit close, arrow keys move) }) console.log(this.driver) this. firstLogin() }, methods: { handleClickOutside() { this.$store.dispatch('app/closeSideBar', { withoutAnimation: false }) }, // Is the user logging in for the first time firstLogin() { const firstDate = localStorage. getItem('firstDate') // Get the current time (year, month, day) const now = new Date().toLocaleDateString() // convert to timestamp const time = Date. parse(new Date(now)) if (localStorage. getItem('firstDate')) { console.log('The page is refreshed') if (time > firstDate) { localStorage.setItem('firstDate', JSON.stringify(time)) } } else { this. guide() localStorage.setItem('firstDate', JSON.stringify(time)) console.log('be loaded for the first time') } }, // page guide guide() { this.driver.defineSteps(steps) this.driver.start() } } } </script> <style lang="scss" scoped> @import "~@/styles/mixin.scss"; @import "~@/styles/variables.scss"; .app-wrapper { @include clearfix; position: relative; height: 100%; width: 100%; &.mobile.openSidebar { position: fixed; top: 0; } } .drawer-bg { background: #000; opacity: 0.3; width: 100%; top: 0; height: 100%; position: absolute; z-index: 999; } .fixed-header { position: fixed; top: 0; right: 0; z-index: 9; width: calc(100% - #{$sideBarWidth}); transition: width 0.28s; } .hideSidebar.fixed-header { width: calc(100% - 54px) } .mobile.fixed-header { width: 100%; } </style>
Create a new
steps.js
file
// Define the steps to introduce const steps = [ { element: '#hamburger-container', stageBackground: '#fff', popover: { title: 'sidebar button', description: 'Open or close the sidebar', position: 'bottom' } }, { element: '#sidebar-container', popover: { title: 'sidebar', description: 'sidebar and routing', position: 'right-center' } }, { element: '#breadcrumb-container', popover: { title: 'Breadcrumbs', description: 'Indicate the location of the current page', position: 'bottom' } }, { element: '#header-search', popover: { title: 'page search', description: 'page search, quick navigation', position: 'left' } }, { element: '#screenfull', popover: { title: 'full screen', description: 'Set the page to full screen', position: 'left' } }, { element: '#size-select', popover: { title: 'Size of switch', description: 'System switching size', position: 'left' } }, { element: '#lang-select', popover: { title: 'Internationalization', description: 'Switch between Chinese and English', position: 'left' }, padding: 0 }, { element: '#personal_settings', popover: { title: 'Personal Center', description: 'Personal account settings and operations', position: 'left' }, padding: 0 }, { element: '#tags-view-container', popover: { title: 'Label view', description: 'History of the pages you visit', position: 'bottom-center' }, padding: 0 }, { element: '#theme_settings', popover: { title: 'Theme Settings', description: 'Set your favorite theme', position: 'right-center' }, padding: 0 }, { element: '#app_main', stageBackground: '#fff', popover: { className: 'app-container', title: 'main content area', // description: 'A series of operations on the main content', position: 'top-center' }, padding: -30 } ] export default steps
Installation – Driver.jsA light-weight, no-dependency, vanilla JavaScript library to drive user’s focus across the page.https://driverjs.com/docs/installation
———————
Author: weaving_net
Source: CSDN
Original: https://blog.csdn.net/qq_43869822/article/details/122826093
Copyright statement: This article is the author’s original article, please attach the blog post link for reprinting!
Content analysis By: CSDN, CNBLOG blog post one-click reprint plug-in
The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge