opensource/driver.js
3
0
Fork 0
mirror of https://github.com/kamranahmedse/driver.js.git synced 2026-10-31 12:04:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add docs

Browse Source
This commit is contained in:
Kamran Ahmed
2018-03-16 22:56:29 +01:00
parent 9bf5661cfd
commit cae9e3ece3
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+12 -5
View File
@@ -15,7 +15,8 @@
<div class="page-wrap">
<section class="section__header" id="driver-demo-head">
<h1><span id="logo_emoji" class="emoji">👨‍🔧️</span> <span id="name_driver">Driver</span></h1>
<p class="text-muted tagline">Light-weight, no-dependency, vanilla JavaScript engine to drive user's focus across the
<p class="text-muted tagline">Light-weight, no-dependency, vanilla JavaScript engine to drive user's focus across
the
page</p>
<a id="animated-tour" href="javascript:void(0)" class="btn btn__example btn__dark">With Animation</a>
@@ -250,6 +251,11 @@ driver.highlight({
opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
padding: 10, // Distance of element from around the edges
allowClose: true, // Whether clicking on overlay should close or not
doneBtnText: 'Done', // Text on the final button
closeBtnText: 'Close', // Text on the close button for this step
nextBtnText: 'Next', // Next button text for this step
prevBtnText: 'Previous', // Previous button text for this step
showButtons: false, // Do not show control buttons in footer
scrollIntoViewOptions: {}, // 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
@@ -257,6 +263,8 @@ driver.highlight({
});
</code></pre>
</div>
<p class="top-20">Note that all the button options that you provide in the driver definition can be overridden for a
specific step by giving them int he step definition</p>
<div class="section__example">
<h4>Step Definition</h4>
<p>Here are the set of options that you can pass in each step i.e. an item in array of steps or the object that
@@ -267,10 +275,9 @@ driver.highlight({
title: 'Title', // Title on the popover
description: 'Description', // Body of the popover
showButtons: false, // Do not show control buttons in 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
closeBtnText: 'Close', // Text on the close button for this step
nextBtnText: 'Next', // Next button text for this step
prevBtnText: 'Previous', // Previous button text for this step
}
};
</code></pre>