mj19910923的gravatar头像
mj19910923 2014-09-23 15:29:49
11 个超棒的前端分步指引jquery插件代码介绍

当一个网站或者一个Web应用推出新功能时,为了让用户了解你的站点(或应用)如何操作,往往都会在站点(应用)中添加一个分步指引的效果。然而这样的效果,对于不懂原生JS的同学来说,是件很头痛的事情。

下面为大家介绍一些可帮助你实现分步指引效果的jQuery插件,你可以根据自己需求定制,它们都具有一个时尚的外观,而且简单易用。

1.  Intro.js

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

11 个超棒的前端分步指引jquery插件代码介绍
2.  aSimpleTour


aSimpleTour 使用JSON数据进行存储配置和内容。一个浮动窗帮助管理重点元素的浏览、工具提示(可以定位)。
 

11 个超棒的前端分步指引jquery插件代码介绍



3.  Pageguide.js

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

11 个超棒的前端分步指引jquery插件代码介绍



4.  Joyride

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

11 个超棒的前端分步指引jquery插件代码介绍



5.  Website Tour

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

11 个超棒的前端分步指引jquery插件代码介绍



6.  Bootstro.js

这个是Intro.js的Bootstrap版本。
 

11 个超棒的前端分步指引jquery插件代码介绍



7.  Bootstrap Tour

这个jQuery网站导航在Bootstrap Popovers中加载内容。导航步骤和内容都定义在JavaScript中,它拥有许多的选项来定义其行为。
 

11 个超棒的前端分步指引jquery插件代码介绍



8.  jQuery Site Tour

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

11 个超棒的前端分步指引jquery插件代码介绍



9.  jQuery TourBus

这个插件采用CoffeeScript+Less + CSS开发,非常易于定制,可手动显示其他步骤或自动播放。可通过函数来获得当前的步骤,或者显示特定的一个步骤。
 

11 个超棒的前端分步指引jquery插件代码介绍



10.  Trip.js

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

11 个超棒的前端分步指引jquery插件代码介绍



11.  Crumble

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

11 个超棒的前端分步指引jquery插件代码介绍


打赏
最近浏览
youyou0805  LV8 2021年7月5日
182money  LV12 2020年4月11日
zhaodidada 2020年2月11日
暂无贡献等级
luohaipeng  LV23 2019年12月3日
酒瓯224656565 2019年10月14日
暂无贡献等级
天才不常有  LV9 2019年7月25日
流月九思  LV1 2019年4月10日
cdfengpo520  LV1 2019年3月22日
nanweiq  LV7 2019年1月15日
蓝树叶  LV6 2018年9月13日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友