用Shepherd介绍您的应用程序

最新推荐文章于 2024-12-09 02:07:08 发布

dingshi7798

最新推荐文章于 2024-12-09 02:07:08 发布

阅读量328

点赞数

文章标签： javascript ViewUI

作为一名Web开发人员，您可能意识到创建应用程序通常是容易的部分–将其呈现给全世界本身就是一项艰巨的任务。有些人喜欢创建演示文稿，有些人则制作视频。如果您有什么可以帮助您的用户浏览您的应用程序，这不是很好吗？

通过HubSpot输入Shepherd。 Shepherd是一个简单的JavaScript库，可帮助您指导用户浏览应用程序。它可以帮助您将用户引导到正确的位置，就像牧羊人照顾他的羊群一样。

也有其他用于此目的的库，但是我更喜欢Shepherd的原因是它没有任何依赖关系。它还支持CoffeeScript，尽管我们仅在此处探索JavaScript。

入门

Shepherd是开源的，其代码可以在GitHub上找到。在Hubspot上也可以找到 Shepherd的演示。让我们开始吧。

对于不耐烦的人，这里是入门的基本代码。这将一步一步地浏览您的应用程序。这#id_selector对话框绑定到与选择器#id_selector匹配的元素的底部。

var tour = new Shepherd.Tour({
  defaults: {
    classes: 'shepherd-theme-arrows',
    scrollTo: true
  }
});

tour.addStep('myStep', {
  title: 'Hi there!',
  text: 'This would help you get started with this application!',
  attachTo: '#id_selector bottom',
  classes: 'shepherd shepherd-open shepherd-theme-arrows shepherd-transparent-text',
  buttons: [
    {
      text: 'Exit',
      classes: 'shepherd-button-secondary',
      action: function() {
        return tour.hide();
      }
    }
  ]
});

打破牧羊人

现在您已经运行了简单的代码，让我们将这些步骤分解为我们可以理解的部分。

包括

您需要包括单个Shepherd JavaScript文件。 Shepherd还带有一个默认主题，包含在CSS文件中。

<link type="text/css" rel="stylesheet" href="css/shepherd-theme-arrows.css" />
<script type="text/javascript" src="./shepherd.min.js"></script>

初始化牧羊人

以下代码示例显示了如何通过JavaScript创建游览。由于您很快就会在游览中添加步骤，因此初始化中的defaults选项会将这些选项添加到您的所有步骤中，除非您覆盖它们：

tour = new Shepherd.Tour({
  defaults: {
    classes: 'shepherd-theme-arrows',
    scrollTo: true
  }
});

建立步骤

让我们再次检查一下“入门”代码。这是启动游览的单个步骤的代码：

tour.addStep('myStep', {
  title: 'Hi there!',
  text: 'This would help you get started with this application!',
  attachTo: '#id_selector bottom',
  classes: 'shepherd shepherd-open shepherd-theme-arrows shepherd-transparent-text',
  buttons: [
    {
      text: 'Exit',
      classes: 'shepherd-button-secondary',
      action: function() {
        return tour.hide();
      }
    }
  ]
});

如果您打算执行多个步骤，则可以附加一个附加按钮。以下是如果有两个步骤，如何使用按钮的示例：

tour.addStep('step1', {
  ...
  buttons: [
    {
      text: 'Exit',
      classes: 'shepherd-button-secondary',
      action: function() {
        return tour.hide();
      }
    }, {
      text: 'Next',
      action: tour.next,
      classes: 'shepherd-button-example-primary'
    }
  ]
});

tour.addStep('step2', {
  ...
  buttons: [
    {
      text: 'Back',
      action: tour.back,
      classes: 'shepherd-button-example-primary'
    }, {
      text: 'Exit',
      classes: 'shepherd-button-secondary',
      action: function() {
        return tour.hide();
      }
    } 
  ]
});

开始游览

设置完导览之后，剩下的就是开始！

tour.start();

API

Shepherd提供了广泛的API以及解释其行为的文档。在这里，我们将进行一些有用的调用。

旅游实例

首先，如下所示创建游览。

myTour = new Shepherd.Tour({ options })

现在，我们将看到如何使用该实例。 steps和defaults是导览实例的选项。其方法描述如下。

addStep(id, options) –正如我们在上面看到的，通过为其分配一个ID，然后添加诸如text或buttons选项来创建步骤，稍后将对此进行描述。
getById(id) –此方法用于通过其ID选择任何特定步骤。
show(id) –按ID显示特定步骤。
on(event, handler) –将事件绑定到您的游览中。这类似于jQuery的bind()方法。
off(event, handler) – off(event, handler)绑定事件。