11个非常棒“jQuery的网站导航插件”用于指导用户使用网站新功能

jopen 11年前

当一个网站或者一个Web应用推出新功能时,为了让用户知道你的站点(或应用)如何操作?为了让你的用户有更好的体验。往往这个时候都会给你的站点(应用)添加一个分步指引的效果。然而这样的效果,对于不懂原生js的同学来说,是件蛮头痛的事情。下面为大家介绍这样一些jQuery插件帮助你实现分步指引的效果,你可以根据自己需求定制,更强的是他们都具有一个时尚的外观效果,而且简单易用。

Intro.js

11个非常棒“jQuery的网站导航插件”用于指导用户使用网站新功能

Intro.js 使用一种引导式的方式来一步步介绍你网站和项目新特性。支持键盘+鼠标的导航方式。

aSimpleTour

11个非常棒“jQuery的网站导航插件”用于指导用户使用网站新功能

aSimpleTour 使用JSON数据进行存储配置和内容。

一个浮动窗帮助管理重点元素游览,工具提示可以定位

Pageguide.js

11个非常棒“jQuery的网站导航插件”用于指导用户使用网站新功能

PageGuide. js 是一个利用jQuery 与 CSS3实现的交互式可视化网页向导组件,通过 PageGuide.js 可制作出友好的帮助提示。

Joyride

11个非常棒“jQuery的网站导航插件”用于指导用户使用网站新功能

Joyride是一个jQuery插件,可以利用它来创建一个引导用户如何操作网站功能的向导。通过定义一个操作步骤顺序,这个插件会在需要操作的HTML元素旁边显示一个帮助说明的Tooltips。

Website Tour

11个非常棒“jQuery的网站导航插件”用于指导用户使用网站新功能

一个简单,但实用的插件。所有明细和内容都定义在JS中。它还提供选项来定tooltips的位置和颜色。

Bootstro.js

11个非常棒“jQuery的网站导航插件”用于指导用户使用网站新功能

这个是Intro.js的Bootstrap版本。

Bootstrap Tour

11个非常棒“jQuery的网站导航插件”用于指导用户使用网站新功能

这个jQuery网站导航在Bootstrap Popovers中加载内容。

导航步骤和内容都定义在JavaScript中,它拥有许多的选项来定义其行为。

jQuery Site Tour

11个非常棒“jQuery的网站导航插件”用于指导用户使用网站新功能

这个插件拥有许多的选项来定外观和步骤之间的延迟设置初始显示项目等等

jQuery TourBus

11个非常棒“jQuery的网站导航插件”用于指导用户使用网站新功能

这个插件采用CoffeeScript+Less + CSS开发。

jQuery TourBus 非常易于定制,可手动显示其他步骤自动播放

函数来获得当前步骤或者显示特定的一个步骤
</div>

Trip.js

11个非常棒“jQuery的网站导航插件”用于指导用户使用网站新功能

所有用引导的步骤和内容都定义在JS中,它拥有一个完整的API,支持callbacks, keyboard。并能够自定义外观。

Crumble

11个非常棒“jQuery的网站导航插件”用于指导用户使用网站新功能

以一种不同的可视化方式来引导用户浏览网站。

Crumble使用采用冒泡的界面,所有的步骤定义在一个有序的列表