Step by step guide to create a site with Intro.js

Download: https://github.com/usablica/intro.js/tags

Demo Address: http://usablica.github.io/intro.js/example/index.html

First introduced stylesheets and js files, min minified files in the folder.

1  <link href="../../introjs.css" rel="stylesheet">
2   <script type="text/javascript" src="../../intro.js"></script>

1. General Use

1  <div class="jumbotron">
2         <h1 data-step="1" data-intro="This is a tooltip!">Basic Usage</h1>
3         <p class="lead" data-step="4" data-intro="Another step.">This is the basic usage of IntroJs, with <code>data-step</code> and <code>data-intro</code> attributes.</p>
4         <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">Show me how</a>
5  </div>

 

 The guide sequence of steps with data-step, using data-intro description name written on the label, you can use data-position to specify the placement guide frame. The option provided showButtons is false, hide done, back, next button, etc. (javascript: introJs () setOption ( 'showButtons', false) .start ();.).

 

Configuration option properties (JSON format) to control the steps

 

 1 function startIntro(){
 2         var intro = introJs();
 3           intro.setOptions({
 4             steps: [
 5               {
 6                 element: document.querySelector('#step1'),
 7                 intro: "This is a tooltip."
 8               },
 9               {
10                 element: document.querySelectorAll('#step2')[0],
11                 intro: "Ok, wasn't that fun?",
12                 position: 'right'
13               },
14               {
15                 element: '#step3',
16                 intro: 'More features, more fun.',
17                 position: 'left'
18               },
19               {
20                 element: '#step4',
21                 intro: "Another step.",
22                 position: 'bottom'
23               },
24               {
25                 element: '#step5',
26                 intro: 'Get it, use it.'
27               }
28             ]
29           });
30 
31 
32           intro.start();
33       }

 

 

3. Cross-page step by step guide

3.1 Finish button to "Next" in the page 1, binding instructions to complete the event for the jump to the next page, the code is as follows:

 

1 document.getElementById('startButton').onclick = function() {
2         introJs().setOption('doneLabel', 'Next page').start().oncomplete(function() {
3           window.location.href = 'second.html?multipage=true';
4         });
5       };

 

3.2 Continue unfinished portions of a page in page 2. (Step No. 1 in the next page)

 

1 if (RegExp('multipage', 'gi').test(window.location.search)) {
2         introJs().start();
3       }

 

4. to add captions HTML style tags

 

 1 function startIntro(){
 2         var intro = introJs();
 3           intro.setOptions({
 4             steps: [
 5               {
 6                 element: '#step1',
 7                 intro: "This is a <b>bold</b> tooltip."
 8               },
 9               {
10                 element: '#step2',
11                 intro: "Ok, <i>wasn't</i> that fun?",
12                 position: 'right'
13               },
14               {
15                 element: '#step3',
16                 intro: 'More features, more <span style="color: red;">f</span><span style="color: green;">u</span><span style="color: blue;">n</span>.',
17                 position: 'left'
18               },
19               {
20                 element: '#step4',
21                 intro: "<span style='font-family: Tahoma'>Another step with new font!</span>",
22                 position: 'bottom'
23               },
24               {
25                 element: '#step5',
26                 intro: '<strong>Get</strong> it, <strong>use</strong> it.'
27               }
28             ]
29           });
30 
31           intro.start();
32       }

5. Add CSS Style Sheets

It can be used to add data-tooltipClass stylesheet.

 1 .forLastStep {
 2         font-weight: bold;
 3       }
 4       .customDefault { 
 5         color: gray;
 6       }
 7       .customDefault .introjs-skipbutton {
 8         border-radius: 0;
 9         color: red;
10       }

1 <div class="masthead">
2         <ul class="nav nav-pills pull-right" data-step="5" data-tooltipClass='forLastStep' data-intro="Get it, use it.">
3           <li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
4           <li><a href="https://github.com/usablica/intro.js">Github</a></li>
5           <li><a href="https://twitter.com/usablica">@usablica</a></li>
6         </ul>
7         <h3 class="muted">Intro.js</h3>
8  </div>