7個很棒的JavaScript產品步驟引導庫，不信你用不上

原文鏈接

1. Intro.js

介紹

Intro.js 由於其用戶友好的解決方案而被廣泛使用，並擁有1.9萬個GitHub star。其最重要的功能是：

1. 無依賴項：不需要任何其他依賴項
2. 體積小，速度快：體積較小，因此引導過程順暢而直觀。JavaScript文件的總大小爲10KB, CSS爲2.5KB。
3. 用戶友好：導航是用戶友好的，並提供可根據您的喜好選擇的各種主題。
4. 瀏覽器兼容性：可在所有主要瀏覽器上使用，例如Google Chrome，Mozilla Firefox，Opera，Safari和Internet Explorer。
5. 文檔：文檔非常出色，其中包含要介紹的每個元素的示例。

Intro.js地址：Intro.js

如何安裝

要使用Intro.js，您需要安裝npm和Node.js。或者，您可以從以下位置獲取Intro.js：

• 它的GitHub存儲庫：使用 git clone github.com/usablica/in…
• 使用 bower

bower install intro.js - save
複製代碼

• 使用 NPM

npm install intro.js - save
複製代碼

• CDNs (jsdeliver.com, cdnjs.com)

如何使用

一旦安裝了intro.js，只需三個簡單的步驟即可將其添加到項目中：

1. 將JS和CSS文件（intro.js和introjs.css）添加到您的項目中。如果需要從右到左的語言支持，還可以添加introjs-rtl.min.css。
2. 將屬性data-intro和data-step添加到相關的HTML元素中。這將爲特定元素啓用intro.js。
3. 調用以下JavaScript函數：

introJs().start();
複製代碼

使用以下附加參數在特定元素或類上調用Intro.js。

introJs(".introduction-farm").start();
複製代碼

2.Shepherd

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

• 可訪問性：提供鍵盤導航支持，符合a11y規範，並且還使用JavaScript啓用DOM元素內部的焦點捕獲。
• 高度可定製：允許在不影響性能的情況下更改外觀。
• 可以很容易地嵌入到項目的前端框架中。
• 文檔：文檔涵蓋了安裝和自定義，包括項目的主題和樣式。

Shepherd地址：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直接安裝這些包裝器：

npm install shepherd.js -save
yarn add shepherd.js
複製代碼

也可以通過CDN的JsDeliver直接將其拉出：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/shepherd.js"></script>
複製代碼

如何使用

一旦安裝了Shepherd，就可以引入CSS和JS文件，如下所示：

<link rel="stylesheet" href="shepherd.js/dist/css/shepherd.css"/>
<script src="shepherd.js/dist/js/shepherd.min.js"></script>
複製代碼

下面是一個創建Shepherd之旅並添加帶有DOM元素的步驟的示例。

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();
複製代碼

3.Bootstrap Tour

Twitter Bootstrap通過Bootstrap Tour提供了自己的免費導覽實現，GitHub上擁有4,315個星。

引導彈出窗口易於構建。這是用於引導程序的基於jQuery的插件，並使用DOM和JavaScript配置的功能來構建導覽。就像添加JS和CSS文件一樣簡單，並提供了詳細深入的文檔。

Bootstrap Tour地址：bootstraptour.com/

如何安裝

您可以簡單地使用bootstrap的CSS和JS文件：

<link href="bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-tour.min.css" rel="stylesheet">
...
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-tour.min.js"></script>
複製代碼

或使用獨立的CSS或JavaScript文件：

<link href="bootstrap-tour-standalone.min.css" rel="stylesheet">
...
<script src="jquery.min.js"></script>
<script src="bootstrap-tour-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",
    title: "Title of my step",
    content: "Content of my step"
  }
]});

// Initialize the tour
tour.init();

// Start the tour
tour.start();
複製代碼

4.Chardin.js

它使用JQuery插件顯示指令，GitHub頁面包含說明和文檔，並具有4.9k GitHub star。

Chardin.js地址：heelhook.github.io/chardin.js/

如何安裝

您可以 fork GitHub存儲庫或下載所需的CSS和JS文件 chardinjs.css和 chardinjs.min.js並將它們添加到HTML頁面。

<link href="chardinjs.css" rel="stylesheet">
<script src="chardinjs.min.js"></script>
複製代碼

如何使用

設置後，您可以向文檔中添加說明，以下是向圖像元素添加指令的示例。data-intro設置要顯示的文本，數據位置決定文本的位置。

<img src="img/chardin.png" data-intro="An awesome 18th-century painter, who found beauty in everyday, common things." data-position="right" />
複製代碼

要以順序模式運行Chardin，您需要使用不同的指令，例如data-chardin-sequenced =“ true”，data-chardin-auto =“ true”和data-chardin-delay =“ 100”來自動顯示指令通過元素的運動。

<body data-chardin-sequenced="true" data-chardin-auto="false" data-chardin-delay="800" >
複製代碼

一旦這些元素與指令一起準備好了，您就可以通過單擊按鈕來初始化庫，或者讓它自動運行，庫也可以被限制在一個特定的容器中。

$('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’)
複製代碼

Chardin.js 允許您刷新覆蓋層，還提供了構造選項來指定包含文本的URL作爲JSON對象，可以將其顯示爲指令。

5.PageGuide

PageGuide是一個基於jQuery和CSS3的交互式、動態和單頁應用程序的智能指南。

Pageguide地址：tracelytics.github.io/pageguide/

您可以通過以下四種方式之一安裝PageGuide：

• 從GitHub下載最新版本
• 克隆倉庫：git clone github.com/tracelytics…
• 用Bower安裝

bower install pageguide
複製代碼

• 使用npm安裝

npm install pageguide
grunt server
複製代碼

對於初始設置，請添加pageguide.js和CSS文件，如下所示：

<script src="{YOUR_PATH}/pageguide.min.js"></sc
<link rel="stylesheet" href="{YOUR_PATH}/pageguide.css">
複製代碼

如何使用

將以下代碼添加到HTML文件中以初始化PageGuide：

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

在 <ul> 中指定選擇器，PageGuide將與之匹配以顯示文本。下面是將pageguide.js添加到頁面底部的示例。

<ul id="tlyPageGuide" data-tourtitle="REPLACE THIS WITH A TITLE">
  <li class="tlypageguide_left" data-tourtarget=".first_element_to_target">
    <div>
      Here is the first item description. The number will appear to the left of the element.
    </div>
  </li>
  <li class="tlypageguide_right" data-tourtarget="#second_element_to_target">
    <div>
      Here is the second item description. The number will appear to the right of the element.
    </div>
  </li>
  <li class="tlypageguide_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_bottom" data-tourtarget="#fourth_element_to_target">
    <div>
      Here is the fourth item description. The number will appear below the element.
    </div>
  </li>
</ul>
複製代碼

PageGuide用於在頁面上顯示靜態消息，從而減少混亂。

6. Hopscotch

其主要目的是解決可用性，直觀性和性能問題。

GitHub有4.3萬顆星，在壓縮狀態下只有8kb。

雖然它不需要依賴，但如果頁面上有可用的jQuery，它也可以使用。Hopscotch 提供了：

• 事件回調：支持onStart，onNext和onClose事件的回調。
• 使用HTML5會話存儲來保持頁面間瀏覽的狀態。
• i18n：支持國際化。
• 輕量標註：使用一種方便的方法來創建標註。
• 瀏覽器兼容性：它與所有瀏覽器兼容。
• 可自定義：它允許CSS調整，氣泡標記和頁面交互。

LinkedInAttic/hopscotchThis 地址：github.com/LinkedInAtt…

如何安裝

使用Grunt.js構建Hopscotch。這將運行帶有新工件的測試套件。然後將兩個文件hopscotch.js和hopscotch.css包含到HTML頁面中。

如何使用

初始設置完成後，您可以使用JSON初始化導覽。

// First define your tour.
var tour = {
  "id": "hello-hopscotch",
  "steps": [
    {
      "target": "profile-picture",
      "placement": "right",
      "title": "Profile Picture",
      "content": "This is your profile picture. Looking good!"
    },
    {
      "target": "find-conn",
      "placement": "bottom",
      "title": "Find Connections",
      "content": "The internet is always more fun when you connect with others. Find some connections by clicking here."
    }
  ]
};

// Then start the tour.
hopscotch.startTour(tour);
複製代碼

Hopscotch 可以使用Jasmine測試框架進行測試，並可以與Travis CI進行持續集成。

7. Tourist.js

Tourist.js是一個簡單的庫，最適合單頁應用程序而不是多頁網站。它可以在每個步驟控制界面。使用Tourist，您可以爲需要打開窗口或菜單的步驟創建一個指南，可以使用特定元素的指令指定一系列步驟。

儘管沒有網站，但擁有12k星的GitHub頁面包含大量文檔。

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

如何安裝

您可以使用以下bower命令安裝Tourist.js：

bower install tourist
複製代碼

Tourist需要jQuery和Backbone，並且能夠與Bootstrap 3 popovers一起使用或[QTip2 提示連同Bootstrap 3 CSS。

“ tourist.js” JavaScript文件和可選的CSS文件可用於自定義樣式。

<script src="tourist.js"></script>

<!-- Optional! -->
<link rel=“stylesheet” href=“tourist.css” type=“text/css” media=“screen”>
複製代碼

如何使用

初始設置後，您可以創建步驟並將其添加到導覽實例中，如下所示：

var steps = [{
  // this is a step object
  content: '<p>Hey user, check this out!</p>',
  highlightTarget: true,
  nextButton: true,
  target: $('#thing1'),
  my: 'bottom center',
  at: 'top center'
}, {
  ...
}, ...]

var tour = new Tourist.Tour({
steps: steps,
tipOptions:{ showEffect: ‘slidein’ }
});
tour.start();
複製代碼

它還允許您使用Tourist.tip對提示進行自定義實現。

總結

實現導覽和指南是向用戶介紹應用程序的一種簡單方法。這些工具大多數都使用具有簡單初始化功能的CSS和JavaScript文件。這些工具被許多頂尖公司使用。您的導覽和指南的外觀和功能將取決於您選擇的庫，正確的導航可以使您的應用程序更直觀，對用戶更有吸引力。

---