架构成长之路!

Intro.js网站交互引导插件

前沿技术 admin 473℃ 0评论

原文地址:http://www.xuanfengge.com/interactive-guide-intro-js-website-plugins.html

Intro.js

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

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

官网:http://usablica.github.io/intro.js/

dfbdfsbdsfbhdf

如何使用

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

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

cdnjs:https://cdnjs.com/#q=introjs

jsDelivr:http://www.jsdelivr.com/#!intro.js

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

例如:

其他属性:https://github.com/usablica/intro.js/#attributes

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. 运行函数

API

introJs([targetElem])

创建introJs对象

  • introJs() //without selector, start introduction for whole page
  • introJs(“#intro-farm”) //start introduction for element id=’intro-farm’

introJs.start()

开始进行页面引导

introJs.goToStep(step)

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

introJs.nextStep()

下一步引导介绍

introJs.previousStep()

上一步引导介绍

introJs.exit()

退出引导

introJs.setOption(option, value)

设置单个参数

introJs.setOptions(options)

设置多个参数

introJs.refresh()

手动刷新引导 

introJs.oncomplete(providedCallback)

引导结束的回调函数

introJs.onexit(providedCallback)

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

introJs.onchange(providedCallback)

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

introJs.onbeforechange(peovidedCallback)

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

introJs.onafterchange(providedCallback)

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

参数设置

转载请注明:架构之路 » Intro.js网站交互引导插件

   

您的支持将鼓励我们继续努力!

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

喜欢 (2)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址