当一个网站或者一个Web应用推出新功能时,为了让用户了解你的站点(或应用)如何操作,往往都会在站点(应用)中添加一个分步指引的效果。然而这样的效果,对于不懂原生JS的同学来说,是件很头痛的事情。
下面为大家介绍一些可帮助你实现分步指引效果的jQuery插件,你可以根据自己需求定制,它们都具有一个时尚的外观,而且简单易用。
1. Intro.js
Intro.js 使用一种引导式的方式来一步步介绍你网站和项目新特性。支持键盘+鼠标的导航方式。
![](http://dl.iteye.com/upload/attachment/0083/5293/0bf3a423-4a1b-3a58-bb0d-d4de2965f464.gif)
2. aSimpleTour
aSimpleTour 使用JSON数据进行存储配置和内容。一个浮动窗帮助管理重点元素的浏览、工具提示(可以定位)。
![](http://dl.iteye.com/upload/attachment/0083/5295/ba1b323f-ec35-3502-af89-d337794b81fe.jpg)
3. Pageguide.js
PageGuide.js 是一个利用jQuery 与 CSS3实现的交互式可视化网页向导组件,通过 PageGuide.js 可制作出友好的帮助提示。
![](http://dl.iteye.com/upload/attachment/0083/5297/df664baf-9695-36fa-bde1-1c8255eaa0dd.jpg)
4. Joyride
Joyride是一个jQuery插件,可以利用它来创建一个引导用户如何操作网站功能的向导。通过定义一个操作步骤顺序,这个插件会在需要操作的HTML元素旁边显示一个帮助说明的Tooltips。
![](http://dl.iteye.com/upload/attachment/0083/5298/7226eceb-a1d9-3dba-970a-5bb2bebfd6ac.jpg)
5. Website Tour
一个简单但实用的插件。所有明细和内容都定义在JS中。它还提供选项来定义tooltips的位置和颜色。
![](http://dl.iteye.com/upload/attachment/0083/5303/4f028cf0-630b-3563-9eeb-ec32f7d030a3.jpg)
6. Bootstro.js
这个是Intro.js的Bootstrap版本。
![](http://dl.iteye.com/upload/attachment/0083/5301/576775e1-85a0-30c0-b9a5-429335eae613.jpg)
7. Bootstrap Tour
这个jQuery网站导航在Bootstrap Popovers中加载内容。导航步骤和内容都定义在JavaScript中,它拥有许多的选项来定义其行为。
![](http://dl.iteye.com/upload/attachment/0083/5305/9f37e88b-f548-389b-b5c3-ee4e2b1637f9.jpg)
8. jQuery Site Tour
这个插件拥有许多的选项来定外观和步骤之间的延迟,设置要初始显示的项目,等等。
![](http://dl.iteye.com/upload/attachment/0083/5307/0b4d77e3-195c-3b64-9d69-c64b0d4a907e.gif)
9. jQuery TourBus
这个插件采用CoffeeScript+Less + CSS开发,非常易于定制,可手动显示其他步骤或自动播放。可通过函数来获得当前的步骤,或者显示特定的一个步骤。
![](http://dl.iteye.com/upload/attachment/0083/5309/9fdf1877-031a-3167-a967-1d6e4a7291dd.jpg)
10. Trip.js
所有用引导的步骤和内容都定义在JS中,它拥有一个完整的API,支持callbacks、keyboard,并允许自定义外观。
![](http://dl.iteye.com/upload/attachment/0083/5311/8ecce8ed-976a-344c-b773-6bff77829131.gif)
11. Crumble
Crumble采用冒泡的界面,所有的步骤定义在一个有序的列表。
![](http://dl.iteye.com/upload/attachment/0083/5313/150c6c19-a0b0-3634-94f1-ee00ed0ba926.gif)