十大最佳Tour(网站指南)Javascript和jQuery插件 _Web开发

本文概述

10. Anno
9. jQuery guide
8. aSimpleTour
7. Pageguide
6. Bootstro.js
5. Hopscotch
4. Enjoyhint
3. Intro.js
2. Shepherd
1. Bootstrap Tour
Driver.js

你是否曾经访问过网站或Web应用程序, 因为这是你第一次来这里, 而你对Jhon Travolta的感觉却不是最遥远, 如何开始使用它？

文章图片
如果你是网络开发人员, 则可能希望避免用户创建某种类型的指南视频或说明充分的文档来避免这种体验。但是, 有些用户不会读文档或观看视频, 因为没有时间, 他们只是想使用你的应用程序！对于这类用户(占90％的用户), 你可以在他们学习使用应用程序的同时使用动态网络浏览。你可以通过在应用中使用Guided Tour插件来实现此功能。
在本篇文章中, 我们将与你分享VanillaJS和jQuery制作的10个最佳导游插件。
10. Anno Github

文章图片
Anno是功能强大的网络应用程序的分步指南插件。 Anno.js被构建为可扩展的, 其来源是大约500行的识字咖啡脚本；你可以在几分钟内阅读带注释的来源。
9. jQuery guide Github

文章图片
jQuery Guide是一个jQuery插件, 旨在为你的Web应用创建” 如何使用指南” 。它使用jQuery动画为用户学习如何使用你的应用程序时提供了流畅而美好的体验。
8. aSimpleTour Github

文章图片
aSimpleTour是一个jQuery插件, 可以帮助你轻松进行网站浏览。
7. Pageguide Github

文章图片
Pageguide是一个插件, 可使用jQuery和CSS3为网页元素创建交互式指南。不用添加静态帮助消息或说明性文本来使界面混乱, 而是添加一个页面指南, 并让你的用户了解新功能。 Pageguide带有一个示例实现(文件在/ example中), 你可以使用Grunt在本地运行。
6. Bootstro.js Github

文章图片
Bootstro向你的用户显示页面内容的导览。特别是对于初次使用的用户。 Bootstro需要bootstrap＆bootstrap popover, 只需将.bootstro类添加到要突出显示的任何元素中, 然后包括bootstro.js和bootstro.css并开始使用Javascript bootstro.start()。
可以介绍页面上任何位置的任何元素：弹出窗口会自动滚动到, 因此它们始终可以集中注意力。该插件易于自定义, Bootstro提供了各种公共方法, 因此你可以像bootstro.start(), bootstro.next(), bootstro.prev()一样进行控制。
5. Hopscotch Github

文章图片
Hopscotch是一个框架, 使开发人员可以轻松地向其页面添加产品浏览。 Hopscotch接受一个游览JSON对象作为输入, 并为开发人员提供一个API, 以控制渲染游览显示和管理游览进度。Hopscotch通过游览配置中的i18n对象支持国际化。默认语言是英语。如果你需要使用英语以外的其他语言的游览, 请在游览配置中传递翻译后的文本。可以翻译用于上一个, 下一个, 跳过, 完成和关闭按钮的文本以及巡回步骤编号。
Hopscotch之旅包括一个旅行ID, 一组定义为JSON对象的旅行步骤以及一些特定于旅行的选项。游览ID只是一个唯一的标识符字符串。最简单的游览仅由一个ID字符串和一个或多个步骤组成的数组组成。该插件是由LinkedIn的家伙创建的。
4. Enjoyhint Github

文章图片
创建免费的网络工具, 以最简单的方式指导用户浏览网站或应用。它提供了一种极好的方式来创建带有提示和技巧的交互式教程, 并将其嵌入到你的Web应用程序中, 从而增强其可用性和价值/有效性。 EnjoyHint添加了简单的提示, 提示用户直观, 轻松地浏览网站或应用程序。随着用户进入新领域, 它还具有即时自动聚焦突出显示功能。
我们在使用Webix JavaScript UI库创建的问题跟踪器演示中演示了EnjoyHint Web工具的用法。该工具本身基于Javascript, HTML5和CSS。该工具在客户端上运行, 并且可以与任何服务器端平台一起使用。 EnjoyHint的主要功能：

快速的网络工具设置
简单的初始化和配置
交互式提示-即时提示, 向用户提供有关他们所在领域的描述
连贯动作的场景-允许为所有必要步骤添加提示序列
自动聚焦突出显示-涉及在与提示相关的区域上自动聚焦, 并在提示加载时立即突出显示
定义形状-定义突出显示区域的形状和边距
超时设置-允许设置突出显示元素之前的延迟
提示履历, 从停止的步骤重新开始显示提示
以不同的动画速度自动滚动到突出显示的元素。
跨浏览器支持(Chrome, FireFox, IE10 +, Safari)
支持Android, iOS和Windows触摸屏(笔记本电脑和平板电脑)

3. Intro.js Github

文章图片
Intro.js是你的网站的分步指南和功能介绍插件。当新用户访问你的网站或产品时, 你应该使用分步指南来演示你的产品功能。即使在开发产品并向产品添加新功能时, 你也应该能够使用用户友好的解决方案向用户展示它们。开发Intro.js的目的是使Web和移动开发人员可以轻松地创建分步介绍。
【十大最佳Tour(网站指南)Javascript和jQuery插件】Intro.js没有依赖关系, 只有10KB的JavaScript和2.5KB的CSS, 很小而又很小, 只有在Google Chrome, Mozilla Firefox, Opera, Safari甚至Internet Explorer上都可以运行。
2. Shepherd Github

文章图片
Shepherd是一个JavaScript库, 用于引导用户浏览你的应用。它使用另一个开放源代码库Tether来定位所有步骤。系链可确保你的脚步永远不会离开屏幕或因溢出而裁剪。尝试调整浏览器的大小, 以了解我们的意思。
Shepherd可在IE9 +和所有现代浏览器中使用。
1. Bootstrap Tour Github

文章图片
Bootstrap Tour是一个插件, 可以使用著名的Bootstrap Framework在你的网站上进行动态的动态导览, 但是, 如果你不使用Boostrap, 则可以毫无问题地使用独立版本。该插件是向人们展示如何通过Bootstrap Popovers使用你的网站的最简单方法。
Driver.js Github

文章图片
Driver.js是一种轻量级, 无依赖性的原始JavaScript引擎, 可在页面上吸引用户的注意力。驱动程序与所有主要浏览器兼容, 并且可以满足你的任何叠加需求。功能介绍, 焦点转移器, 号召性用语只是几个示例。
如果你知道另一个很棒的Tour插件可以向用户显示网站, 或者你正在开发自己的Tour插件, 请不要害羞并在评论框中与社区共享。