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

1.  Intro.js

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

2.  aSimpleTour

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

3.  Pageguide.js

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

4.  Joyride

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

5.  Website Tour

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

6.  Bootstro.js

这个是Intro.js的Bootstrap版本。

7.  Bootstrap Tour

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

8.  jQuery Site Tour

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

9.  jQuery TourBus

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

10.  Trip.js

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

11.  Crumble

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

11 个超棒的 jQuery 分步指引插件的更多相关文章

  1. 11个超棒的 jQuery 分步指引插件(转)

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

  2. 四款超棒的jQuery数字化签名插件

    在浏览器中,我们有很多方式来绘制生成签名效果,并且有很多很棒很智能的jQuery插件.数字化签名是未来的发展方向,正是这个原因我们这里收集并且推荐了四款超棒的jQuery数字化签名插件,希望大家喜欢! ...

  3. 推荐10个超棒的jQuery工具 提示插件

    脚本之家 http://www.jb51.net/article/28525.htm

  4. 30 个最棒的 jQuery 的拖放插件

    jQuery 允许用户为任意 DOM 元素添加可拖放的功能,通过 jQuery 的拖放插件你可以轻松实现网页上任意元素的拖拽操作.在本文中我们向你推荐 30 个最棒的 jQuery 的拖放插件. 点击 ...

  5. 分享一款超棒的jQuery旋钮插件 - jQuery knob

    转自:http://www.cnblogs.com/gbin1/archive/2012/05/08/2489908.html 在线演示  本地下载 如果你也在寻找一款生成漂亮旋钮(knob)的jQu ...

  6. 推荐15款最佳的 jQuery 分步引导插件

    当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...

  7. jQuery 分步引导 插件

    转自:http://blog.libnav.com/js/57.html 很多时候一个网站或者一个Web应用出品,为了让你的用户知道你的站点(或应用)有些什么?如何操作?为了让你的用户有更好的体验.往 ...

  8. 20 个非常棒的jQuery内容滑动插件

    Wow Slider  WOW Slider是一款小巧易用的网页滑块设计.该软件内置大量的模版和工具,让你轻松设计出完美的视觉效果.他还可以帮助用户在短时间内创造出梦幻般的滑块,而无需编码和图像编辑, ...

  9. 一款超炫的jquery图片播放插件[Cloud Carousel]

    今天给大家介绍一个jquery图片播放插件,也可以说是一款幻灯片放映插件,它叫Cloud Carousel,支持自动播放.图片预览.鼠标滚轮滚动,非常酷,下图是效果预览. 该jquery图片播放项目演 ...

随机推荐

  1. Python——爬虫——数据提取

    一.XML数据提取 (1)定义:XML指可扩展标记语言.标记语言,标签需要我们自行定义 (2)设计宗旨:是传输数据,而非显示数据,具有自我描述性 (3)节点关系:   父:每个元素及属性都有一个父. ...

  2. Android插件化 学习

    原文:http://weishu.me/2016/01/28/understand-plugin-framework-overview/ 代码:https://github.com/tiann/und ...

  3. python之常用模块二(hashlib logging configparser)

    摘要:hashlib ***** logging ***** configparser * 一.hashlib模块 Python的hashlib提供了常见的摘要算法,如MD5,SHA1等等. 摘要算法 ...

  4. 2.3 os 模块

    目录 2.3.1 功能 2.3.2 常用方法 2.3.2.1 创建相关 2.3.2.2 切换相关 2.3.2.3 查看相关 2.3.2.4 编辑相关 2.3.2.5 删除相关 2.3.1 功能 2.3 ...

  5. Flask 蓝图,数据库链接

    蓝图 使用场景 如果代码非常多,要进行归类.不同的功能放在不同的文件,把相关的视图函数也放进去. 蓝图也就是对flask的目录结构进行分配(应用于小,中型的程序) 当然对于大型项目也可以通过   ur ...

  6. JavaWeb之商品查看后历史记录代码实现

    JavaWeb之商品查看后历史记录代码实现全过程解析. 历史记录思路图: 假设已经访问了商品 :1-2-3 那么历史记录就是1-2-3,如果访问了商品8,那么历史记录就是:8-1-2-3,如果再次访问 ...

  7. Kibana登录认证设置

    Kibana从5.5开始不提供认证功能,想用官方的认证,X-Pack,收费滴 . 所以就自己动手吧,用nginx的代理功能了. 1.安装Nginx: [root@ELK /]# yum -y inst ...

  8. null引用,有时候是实现了父类的方法,方法体没写任何实现

    null引用,有时候是实现了父类的方法,方法体没写任何实现 /* @Override public void attachView(MonthListContract.View view) { } * ...

  9. (二分查找 拓展) leetcode 69. Sqrt(x)

    Implement int sqrt(int x). Compute and return the square root of x, where x is guaranteed to be a no ...

  10. PHP中ajax返回数据类型为JSON数据的处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...