js操作步骤引导提示

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/shepherd.js@5.0.1/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对提示进行自定义实现。

8.Driver.js

 Driver.js

Light-weight, no-dependency, vanilla JavaScript engine to drive user's focus across the page

With Animation Without Animation

 Star12,169

A lightweight (~4kb gzipped) yet powerful JavaScript engine that helps you drive the user's focus on page.

Some sample use-cases can be creating powerful feature introductions, call-to-action components, focus shifters etc.

What are the features?

Driver is compatible with all the major browsers and can be used for any of your overlay needs. Feature introductions, focus shifters, call-to-action are just a few examples.

• 🔆 Highlight any (literally any) item on page
• ✋ Block user interactions
• 📣 Create feature introductions
• 👓 Add focus shifters for users
• 🛠️ Highly customizable – Use it anywhere for overlay
• ⌨️ User Friendly – Controllable by keys
• 🆓 MIT Licensed – Free for personal and commercial use
• 🕊️ Lightweight – Only ~4kb when gzipped
• 🌀 Consistent behavior across all major browsers

---

How does it do that?

In it simplest, it puts the canvas on top of the whole page and then cuts the part that is over the element to be highlighted and provides you several hooks when highlighting, highlighted or un-highlighting elements making it highly customizable.

---

Can you show some Examples?

Below you find some of the examples and sample use-cases on how you can use it.

Highlighting a Single Element – Without Popover

If all you want is just highlight a single element, you can do that simply by passing the selector

Show Demo

const driver = new Driver();
driver.highlight('#create-post');

---

A real world use-case for this could be highlighting an element when user is interacting with it

const focusDriver = new Driver();

// Highlight the section on focus
document.getElementById('creation-input')
  .addEventListener('focus', (e) => {
    focusDriver.focus('#creation-input');
  });

Focus any of the inputs and see how it moves the highlight from one element to the other

You can also turn off the animation or set the padding around the corner. More on it later.

---

Highlighting a Single Element – With Popover

If you would like to show some details alongside the highlighted element, you can do that easily by specifying title and description

Show Demo

const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
  }
});

You can modify the behavior of this popover also by a certain set of options. More on it below.

---

Popover Positioning

You can also, change the position of the popover to be either left, left-center, left-bottom, top, top-center, top-right, right, right-center, right-bottom or bottom, bottom-center, bottom-right, mid-center.

Show Demo

const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    // position can be left, left-center, left-bottom, top,
    // top-center, top-right, right, right-center, right-bottom,
    // bottom, bottom-center, bottom-right, mid-center
    position: 'left',
  }
});

On my Left On my Top On my Bottom On my Right

If you don't specify the position or specify it to be auto, it will automatically find the suitable position for the popover and show it

---

HTML in Popovers

You can also specify HTML in the body or the title of the popovers. Here is an example:

Show Demo

const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: '<em>An italicized title</em>',
    description: 'Description may also contain <strong>HTML</strong>'
  }
});

And of course it can be any valid HTML.

---

Disable Close on Outside Click

By default, driver.js gets reset if user clicks outside the highlighted element, you can disable this:

Show Demo

const driver = new Driver({
    allowClose: false,
});

driver.highlight({
  element: '#some-element',
  popover: {
    title: '<em>An italicized title</em>',
    description: 'Description may also contain <strong>HTML</strong>'
  }
});

If you use this option, for multi-step driver, it would close after you are done with the popover or you can close it programmatically. For single element popover, you need to close it properly, otherwise it won't be closed

driver.reset()
    

---

Creating Feature Introductions

You can also make powerful feature introductions to guide the users about the features. Just provide an array of steps where each step specifies an element to highlight.

Below is just a quick example showing you how to combine the steps in introduction.

Show Demo

const driver = new Driver();
// Define the steps for introduction
driver.defineSteps([
  {
    element: '#first-element-introduction',
    popover: {
      className: 'first-step-popover-class',
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'left'
    }
  },
  {
    element: '#second-element-introduction',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'top'
    }
  },
  {
    element: '#third-element-introduction',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'right'
    }
  },
]);
// Start the introduction
driver.start();

This is just a quick example for the feature introduction. For a richer one, please have a look at the "Quick Tour"

You may also turn off the footer buttons in popover, in which case user can control the popover using the arrows keys on keyboard. Or you may control it using the methods provided by Driver.

---

Without Overlay

You can create feature introductions and do everything listed above without overlays also. All you have to do is just set the opacity to `0`.

Show Demo

const driver = new Driver({
    opacity: 0,
});

driver.highlight({
  element: '#run-element-without-popover',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    position: 'top', // can be `top`, `left`, `right`, `bottom`
  }
});

..and you can do the same for the feature introductions

---

..and much much more

Driver comes with many options that you can manipulate to make driver behave as you may like

Driver Definition

Here are the options that Driver understands

const driver = new Driver({
  className: 'scoped-class', // className to wrap driver.js popover
  animate: true,  // Animate while changing highlighted element
  opacity: 0.75,  // Background opacity (0 means only popovers and without overlay)
  padding: 10,    // Distance of element from around the edges
  allowClose: true, // Whether clicking on overlay should close or not
  overlayClickNext: false, // Should it move to next step on overlay click
  doneBtnText: 'Done', // Text on the final button
  closeBtnText: 'Close', // Text on the close button for this step
  nextBtnText: 'Next', // Next button text for this step
  prevBtnText: 'Previous', // Previous button text for this step
  showButtons: false, // Do not show control buttons in footer
  keyboardControl: true, // Allow controlling through keyboard (escape to close, arrow keys to move)
  scrollIntoViewOptions: {}, // We use `scrollIntoView()` when possible, pass here the options for it if you want any
  onHighlightStarted: (Element) {}, // Called when element is about to be highlighted
  onHighlighted: (Element) {}, // Called when element is fully highlighted
  onDeselected: (Element) {}, // Called when element has been deselected
  onReset: (Element) {},        // Called when overlay is about to be cleared
  onNext: (Element) => {},      // Called when moving to next step on any step
  onPrevious: (Element) => {},  // Called when moving to next step on any step
});

Note that all the button options that you provide in the driver definition can be overridden for a specific step by giving them in the step definition

Step Definition

Here are the set of options that you can pass in each step i.e. an item in array of steps or the object that you pass to highlight method

const stepDefinition = {
  element: '#some-item',        // Query selector string or Node to be highlighted
  popover: {                    // There will be no popover if empty or not given
    className: 'popover-class', // className to wrap this specific step popover in addition to the general className in Driver options
    title: 'Title',             // Title on the popover
    description: 'Description', // Body of the popover
    showButtons: false,         // Do not show control buttons in footer
    closeBtnText: 'Close',      // Text on the close button for this step
    nextBtnText: 'Next',        // Next button text for this step
    prevBtnText: 'Previous',    // Previous button text for this step
  }
};

API Methods

Below are the set of methods that are available to you

const driver = new Driver(driverOptions);

const isActivated = driver.isActivated; // Checks if the driver is active or not
driver.moveNext();     // Moves to next step in the steps list
driver.movePrevious(); // Moves to previous step in the steps list
driver.start(stepNumber = 0);  // Starts driving through the defined steps
driver.highlight(string|stepDefinition); // highlights the element using query selector or the step definition
driver.reset(); // Resets the overlay and clears the screen
driver.hasHighlightedElement(); // Checks if there is any highlighted element
driver.hasNextStep(); // Checks if there is next step to move to
driver.hasPreviousStep(); // Checks if there is previous step to move to

// Prevents the current move. Useful in `onNext` or `onPrevious` if you want to
// perform some asynchronous task and manually move to next step
driver.preventMove();

// Gets the currently highlighted element on screen
const activeElement = driver.getHighlightedElement();
const lastActiveElement = driver.getLastHighlightedElement();
activeElement.getCalculatedPosition(); // Gets screen co-ordinates of the active element
activeElement.hidePopover();  // Hide the popover
activeElement.showPopover();  // Show the popover

activeElement.getNode();  // Gets the DOM Element behind this element

You can use a variety of options to achieve whatever you may want. I have some plans on improving it further, make sure to keep an eye on the GitHub page

---

Contributing

You can find the contribution instructions on the GitHub page. Feel free to submit an issue, create a pull request or spread the word

---

A product by Kamran produced out of boredom and frustration after he gave up on trying to find a perfect solution to integrate journey introduction and overlays.

总结

实现导览和指南是向用户介绍应用程序的一种简单方法。这些工具大多数都使用具有简单初始化功能的CSS和JavaScript文件。这些工具被许多顶尖公司使用。您的导览和指南的外观和功能将取决于您选择的库，正确的导航可以使您的应用程序更直观，对用户更有吸引力。