当一个网站或者一个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. 尝试dapper和postgresql

    大多数地方和其他数据库(MySQL)没有什么不同.只有几点要注意: 1.PostgreSQL表名和字段是区分大小写的,大小写不对会说字段不存在 2.插入Json数据时,要在字符串后面加上::json ...

  2. [模板] 虚树 && bzoj2286-[Sdoi2011]消耗战

    简介 虚树可以解决一些关于树上一部分节点的问题. 对于一棵树 \(T\) 的一个子集 \(S\), 可以在 \(O(|S| \log |S|)\) 的时间复杂度内求出 \(S\) 的虚树. 虚树包括根 ...

  3. [洛谷P2107] 小Z的AK计划

    题目类型:贪心,堆 传送门:>Here< 题意:给出\(N\)个房间,每个房间距离起点的距离为\(x[i]\),每个房间可以选择进去和不进去,如果进去了那么要\(t[i]\)秒后才能出来. ...

  4. sqlite 数据库 boolean类型的小小测试

    根据官方文档的介绍: SQLite does not have a separate Boolean storage class. Instead, Boolean values are stored ...

  5. python xpath学习

    一.选取节点: 二.谓词: 注意:在scrapy中用xpath进行搜索时,如果使用相对路径,要加上.,如,不然搜索的是整个文档.

  6. 忘掉Ghost!利用Win10自带功能,玩转系统备份&恢复 -- 系统重置

    之前几篇介绍的如何备份.恢复系统,在遇到问题的时候可以轻松应对. 如果系统出现问题,还可以正常启动,但是之前没有备份过系统,那该怎么办? 碰到这种问题,可以使用Win10系统的“系统重置”功能: 按照 ...

  7. Python常用模块-时间模块

    在写代码的过程中,我们常常需要与时间打交道,在python中,与时间处理有关的模块有time,datetime和calendar.,这里主要介绍time和datetime模块 在python中,表示时 ...

  8. 第十三节: EF的三种模式(三) 之 来自数据库的CodeFirst模式

    一. 简介 [来自数据库的Code First模式]实质上并不是CodeFirst模式,而是DBFirst模式的轻量级版本,在该模式中取消了edmx模型和T4模板,直接生成了EF上下文和相应的类,该模 ...

  9. [物理学与PDEs]第1章习题2 均匀带电球面的电场强度与电势

    设有一均匀分布着电荷的半径为 $R$ 的球面, 其电荷密度 (即单位面积上的电荷量) 为 $\sigma$. 试求该球面所形成电场的电场强度及电势. 解答: 设 $P$ 距圆心的距离为 $r$, 不妨 ...

  10. jQuery UI弹出新窗体

    借助jqueryUI 的Dialog 在隐藏的div中嵌入Iframe  改变iframe的路径 如果项目经常用到弹出新窗体,则利用模板,把此代码和html 放入父页面中,实现父级调用, <in ...