jQuery引导插件intro.js

jQuery引导插件intro.js

更新: 2015-11-8

阅读:1292

开源:GitHub

引导插件工具对于提高你的网站的整体用户体验真正有用,将引导您轻松创建网站的指引功能。比如网站的新手引导、业务提示、功能提示,使用也非常简单。

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

插件安装

将intro.js 跟introjs.css 引入到你的网页中

如何使用

页面分布引导的元素设置:添加 data-intro 和 data-step 到HTML 元素中.

例如:


<div id="demo" data-step="1" data-intro="这里是分布引导的内容……" data-position="right">
这里出现第一步引导
</div>
<div id="demo" data-step="2" data-intro="这里是分布引导的内容2……" data-position="right">
这里出现第二步引导
</div>


data-intro 表示显示的内容,data-step 表示步骤顺序, data-position 表示文本框的相对位置(可选:top,left,right,bottom,bottom-left-aligned,bottom-middle-aligned,bottom-right-aligned。默认为 bottom)

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

当然,最不能缺少的一步是激活引导插件:


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


以上是最基本的实现方法,还有其他高级功能(进度条效果、多页面引导等等)DEMO里面都有就不一一介绍了