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

梦里梦外; 2021-12-22 09:17 360阅读 0赞

当一个网站或者一个Web应用推出新功能时，为了让用户了解你的站点（或应用）如何操作，往往都会在站点（应用）中添加一个分步指引的效果。然而这样的效果，对于不懂原生JS的同学来说，是件很头痛的事情。  
  
下面为大家介绍一些可帮助你实现分步指引效果的jQuery插件，你可以根据自己需求定制，它们都具有一个时尚的外观，而且简单易用。  
  
**1. [Intro.js][]**  
  
Intro.js 使用一种引导式的方式来一步步介绍你网站和项目新特性。支持键盘+鼠标的导航方式。

![0bf3a423-4a1b-3a58-bb0d-d4de2965f464.gif][]

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

![ba1b323f-ec35-3502-af89-d337794b81fe.jpg][]

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

![df664baf-9695-36fa-bde1-1c8255eaa0dd.jpg][]

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

![7226eceb-a1d9-3dba-970a-5bb2bebfd6ac.jpg][]

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

![4f028cf0-630b-3563-9eeb-ec32f7d030a3.jpg][]

**6. [Bootstro.js][]**  
  
这个是Intro.js的Bootstrap版本。

![576775e1-85a0-30c0-b9a5-429335eae613.jpg][]

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

![9f37e88b-f548-389b-b5c3-ee4e2b1637f9.jpg][]

**8. [jQuery Site Tour][]**  
  
这个插件拥有许多的选项来定外观和步骤之间的延迟，设置要初始显示的项目，等等。

![0b4d77e3-195c-3b64-9d69-c64b0d4a907e.gif][]

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

![9fdf1877-031a-3167-a967-1d6e4a7291dd.jpg][]

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

![8ecce8ed-976a-344c-b773-6bff77829131.gif][]

**11. [Crumble][]**  
  
Crumble采用冒泡的界面，所有的步骤定义在一个有序的列表。

![150c6c19-a0b0-3634-94f1-ee00ed0ba926.gif][]

*转自：http://www.iteye.com/news/27626*

转载于:https://www.cnblogs.com/JoannaQ/p/3422561.html

[Intro.js]: http://usablica.github.io/intro.js/
[0bf3a423-4a1b-3a58-bb0d-d4de2965f464.gif]: /images/20211220/8ff1d890883c4380922ef6b507355aa5.png
[aSimpleTour]: http://alvaroveliz.github.io/aSimpleTour/
[ba1b323f-ec35-3502-af89-d337794b81fe.jpg]: /images/20211220/655d8123a649413a940ce87c60d2aceb.png
[Pageguide.js]: http://tracelytics.github.io/pageguide/
[df664baf-9695-36fa-bde1-1c8255eaa0dd.jpg]: /images/20211220/966fa3e6877849299f3a59dc7135810b.png
[Joyride]: http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin
[7226eceb-a1d9-3dba-970a-5bb2bebfd6ac.jpg]: /images/20211220/d0a01e6a0fbb467d8cf3b4443b09818a.png
[Website Tour]: http://tympanus.net/codrops/2010/12/21/website-tour/
[4f028cf0-630b-3563-9eeb-ec32f7d030a3.jpg]: /images/20211220/33222ebc5db04ca08bbe55c6d4a91702.png
[Bootstro.js]: http://clu3.github.io/bootstro.js/
[576775e1-85a0-30c0-b9a5-429335eae613.jpg]: /images/20211220/f717a17c099046b686f737d93f11d3bb.png
[Bootstrap Tour]: http://sorich87.github.io/bootstrap-tour/
[9f37e88b-f548-389b-b5c3-ee4e2b1637f9.jpg]: /images/20211220/2b6950e030584b1588939c586b8fb775.png
[jQuery Site Tour]: http://jquerytour.com/
[0b4d77e3-195c-3b64-9d69-c64b0d4a907e.gif]: /images/20211220/9c0a221d0c144293b53bfd7def42657b.png
[jQuery TourBus]: http://ryanfunduk.com/jquery-tourbus/
[9fdf1877-031a-3167-a967-1d6e4a7291dd.jpg]: /images/20211220/98f966df7dbe48419cb55a340e3ce582.png
[Trip.js]: http://eragonj.github.io/Trip.js/
[8ecce8ed-976a-344c-b773-6bff77829131.gif]: /images/20211220/1ccb967dfcfa4675b95c5b5b8994a149.png
[Crumble]: http://tommoor.github.io/crumble/
[150c6c19-a0b0-3634-94f1-ee00ed0ba926.gif]: /images/20211220/b27ad548c8a44346b93e036a9e40fbf6.png