頂級JavaScript導覽庫，可幫助您指導用戶使用您的應用程序。
1. Intro.js
介紹
Intro.js 由於其用戶友好的解決方案而被廣泛使用，並擁有1.9萬個GitHub star。其最重要的功能是：
- 無依賴項：不需要任何其他依賴項
- 體積小，速度快：體積較小，因此引導過程順暢而直觀。JavaScript文件的總大小為10KB, CSS為2.5KB。
- 用戶友好：導航是用戶友好的，並提供可根據您的喜好選擇的各種主題。
- 瀏覽器兼容性：可在所有主要瀏覽器上使用，例如Google Chrome，Mozilla Firefox，Opera，Safari和Internet Explorer。
- 文檔：文檔非常出色，其中包含要介紹的每個元素的示例。
Intro.js地址：https://introjs.com/
如何安裝
要使用Intro.js，您需要安裝npm和Node.js。或者，您可以從以下位置獲取Intro.js：
- 它的GitHub存儲庫：使用 git clone https://github.com/usablica/intro.js.git
- 使用 bower：bower install intro.js - save
- 使用 NPM：npm install intro.js - save
- CDNs (jsdeliver.com, cdnjs.com)
如何使用
一旦安裝了intro.js，只需三個簡單的步驟即可將其添加到項目中：
- 將JS和CSS文件（intro.js和introjs.css）添加到您的項目中。如果需要從右到左的語言支持，還可以添加introjs-rtl.min.css。
- 將屬性data-intro和data-step添加到相關的HTML元素中。這將為特定元素啟用intro.js。
- 調用以下JavaScript函數：introJs().start();
使用以下附加參數在特定元素或類上調用Intro.js。
<code>introJs(".introduction-farm").start();/<code>2.Shepherd
Shepherd有8.1k GitHub星，其網站演示了它的工作原理。其主要功能如下：
- 可訪問性：提供鍵盤導航支持，符合a11y規範，並且還使用JavaScript啟用DOM元素內部的焦點捕獲。
- 高度可定製：允許在不影響性能的情況下更改外觀。
- 可以很容易地嵌入到項目的前端框架中。
- 文檔：文檔涵蓋了安裝和自定義，包括項目的主題和樣式。
Shepherd地址：https://shepherdjs.dev/
如何安裝
Shepherd與許多主要的前端框架集成在一起，並提供了以下包裝器以方便使用：
- Angular：angular-shepherd是一個Angular包裝器，與Angular 8+兼容。
- Ember：ember-shepherd是一個ember包裝器，已通過Ember.js> = v3.8進行了測試，並且與Ember CLI v12.3兼容。
- React：react-shepherd是一個React包裝器。
- Vue：vue-shepherd是Vue包裝器。
您可以使用npm或yarn直接安裝這些包裝器：
<code>npm install shepherd.js -save
yarn add shepherd.js/<code>
也可以通過CDN的JsDeliver直接將其拉出：
<code>/<code>
如何使用
一旦安裝了Shepherd，就可以引入CSS和JS文件，如下所示：
<code><link>
/<code>
下面是一個創建Shepherd之旅並添加帶有DOM元素的步驟的示例。
<code>const tour = new Shepherd.Tour({
defaultStepOptions: {
cancelIcon: {
enabled: true
},
classes: 'class-1 class-2',
scrollTo: { behavior: 'smooth', block: 'center' }
}
});
tour.addStep({
title: 'Creating a Shepherd Tour',
text: `Creating a Shepherd tour is easy. too!\\
Just create a \\`Tour\\` instance, and add as many steps as you want.`,
attachTo: {
element: '.hero-example',
on: 'bottom'
},
buttons: [
{
action() {
return this.back();
},
classes: 'shepherd-button-secondary',
text: 'Back'
},
{
action() {
return this.next();
},
text: 'Next'
}
],
id: 'creating'
});
tour.start();/<code>3.Bootstrap Tour
Twitter Bootstrap通過Bootstrap Tour提供了自己的免費導覽實現，GitHub上擁有4,315個星。
引導彈出窗口易於構建。這是用於引導程序的基於jQuery的插件，並使用DOM和JavaScript配置的功能來構建導覽。就像添加JS和CSS文件一樣簡單，並提供了詳細深入的文檔。
Bootstrap Tour地址：https://bootstraptour.com/
如何安裝
您可以簡單地使用bootstrap的CSS和JS文件：
<code><link>
<link>
...
/<code>
或使用獨立的CSS或JavaScript文件：
<code><link>
...
/<code>
如何使用
初始設置後，您可以創建導覽的實例，並添加具有元素詳細信息的步驟，如下所示：
<code>// 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",
title: "Title of my step",
content: "Content of my step"
}
]});
// Initialize the tour
tour.init();
// Start the tour
tour.start();/<code>
4.Chardin.js
它使用JQuery插件顯示指令，GitHub頁面包含說明和文檔，並具有4.9k GitHub star。
Chardin.js地址：http://heelhook.github.io/chardin.js/
如何安裝
您可以 fork GitHub存儲庫或下載所需的CSS和JS文件 chardinjs.css和 chardinjs.min.js並將它們添加到HTML頁面。
<code><link>
/<code>
如何使用
設置後，您可以向文檔中添加說明，以下是向圖像元素添加指令的示例。data-intro設置要顯示的文本，數據位置決定文本的位置。
<code>/<code>
/<code> 要以順序模式運行Chardin，您需要使用不同的指令，例如data-chardin-sequenced =“ true”，data-chardin-auto =“ true”和data-chardin-delay =“ 100”來自動顯示指令通過元素的運動。
<code>
一旦這些元素與指令一起準備好了，您就可以通過單擊按鈕來初始化庫，或者讓它自動運行，庫也可以被限制在一個特定的容器中。
<code>$('body').chardinJs();
$('body').on('click', 'button[data-toggle="chardinjs"]', function (e) {
e.preventDefault();
return ($('body').data('chardinJs')).toggle();
});
// Run Explicitly
$('body').chardinJs('start')
// Confine to container
$('.container').chardinJs('start')/<code>Chardin.js 允許您刷新覆蓋層，還提供了構造選項來指定包含文本的URL作為JSON對象，可以將其顯示為指令。
5.PageGuide
PageGuide是一個基於jQuery和CSS3的交互式、動態和單頁應用程序的智能指南。
Pageguide地址：http://tracelytics.github.io/pageguide/
您可以通過以下四種方式之一安裝PageGuide：
- 從GitHub下載最新版本
- 克隆倉庫：git clone https://github.com/tracelytics/pageguide.git
- 用Bower安裝
<code>bower install pageguide/<code>
使用npm安裝
<code>npm install pageguide
grunt server/<code>
對於初始設置，請添加pageguide.js和CSS文件，如下所示：
<code>
<link>/<code>
如何使用
初始設置後，您可以創建步驟並將其添加到導覽實例中，如下所示：
<code>var steps = [{
// this is a step object
content: ' Hey user, check this out!
',
highlightTarget: true,
nextButton: true,
target: $('#thing1'),
my: 'bottom center',
at: 'top center'
}, {
...
}, ...]
var tour = new Tourist.Tour({
steps: steps,
tipOptions:{ showEffect: 'slidein' }
});
tour.start();/<code>它還允許您使用Tourist.tip對提示進行自定義實現。
總結
實現導覽和指南是向用戶介紹應用程序的一種簡單方法。這些工具大多數都使用具有簡單初始化功能的CSS和JavaScript文件。這些工具被許多頂尖公司使用。您的導覽和指南的外觀和功能將取決於您選擇的庫，正確的導航可以使您的應用程序更直觀，對用戶更有
2.Shepherd
Shepherd有8.1k GitHub星，其網站演示了它的工作原理。其主要功能如下：
- 可訪問性：提供鍵盤導航支持，符合a11y規範，並且還使用JavaScript啟用DOM元素內部的焦點捕獲。
- 高度可定製：允許在不影響性能的情況下更改外觀。
- 可以很容易地嵌入到項目的前端框架中。
- 文檔：文檔涵蓋了安裝和自定義，包括項目的主題和樣式。
Shepherd地址：https://shepherdjs.dev/
如何安裝
Shepherd與許多主要的前端框架集成在一起，並提供了以下包裝器以方便使用：
- Angular：angular-shepherd是一個Angular包裝器，與Angular 8+兼容。
- Ember：ember-shepherd是一個ember包裝器，已通過Ember.js> = v3.8進行了測試，並且與Ember CLI v12.3兼容。
- React：react-shepherd是一個React包裝器。
- Vue：vue-shepherd是Vue包裝器。
您可以使用npm或yarn直接安裝這些包裝器：
<code>npm install shepherd.js -save
yarn add shepherd.js/<code>
也可以通過CDN的JsDeliver直接將其拉出：
<code>/<code>
如何使用
一旦安裝了Shepherd，就可以引入CSS和JS文件，如下所示：
<code><link>
/<code>
下面是一個創建Shepherd之旅並添加帶有DOM元素的步驟的示例。
<code>const tour = new Shepherd.Tour({
defaultStepOptions: {
cancelIcon: {
enabled: true
},
classes: 'class-1 class-2',
scrollTo: { behavior: 'smooth', block: 'center' }
}
});
tour.addStep({
title: 'Creating a Shepherd Tour',
text: `Creating a Shepherd tour is easy. too!\\
Just create a \\`Tour\\` instance, and add as many steps as you want.`,
attachTo: {
element: '.hero-example',
on: 'bottom'
},
buttons: [
{
action() {
return this.back();
},
classes: 'shepherd-button-secondary',
text: 'Back'
},
{
action() {
return this.next();
},
text: 'Next'
}
],
id: 'creating'
});
tour.start();/<code>3.Bootstrap Tour
Twitter Bootstrap通過Bootstrap Tour提供了自己的免費導覽實現，GitHub上擁有4,315個星。
引導彈出窗口易於構建。這是用於引導程序的基於jQuery的插件，並使用DOM和JavaScript配置的功能來構建導覽。就像添加JS和CSS文件一樣簡單，並提供了詳細深入的文檔。
Bootstrap Tour地址：https://bootstraptour.com/
如何安裝
您可以簡單地使用bootstrap的CSS和JS文件：
<code><link>
<link>
...
/<code>
或使用獨立的CSS或JavaScript文件：
<code><link>
...
/<code>
如何使用
初始設置後，您可以創建導覽的實例，並添加具有元素詳細信息的步驟，如下所示：
<code>// 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",
title: "Title of my step",
content: "Content of my step"
}
]});
// Initialize the tour
tour.init();
// Start the tour
tour.start();/<code>
4.Chardin.js
它使用JQuery插件顯示指令，GitHub頁面包含說明和文檔，並具有4.9k GitHub star。
Chardin.js地址：http://heelhook.github.io/chardin.js/
如何安裝
您可以 fork GitHub存儲庫或下載所需的CSS和JS文件 chardinjs.css和 chardinjs.min.js並將它們添加到HTML頁面。
<code><link>
/<code>
如何使用
設置後，您可以向文檔中添加說明，以下是向圖像元素添加指令的示例。data-intro設置要顯示的文本，數據位置決定文本的位置。
<code>/<code>
要以順序模式運行Chardin，您需要使用不同的指令，例如data-chardin-sequenced =“ true”，data-chardin-auto =“ true”和data-chardin-delay =“ 100”來自動顯示指令通過元素的運動。
<code>
一旦這些元素與指令一起準備好了，您就可以通過單擊按鈕來初始化庫，或者讓它自動運行，庫也可以被限制在一個特定的容器中。
<code>$('body').chardinJs();
$('body').on('click', 'button[data-toggle="chardinjs"]', function (e) {
e.preventDefault();
return ($('body').data('chardinJs')).toggle();
});
// Run Explicitly
$('body').chardinJs('start')
// Confine to container
$('.container').chardinJs('start')/<code>Chardin.js 允許您刷新覆蓋層，還提供了構造選項來指定包含文本的URL作為JSON對象，可以將其顯示為指令。
5.PageGuide
PageGuide是一個基於jQuery和CSS3的交互式、動態和單頁應用程序的智能指南。
Pageguide地址：http://tracelytics.github.io/pageguide/
您可以通過以下四種方式之一安裝PageGuide：
- 從GitHub下載最新版本
- 克隆倉庫：git clone https://github.com/tracelytics/pageguide.git
- 用Bower安裝
<code>bower install pageguide/<code>
使用npm安裝
<code>npm install pageguide
grunt server/<code>
對於初始設置，請添加pageguide.js和CSS文件，如下所示：
<code>
<link>/<code>
如何使用
初始設置後，您可以創建步驟並將其添加到導覽實例中，如下所示：
<code>var steps = [{
// this is a step object
content: ' Hey user, check this out!
',
highlightTarget: true,
nextButton: true,
target: $('#thing1'),
my: 'bottom center',
at: 'top center'
}, {
...
}, ...]
var tour = new Tourist.Tour({
steps: steps,
tipOptions:{ showEffect: 'slidein' }
});
tour.start();/<code>它還允許您使用Tourist.tip對提示進行自定義實現。
總結
實現導覽和指南是向用戶介紹應用程序的一種簡單方法。這些工具大多數都使用具有簡單初始化功能的CSS和JavaScript文件。這些工具被許多頂尖公司使用。您的導覽和指南的外觀和功能將取決於您選擇的庫，正確的導航可以使您的應用程序更直觀，對用戶更有吸引力。
閱讀更多 做工程師不做碼農 的文章
