Intro.js使用方法

Intro.js

Better introductions for websites and features with a step-by-step guide for your projects.

How to use

Intro.js can be added to your site in three simple steps:

1) Include intro.js and introjs.css (or the minified version for production) in your page.

2) Add data-intro and data-step to your HTML elements.

For example:

<a href='http://google.com/' data-intro='Hello step one!' data-step='1'></a>

Optionally you can define data-position attribute to define the position of tooltip with values top, right,left and bottom. Default value is bottom.

3) Call this JavaScript function:

introJs().start();

Optionally, pass one parameter to introJs function to limit the presentation section.

For example introJs(".introduction-farm").start(); runs the introduction only for elements withclass='introduction-farm'.

API

introJs([targetElm])

Creating an introJs object.

Available since: v0.1.0

Parameters:

• targetElm : String (optional) Should be defined to start introduction for specific element, for example:#intro-farm.

Returns:

• introJs object.

Example:

introJs() //without selector, start introduction for whole page
introJs("#intro-farm") //start introduction for element id='intro-farm'

introJs.start()

Start the introduction for defined element(s).

Available since: v0.1.0

Returns:

• introJs object.

Example:

introJs().start()

introJs.oncomplete(providedCallback)

Set callback for when introduction completed.

Available since: v0.2.0

Parameters:

• providedCallback : Function

Returns:

• introJs object.

Example:

introJs().oncomplete(function() {
  alert("end of introduction");
});

introJs.onexit(providedCallback)

Set callback to exit of introduction. Exit also means pressing ESC key and clicking on the overlay layer by the user.

Available since: v0.2.0

Parameters:

• providedCallback : Function

Returns:

• introJs object.

Example:

introJs().onexit(function() {
  alert("exit of introduction");
});