Intro. js website demo and intro. js website demo

Intro. js website demo and intro. js website demo
Intro. js

Provides a step-by-step and better introduction to your websites and projects.

Easy to use

Introduce js and css, and then add the steps and introduction to the code.

Fast and compact

7 KB JavaScript and 3 kb css are all.

Free Open Source

Free and open-source (including commercial use), under the MIT license.

Keyboard and mouse navigation

Mouse or keyboard←,→,ENTERNavigation,ESCKey to exit.

Online instance

Instance demo

Parameters are described in json format:

1. Key: value

Copy configurable Parameters

1. NextLabel: "Next & rarr ;",
2. PrevLabel: "& larr; Back ",
3. SkipLabel: "Skip ",
4. DoneLabel: "Done ",
5. TooltipPosition: "bottom ",
6. TooltipClass :"",
7. HighlightClass :"",
8. ExitOnEsc :! 0,
9. ExitOnOverlayClick :! 0,
10. ShowStepNumbers :! 0,
11. KeyboardNavigation :! 0,
12. ShowButtons :! 0,
13. ShowBullets :! 0,
14. ShowProgress :! 1,
15. ScrollToElement :! 0,
16. OverlayOpacity: 0.8,
17. PositionPrecedence: ["bottom", "top", "right", "left"],
18. DisableInteraction :! 1

Copy setting method (multiple parameter settings)

Keyword: setOptions

1. IntroJs (). setOptions ({'prevlab': '& larr; ', 'nextlabel ': 'Next & rarr;', 'skiplabel': 'skip ', 'donelabel ': 'complete '}). start ();

Copy setting method (single parameter setting)

Keyword: setOption

1. IntroJs (). setOption ("prevLabel", "previous"). start ();

Copy

Page distribution guide element settings:

1. <Div id = "demo" data-step = "1" data-intro = "here is the content of distributed guidance ...... "Data-position =" right ">
2. </Div>

Copy

Note:

1. Data-step: step 1
2. Data-intro: distributed Bootstrap content
3. Data-position: the position where the guiding content is displayed,

Copy

Parameter: left, right, top, bottom (not explained)

 

Download