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

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

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

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

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

1.常规使用

 <div class="jumbotron">
        <h1 data-step="1" data-intro="This is a tooltip!">Basic Usage</h1>
        <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>
        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">Show me how</a>
 </div>

 

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

 

2.配置option属性（json格式）来控制steps

 

function startIntro(){
        var intro = introJs();
          intro.setOptions({
            steps: [
              {
                element: document.querySelector('#step1'),
                intro: "This is a tooltip."
              },
              {
                element: document.querySelectorAll('#step2')[0],
                intro: "Ok, wasn't that fun?",
                position: 'right'
              },
              {
                element: '#step3',
                intro: 'More features, more fun.',
                position: 'left'
              },
              {
                element: '#step4',
                intro: "Another step.",
                position: 'bottom'
              },
              {
                element: '#step5',
                intro: 'Get it, use it.'
              }
            ]
          });


          intro.start();
      }

 

 

3.跨页面分步指南

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

 

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

 

3.2在页面2中继续执行上一个页面未完成的部分。（step编号为页面1中接下去的）

 

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

 

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

 

function startIntro(){
        var intro = introJs();
          intro.setOptions({
            steps: [
              {
                element: '#step1',
                intro: "This is a <b>bold</b> tooltip."
              },
              {
                element: '#step2',
                intro: "Ok, <i>wasn't</i> that fun?",
                position: 'right'
              },
              {
                element: '#step3',
                intro: 'More features, more <span style="color: red;">f</span><span style="color: green;">u</span><span style="color: blue;">n</span>.',
                position: 'left'
              },
              {
                element: '#step4',
                intro: "<span style='font-family: Tahoma'>Another step with new font!</span>",
                position: 'bottom'
              },
              {
                element: '#step5',
                intro: '<strong>Get</strong> it, <strong>use</strong> it.'
              }
            ]
          });

          intro.start();
      }

5.添加CSS样式表

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

.forLastStep {
        font-weight: bold;
      }
      .customDefault { 
        color: gray;
      }
      .customDefault .introjs-skipbutton {
        border-radius: 0;
        color: red;
      }

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