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

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 条评论
登录 后参与评论

相关文章

  • 续:WordPress 文章图片部署真正的懒加载(Lazy Load)

    几天前分享了《WordPress 中部署真正的懒加载(Lazy Load)》一文,教会了大家在WordPress 中的两个地方部署懒加载:缩略图、头像图片。今天...

    Jeff
  • WordPress在RSS Feed 中输出自定义特色图像(缩略图)

    估计不少网友是在了解到Google Reader 关闭的消息后才知道RSS这种东西的,本站DeveWork. com 曾经有过《WordPress在RSS Fe...

    Jeff
  • 【DeveMobile实例】d3.js 与Trianglify 制作SVG格式Low-Poly 特效

    在升级了DeveMobile 主题的时候Jeff 也顺便将主题主页进行了更新,访问主页你会看到首屏的Low-Poly 背景(每次刷新都不同),这个效果就是利用了...

    Jeff
  • 山海传说ai 设计

    一 城镇ai: 1.1 任务npc ai:当鼠标指向时,npc头顶会出现名字。并高亮显示npc模型。鼠标移开 后npc恢...

    李海彬
  • 15 个 Linux 神器,你会用几个?

    mycli:mysql客户端,支持语法高亮和命令补全,效果类似ipython,可以替代mysql命令。

    Java技术栈
  • 两天了解scala

    最前面的话 因为spark的源语言是scala,所以,为了看懂spark的操作并且为了以后看spark源码做准备,先看scala还是很有必要的。另外这里主要是看...

    用户1148523
  • 学习笔记:深度学习与INT8

    越来越精确的深度学习模型面临两大挑战:计算密度越来越高;存储带宽越来越大。解决此问题的可行方法之一就是降低数据位宽。这是因为较低的数据位宽可以有效降低计算密度,...

    Lauren的FPGA
  • 基于System Generator的数字滤波器(Simulink验证+Block设计+FPGA的仿真验证)

    首先打开System Generator 2018.2,不清楚咋打开的可以看下我前两天发的,等待MATLAB启动完成后,再打开simulink并且建立一个空白模...

    狂人V
  • GEO数据库可能遇到的问题 (一)

    昨天介绍完GEO2R之后其实该和大家说一下富集分析相关的东西了(昨日链接:GEO2R差异表达分析软件)。但是,由于GEO数据库里面的数据种类比较多...

    匹咔球
  • LIME:一种解释机器学习模型的方法

    用户1737318

扫码关注云+社区

领取腾讯云代金券