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

时间:2021-12-29 21:16:50

当一个网站或者一个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 分步指引插件(转)
转自:http://www.iteye.com/news/27626

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. 分布式缓存技术memcached学习(三)——memcached内存管理机制

    几个重要概念 Slab memcached通过slab机制进行内存的分配和回收,slab是一个内存块,它是memcached一次申请内存的最小单位,.在启动memcached的时候一般会使用参数-m指 ...

  2. 解决DropDownList 有一个无效 SelectedValue,因为它不在项目列表中。这是怎么回事?

    产生错误原因: 绑定在DropDownList的时候 DropDownList没有对应的值 查了一下MSDN:DropDownList.SelectedValue 属性: 此属性返回选定的 ListI ...

  3. 技术QQ群

    欢迎加入moss技术交流群. 欢迎加入微信技术交流群.

  4. PHP学习之[第07讲]PHP5.4 文件操作函数 之 图片计数器的实例

    1.filetype():输出文件类型: 2.stat():获取文件的基本属性的数组: 3.clearstatcache().is_executable().isDir().idFile().scan ...

  5. Twenty Newsgroups Classification任务之二seq2sparse

    seq2sparse对应于mahout中的org.apache.mahout.vectorizer.SparseVectorsFromSequenceFiles,从昨天跑的算法中的任务监控界面可以看到 ...

  6. HTML + Javascript开发AIR应用

    HTML + Javascript开发AIR应用 目录 背景什么是AIR?环境准备运行效果开发过程目录结构应用程序描述符HTML页面调试备注 背景返回目录 断断续续用Winform和WPF开发过一些小 ...

  7. Redis的安装和使用之------Redis相关运用

    原文  http://wangzhijian.blog.51cto.com/6427016/1731962 一.简介 REmote DIctionary Server(Redis) 是一个由 Salv ...

  8. Windbg DUMP

    Windbg DUMP分析(原创汇总) 1. 引入篇 1.1 下载安装 1.2 调试器 1.3 操作界面2. 命令篇 2.1 按照来源划分 2.1.1 基本命令 2.1.2 元命令 2.1.3 扩展命 ...

  9. linux命令--ldconfig和ldd用法

    一.ldconfig ldconfig是一个动态链接库管理命令,为了让动态链接库为系统所共享,还需运行动态链接库的管理命令--ldconfig. ldconfig 命令的用途,主要是在默认搜寻目录(/ ...

  10. 黄聪:谷歌验证 (Google Authenticator) 的实现原理是什么?

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:徐小花链接:http://www.zhihu.com/question/20462696/answer/18731073来源: ...