引导页面 html插件,Intro.js网站交互引导插件 - 轩枫阁

Intro.js

Intro.js是一个网站特色功能操作分步引导插件，支持使用键盘的方向键导航，使用 Enter 和 ESC 键退出指南。

支持 Chrome、Firefox、Safari 浏览器以及IE8+ 浏览器。

如何使用

1. 引入插件 intro.js 和 introjs.css 的文件。

github：https://github.com/usablica/intro.js

2. 在HTML标签添加 data-intro 和 data-step

例如：

1

data-intro：显示的文本内容。

data-step：可选。步骤顺序。

data-position：可选。文本框的相对位置，可选left,right,top,bottom,bottom-left-aligned(等同于bottom),bottom-middle-aligned,bottom-right-aligned，默认为bottom。

data-highlightclass：可选。为引导层增加高亮class。

data-tooltipclass：可选。增加提示calss。

3. 运行函数

1

2

3

4

introJs().start();

// 在introjs传入可选参数，则表示只展示这个标签下的页面引导

introJs(".introduction-farm").start();

API

introJs([targetElem])

创建introJs对象

1

2

introJs()//without selector, start introduction for whole page

introJs("#intro-farm")//start introduction for element id='intro-farm'

introJs.start()

开始进行页面引导

1

introJs().start()

introJs.goToStep(step)

直接跳转至某步骤引导介绍

1

introJs().goToStep(2).start();//starts introduction from step 2

introJs.nextStep()

下一步引导介绍

1

introJs().start().nextStep();

introJs.previousStep()

上一步引导介绍

1

introJs().goToStep(3).start().previousStep();//starts introduction from step 2

introJs.exit()

退出引导

1

introJs().exit()

introJs.setOption(option, value)

设置单个参数

1

introJs().setOption("skipLabel","Exit");

introJs.setOptions(options)

设置多个参数

1

introJs().setOptions({'skipLabel':'Exit','tooltipPosition':'right'});

introJs.refresh()

手动刷新引导

1

introJs().refresh();

introJs.oncomplete(providedCallback)

引导结束的回调函数

1

2

3

introJs().oncomplete(function(){

alert("end of introduction");

});

introJs.onexit(providedCallback)

退出引导的回调函数。包括ESC退出以及点击引导遮罩层。

1

2

3

introJs().onexit(function(){

alert("exit of introduction");

});

introJs.onchange(providedCallback)

更换到新的引导后调用回调函数。

1

2

3

introJs().onchange(function(targetElement){

alert("new step");

});

introJs.onbeforechange(peovidedCallback)

在进行每一个新的引导操作之前调用回调函数。

1

2

3

introJs().onbeforechange(function(targetElement){

alert("before new step");

});

introJs.onafterchange(providedCallback)

在进行每一个新的引导操作之后调用回调函数。

1

2

3

introJs().onafterchange(function(targetElement){

alert("after new step");

});

参数设置

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

nextLabel:"Next →",

prevLabel:"← Back",

skipLabel:"Skip",

doneLabel:"Done",

tooltipPosition:"bottom",

tooltipClass:"",

highlightClass:"",

exitOnEsc:!0,

exitOnOverlayClick:!0,

showStepNumbers:!0,

keyboardNavigation:!0,

showButtons:!0,

showBullets:!0,

showProgress:!1,

scrollToElement:!0,

overlayOpacity:0.8,

positionPrecedence:["bottom","top","right","left"],

disableInteraction:!1