用Intro.js创建站点分步指南

下载地址：https://github.com/usablica/intro.js/tags

演示地址：http://usablica.github.io/intro.js/example/index.html

首先引入样式表和js文件，min在minified文件夹中。

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

1.常规使用

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>

 将指南步骤的先后顺序用data-step、说明名字用data-intro写在标签中，可以用data-position来指定指南框的展示位置。设置option的showButtons为false，可以隐藏done、back、next等按钮（javascript:introJs().setOption('showButtons', false).start();）。

2.配置option属性（json格式）来控制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.跨页面分步指南

3.1在页面1中将完成按钮改为“下一页”，绑定指南完成事件为跳转到下一个页面，代码如下：

 

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在页面2中继续执行上一个页面未完成的部分。（step编号为页面1中接下去的）

 

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

4.给说明文字添加HTML样式标签

 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.添加CSS样式表

可以用data-tooltipClass添加样式表.

 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>