Intro.js:网站功能操作分布引导插件(附中文独家使用教程)

现在如果你是第一次访问Jeff的阳台的首页,你会发现会出现如下图的一个“导游”界面。这个就是使用Intro.js 这个javascript 插件制作的。在当初接触的时候,我发现网络上根本没有个中文使用教程,还是一点点啃下readme 文件才知道怎么用,接下来我将为各位介绍一下这个插件的使用方法——中文独家使用教程。

Intro.js 简介

分步指南用于向首页使用网站或者移动应用添加漂亮的分布指南效果,你在渣浪微博、扣扣空间上可能看过类似的。Intro.js 作为一个网站功能操作分布引导插件,支持使用键盘的前后方向键导航,使用 Enter 和 ESC 键退出指南。支持 Chrome、Firefox、Safari 浏览器以及部分IE 浏览器。

项目地址:项目主页 GitHub 例子:官方演示  Jeff的阳台(非第一次访问请清空cookie 再访问)

Intro.js 使用教程(中文版本,独家发布)

基础教程

首先是下载压缩包,里面有两个文件最重要:intro.js 跟introjs.css。引入到你的网页中(路径请自行修改,下同):

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

相信你也懂的啦,一般那,css放在头部、js放在页脚。然后,先给个html 代码:

<span data-step="1" data-intro="欢迎来到新版Jeff的阳台!<p>下面为你介绍一下新版面特征。</p><p>键盘快捷键:&rarr;</p>" data-position='bottom'></span>

data-step 表示步骤顺序,data-intro 表示显示的内容, data-position 表示文本框的相对位置,比如下图的是 data-position='top' data-position可以可以不写,默认为bottom。

上面的最好是在一个html元素(elements)里面,如div或者span,相对应着那部分的前端内容。

要布置分布引导,就这样从 data-step从1 到最后,该插件会自动为访客一步步引导下去。

当然,最不能缺少的一步是激活插件,下面的代码:

<script type="text/javascript">introJs().start();</script>

just do it!

PS:貌似该插件还可以通过自定义javascript 代码以绑定元素的方法来实现同样的效果,在此我不深究了,我也不是很清楚。

高级教程(部分)

跳步介绍——比如说要从第二步开始,那么激活代码就是:introJs().goToStep(2).start();

停止向导(不启用插件)——introJs().exit()

设置反馈——比如说想要在结束向导后提示某些文字,可以使用以下代码:

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

设置反馈(非常规退出)——如果访客是直接用`ESC`键或者点击阴影区域等情况退出向导的,要设置反馈,可以使用以下代码:

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

更多可以查看下载包的readme文件;如果有错误,欢迎雅正!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端儿

Fiddler使用AutoResponder进行本地文件和线上文件的映射

就捞起尘封已久的 Fiddler,既然线上的JQ加载不出来,那就做个本地文件的映射吧,使用本地的JQ库代替线上的

1041
来自专栏主机笔记

最新版chevereto3.10.5使用体验

使用chevereto图床几天之后,发现这个图床系统还是挺好用的,虽然安装简单,功能很强大。 既然是一个功能的网站,就说说他使用的体验 ? chevereto网...

5345
来自专栏君赏技术博客

写一下MAC不错的工具集

##这款软件可以很快的从当前文件夹打开控制台到当前的路径,可以防止小图标到finder的小图标,貌似现在不可以放置了

1743
来自专栏一个会写诗的程序员的博客

React Router 之 browserHistoryHistoriesHistories

前端工程采用 SPA 模式 hashHistory , 在集成到生产环境中的时候,使用browserHistory :

872
来自专栏前端布道

前端开发必备之Chrome开发者工具(下篇)

本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 本文...

31611
来自专栏FH云彩

Win8快捷键

1023
来自专栏琯琯博客

超好用的谷歌浏览器、Sublime Text、Phpstorm、油猴插件合集

一、谷歌浏览器插件 二、Sublime Text 插件 三、Phpstorm 插件 四、油猴脚本 4.1 脚本网站 4.2 自用的脚本 五、相关链接 ? 分享...

1K8
来自专栏Danny的专栏

html页面导出为pdf(jsPDF、iText、wkhtmltopdf)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

1K1
来自专栏程序你好

使用Firefox开发工具做性能审计

在本文中,我们将介绍Firefox Web开发工具(“DevTools”)——一组工具,旨在帮助开发人员检查、调试、配置和优化网站和Web应用程序的性能。我们将...

1584
来自专栏大数据挖掘DT机器学习

使用R语言挖掘QQ群聊天记录

1、获取数据 从 QQ 消息管理器中导出消息记录,保存的文本类型选择 txt 文件。这里获取的是某群从 2016-04-18 到 2016-05-07 期间的聊...

3365

扫码关注云+社区