Modify driver.js to add the style you want, dynamically change the copy of the action button for each step, and provide the ability to call back after the next step, skip, or complete the action!
originally
Driver.js is a fairly good bootstrap plugin, but it has some disadvantages in production practice:
- The library does not provide a way to change the style of the boot panel, only to set the opacity of the element and the opacity of the mask background
- The ability to dynamically change the visibility of the bootpanel operation buttons and update the button text is not provided, but is defined at initialization
With these two pain points in mind, this library can be easily modified based on driver.js
First of all, how does this library work
The installation
use
Use method is relatively simple, directly define the id attribute of the bootstrap element, bootstrap text, relative position can be.
Start our transformation
Step 1: Change the style
XDM, I’ll just post the code
Step 2: Encapsulate the action plug-in
In our business, we need to change the copy of the close button: skip the current step /{current step}/ current step /{total step}, so we use a kind of not elegant way to dynamically change the current step, which can be tested by ourselves!
Then add the callback function parameter to the next, skip, or complete operation, so that you can request the interface or change the cache flag while completing or skipping.
Step 3: Use it on the page
conclusion
The need to do novice guidance was originally a more tedious and painful thing, the code is also more intrusive, if it can be packaged into reusable plug-ins or tools, can greatly save our development and debugging of the guidance position style of time, if my article is helpful to you, thank you for your one-button three-link.
