1. Intro.js

介绍

Intro.js 由于其用户友爱的解决方案而被广泛运用，并具有1.9万个GitHub star。其最重要的功能是：

  1. 无依靠项：不需求任何其他依靠项
  2. 体积小，速度快：体积较& % l小，因} ` y { % g c X W而引导进程顺畅– f o ^ t B而直观。JavaScrio l ^ A v q Wpt文件的总巨细为10KB, CSS为2.5KB。
  3. 用户友爱：导航是用户友爱的，并供给可根据您的喜爱挑选的各种主题。
  4. 浏览器兼容性：可在一切首要浏览器上运用，例如Google Chrome，Mozilla Firefox，OpeC e a $ + % nra，Safari和Internet Explorer。
  5. 文档：文档十分超卓，其间包含要介绍的每个元素的示例。

Intro.js地址：Intro.js

怎么装置

要运用Intro.js，您需求装置npm和Node.js。或许，您能够从以下方位获取Intro.js：

  • 它的GitHub存储库：运用 git clone github.com/usablica/in…
  • 运用 boe 3 b o Q Mwer
bower install intU ( g l  @ c T _ro.js -x } q + f h N 1 C save
  • 运用 NPM
npm install intro.js - save
  • CDNs (jsdeliver.com, cdnjs.com)

怎么运用

一旦装置了intro.js，只需三个简略的过程即可将其增加到项目中：

  1. 将JS和CSS文件（intro.js和intrZ z 6 i Iojs.css）增加到您的项目中。x ) B u O q假如需求[ g 6 ] l – $从右到左的言语支撑，还能够增加introjs-rtl.min.cs^ ^ 6 ns。
  2. 将特点data-intro和data-step增加到相关的HTML元素中。这将为特定元素启用intm ~ i 1 wro.js。
  3. 调用以下JavaScript函数：
introJs().start(_ . c 3 d);

运用以下附. c i . p加参数在特定元素或类上调用Intr? j 4 # O Oo.js。

inz + R rtroJs(".introduction-farm").start();

2.Shex D 3 S v Qpherd

Shepherd有8.1k GitHub星，其网站演示了它的工作原理。其首要功能如下：

  • 可访问性：供给键盘导航支撑，符合a11y规范，而且还运用JavaScript启用DOM元素内部的焦点捕获。W a E g p r 2
  • 高度可定制：答应在不影响性能的情况下更改外观。
  • 能够很容易地嵌入到项意图前端结构中。
  • 文档：文档涵盖了装置和自定义: P V l ? m p W，包含项意图主题和款式。

Shepherd地址| A . b u w j w：shepherdjs.dev/

怎么装置

Shepherd与许多首要的前端结构集成在一同，并供给了p W 0 P $ L / P以下包装器以便利运用：

  • Angular：angular-shepherd是一个Angular包装器，与Angular 8+兼容。
  • Ember：ember-shepherd是一个ember包装器，已经过Ember.js> = v3.8进行了测验，而且与Ember CLI v12.3兼容。
  • R– ] | J ~ Heact：react-& m 2 J 4shepherd是一个React包装器。r s v 9 / b X m
  • Vue：vue-shepherd是Vue包装器。

您能够运用npm或yarn直接装置这些包装器：

npm install shepherd./ ` tjs -save
yarn add shepherd.js

也能够经过CDN的JsDeliver直接将其拉出：

<script src="https://cdn.jsdelivr.net/npm/shepherd.js@5.0.1/dist/js/shephd ) Z , verd.js"></script>

怎么运用

一旦装置了Shepherd，就能够引进CSS和JS文件，如下所示：

<link rel="stylesheet" href="shepherd.js/dist/css/sheW 6 ` J M a O ~ |pherd.G Q r X s &  5csT A ts"/>
<script src="shepherd.js/dist/js/shepherd.min.js"></script>

下面是一个创立Shephe= , U I urd之旅并增加带有DOM元素的过程的示例。

const tour = new Shepherd.Tour({
defaultStepOptions: {
cancelIcon:J = F {
enabled: true
},
claq , q ? :sses: 'class-1 class-2',
scrollTo: { behaviorH y f o r s ; Z: 'smooth', block: 'center' }
}
});
tour.addStep({
title: 'Creating a Shepherd Tour',
text: `Creating a Shepherd tourE y - j - is easy. too!
Just create a `Tour` instance, and add as many steps as you want6 L P z 6 E = ? *.`,
attachTo: {
element: '.hero-example',
on: 'bottom'
},
buttons: [
{
action() {
returnh 1 ^ ^ * this.b: e t Z @ - ( $ack();
},
classes: 'shepherd-button-secondary',
text: 'Back'
},
{
action() {
return this.next();
},
text: '/ 7 ; D 0 8 CNext'
}
],
id: 'creatinp G h 4 8 % ^ 5 =g'
});
tour.start();

3.Bootstrap Tour

Twitter Bootstrap经过Bootstrap Tour供给了自己的免费导览完成，GitHub上$ 9 E = ; h具有4,315个星。

引导弹出窗口易于构建。这是用X Q u于引导程序的根据jQuerG H ( S N f G _y= t c P 的插件， ] f D !并运用DOM和JavaScript配置的功能来构建导览。就像增加JS和CSS文件相同简略，并供给了具体深化的文档。

Bootstrap Tour地址[ U W K ` x 6 @ E：bootstraptour.com/

怎么装置

您能够简略地运用bootstrap; & e的CN U I h h X ! MSS和JS文件：

<link href="b] { 9 s p 6 : Xootstrap.min.css" rel="stylesheet">
<link href="bootstrap-tour.min.css" rel="stylesheet">
..o ? I p i f S l.
<script src="jquery.min.js"></script>
<scrip# P * S ` .t src="bootstrap.min.js"></script>
<sL + Z r m x 6 *cript src="bootstrap-tour.min.js"></script>

或运用独立的CSS或JavaScript文件：

<link href="bootstrap-E L ^ [ ~ wtour-standalone.min.css" rel="stylesheet">
...
<script src="jquery.min.js"> } F M 2 E v 4</script>
<script src="bootstrap-touh ~ b f g r i & Xr-standalone.min.js"></script>

怎么运用

初始设置后，您能够创立导览的实例，并增加具有元素具体信息的过程，如下所示：

// Instantiate the tour
var tour = new Tour({
steps: [
{
element: "#my-element",
title: "Title of my step",
content: "Content of my step"
},
{
element: "#my-other-element",
titl^ * Q u r 8 / G ;e: "Title of my step",
c- X $ fontent: "Content of my step"
}
]})5 _ H E W I + I F;
// Initialize the tour
tour.init();
// Start the tour
tour.start();

4W z i q r g ` O (.Chardin.js

它运用JQuery插件显现指令，GitHub页面包含阐明和文档，并具有4.9kT S Z % 1 3 E x GitHub star。

Chardin.` y ^ ajs地址：heelhook.github.io/chardin.js/

怎么装置

您能够 fork Gith S K HHub存储库或下载所需的CSS和JS文件 chardinjs.css和 chardinjs.min.js并将它们增加到HTML页面。

<link href="chardinjs.css" rel="styleshe? Q f ] V d o C $et"&W & V { J o { P ]gt;
<script src="chardinjs.min.js"></script>

怎么运用

设置后，您能够向文档中增加阐明，以下是向图画元素增加指令的示例。data-intro设置要显现的z g q A 7文本，数据方位决议文本的方位。

<img src="img/chardin.png" data-intro="Ax ` W l cn awesome 18th-century7 ? R pai` = M 5 O U F ?nter, who foun ] Z . y _d beauty iM z ]n eve1 ] = ! R - oryday, common things." data-position=3 5 E Y ("right" />

要以次序形式运转Chardin，您需求运用不同的指令，例0 C m F g Y j如data-chardin-sequenc5 | & Q 7 }ed =“ true”，data-chardin-auto =“ true”和data-chardin-dela* W 6 W Dy =“ 100”来主动显现指令经过l ; m z i元素的运动。

<body data-chardin-sequenced="tQ u H +rue" data-chardin-auto="false" data-chardin-delay="800" >

一旦这些元素与指令一同预备y d E g G c好了，您就能够经过单击按钮来初始化库，或许让它主动运转，库也能够被限制在一个特定的容器中。

$('body').chardinJs();
$('body').on('click', 'button[data-toggle="chardinjs"]', function (e) {
e.prev5 + x - L $ 5 %entDefault();
return ($('bod~ : 8 Z S G ey').data('chardinJs')).toggle();
});
// Run Explicitly
$('body').chardinJs('staD s i V K H / Lrt')
// Confine toV ` s 8 $ container
$('.container').chardinJs('start')

Chardin.i O t y djs 答应您改写覆盖层，还供给了结构选项来指定包含文本的URL作为JSON目标，能够将其显现为指令。

5.PageGuide

PageGuide是一个根据jQuery和CSS3的交互* D b m式、动态和单页应用程序的智能攻略。

Pageguide地址：tracelytics.githu7 % 9 3 ^ & x ^b.io/pageguideD e ] r Q/

您能够经过以下四种办法之一装置PageGuide：

  • 从GitHub下载最新版别
  • 克隆库房J b 5 ` v h：git clone github.com/tracelytz ( | j M m f 4ics…
  • 用Bower装置
bower install pageguiB b *de
  • 运6 H r A用npm装置
npm install pageguide
grunt server

对于初始设y I d & e置，请增加pageguide.js和CSS文件，如下所示：

<script src="{YOUR_PATH}/pQ l k k g Kageguide.min.js"></sc
<2 ( q l % | m { J;link rel="stylesheet" href="{YOUR_PATH}/pageguide.css">

怎么运用

将以下代码增加到HTML文件中以初始化PageGuide：

$(document).ready(function() {
tl.pg.init({ /* optional preferences go here */ });
});

在1 T 5 X <ul> 中指定挑选器，PageGuide将与之匹配以显现文本。下面是将pageguide.jW # U as增加到页面底# 8 F :部的示例。

<ul id="tlyPageGuide" data-tourtitle="REPLACE THIS WITH AZ m D E D Q $ w TITLE">
<l2 B = z @i class="tlypageW | 0 ! oguide_left" data-; Y j  ) ( & utourtarget=".first_element_tC  P 8 a  qo_target">
<div>
Here is the first item@ Q * ) = S O 5 o description. The number wix a All appear to the left of the element.
</div>
</lE 1 w I +i>
<li class="tlypageguide_right" data-tourtarget="#second_element_to_target">
<div>
Here is the secon6 T 1 ` t y m [ Id item description. The number will appear to the right of the element.
</div>
</li>
<li class="tlypageguide_W ; % / ,top" data-tourtarget=".third_element_to_target > div.is_here">
<div>
Here is the third item description. The number will appear above the element.
</div>
</li>
<li class="tlypageguide) { q C_bottou V / J c ) ,m" data-tourtarget="#fourth_element_to_target">
<div>& 7 A p Q
Here is the fourth item de# Q pscription.3 r H The number will appear below the element.
</div>
</li>
</ul>

PageGuide用于在页面上显现静态消息，然后削减混乱。

6. Hopsc~ 8 j Gotch

其首要意图是解决可用性，直观性和性能问题。

Git1 { h t W ~ , GHub有4.3万颗星，在紧缩状况下只有8kb。

虽! j W 8 S _ R :然它不需求依靠，但假如页面上有可用的jQuery，它t U w ] 2 , 4 H也能够运用。Hopscotch 供给了：

  • 事情回调% ] K n：支撑onStart，onNext和onClose事情的回调。
  • 运用HTML5会话存储来保持页面间浏览的状况。
  • i18n：支Z , ` D x h c 4撑国际化。
  • 轻量标示：运用一种便利的办法来创立标示。
  • 浏览器b * z兼容性：它与一切浏览器兼容。
  • 可自定义$ O s：它答应CSS调整，气泡符号和页面交互。J j T $ N

LinkedInAttic/hopscog # ( O [ 7 RtchTA – Z w 2 s 1 ;his 地址：github.com/LinkedInAtt…

怎么装置

运用Grunt.js构建Hopscotch。这将运转带有新工件的测验套件。然后将两个文件hopscotch.js和hopscotch.css& 2 b X a包含到HTML页面中。

怎么运用

初始设置完5 2 l 7 .成后，您能够运用JSON初始化导览。

// First define your tour.
var tour = {
"id": "hello-hopsc6 Q fotch",
"steps": [
{
"target": "profile-picture",
"placement": "right",
"title": "Profile PictL / 0 ) ` D b Mure",
"content": "This is your profile pic: ? x oture. Looking good!"
},
{
"target": "find-conn",
"p% W q ? q z  /lacement": "bot& ] z K Q U 3 wtom",
"title": "Find Cony ( nections",
"content": "The internet is always more fZ I G mun when you coV % ?nnect with others. F{ ` f ) v Rind some c2 V & # ; 9 6onnections by clicking here."
}
]
};
// TheR o V $ % L @ :n start the tour.
hopscotch.startTour(tour);

Hopscotch 能T H J q * a够运用Jasmine测I G F ) O k c 8验结构进行测验，并能够与Travis8 i o D CI进行继续集成。

7k | g 5 X ^ @ @. Tourist.js

Tourist.js是一个简略的库，最适合单页应用程序而不是多页网站。它能够在每个过程操控界面。运用Tourist，您能够为需求翻开窗口或菜单的过程创立Z k j ; L b一6 N 1 % (个攻略，能够运用特定元素的指令指定一系列过程。

尽管没有网站，但具有12k星的GitHub页2 A |面包含很多文档。

easelinc/touristTourist.js地址：github.com/easelinc/to…

怎么装置

您能够运用以下bower指令装置Tourist.js：

bower install tourist

Tourist需求jQuery和Backbone，W ) k T p c u P而且能够与Bootstrap 3 popovers一同运用或[QTip2 提示连同Bootstr2 ^ R eap 3 CSS。

“ tourist.js” JavaScript文件和可选的CSS文件可用于自定义款式。

<script src="tourist.js"></script>
<!-- Optional! -->
<link rel="stylesheet" hre7 v B d e X K Af="tourist.css" type="text/css" medik ~ % + & E e Ra} * c [ K B r i .="screen">

怎么运用

初始设置后，您能够创立4 k M ] n V M过程并将其增加到/ [ 4 a / { A导览实例中，如下所示：

var steps = [{
//# Y E ) i B this is a step object
content: '<p>Hey user, check t* a 5 q x A G v Ehis out!</p>',
highlightTap E b $ T c L ? rget: true,
nextButton: true,
targy z ! y tet: $('#thing1'),
my: 'bottom center',
at: 'top center'
}, {
...
}, ...]
var tour = new Tourist.Tour({
stepp 7 c g M e D ,s: steps,
tipOptions:{ showEffect: 'slidein' }
});
tour.start();

它还答应您运用Tourist.tp m Hip对提示进行自定义完成。

总结

完成导览和攻略是向用户介绍应用程序的一种简略办法。这些工具大多数都运用具有简F W o ~ W p略初始化功能的CSS和JavaScript文件。这些工具被许多顶尖公司运用。您的导览和攻略的外观和功能将x R X取决于您挑选的库，正确的导航能够使您的应用程序更直观，对用户x c U 更有吸引力。

原文：blog.bitsrc.io/7-awesome-j…

假如对你有所启发和协助，能够点个关注、保藏、转发，也能够留言评论，这是对作者的最大鼓励。

作者简3 . Q 8 j ! )介：Web前端工& d 8 T r e d : #程师，全栈开发工程师、继续学习者。

公众号回复：大礼包，送某网精品t . ?视频课程网盘资料，准能为你节约不少钱！