轩枫阁

首页 / Web前端 / 授人以渔 / JQuery / Intro.js网站交互引导插件

Intro.js网站交互引导插件

Intro.js

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

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

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

dfbdfsbdsfbhdf

如何使用

1. 引入插件 intro.jsintrojs.css 的文件。

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

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

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

2. 在HTML标签添加 data-introdata-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.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网站交互引导插件 - 轩枫阁

转载请务必注明出处,欢迎分享

如果觉得我的文章对您有用,欢迎打赏
赞  赏
赞赏作者 urnotivan
¥ 6.66
换个金额 使用微信扫一扫赞赏
  • 6.66
  • 8.88
  • 16.8
  • 2.33
  • 52.0
  • 20.0
  • 自定义
  • 10.0
115/470
117/470

相关阅读

文章评论

  • 强烈支持,博主万岁!

  • 值得收藏…

  • 加油啊!!!!顶哦!!!!!

  • 弱弱问下博主,站点左侧的浮动导航非常不错,使用的模板自带功能还是其它什么插件?不介意的话有机会是否可以和大家分享一下下? ^_^

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子