intro.min.js_Intro.js产品导览简介

最新推荐文章于 2023-09-21 10:57:01 发布

dingshi7798

最新推荐文章于 2023-09-21 10:57:01 发布

阅读量125

点赞数

文章标签： python java javascript css js ViewUI

原文链接：https://www.sitepoint.com/introduction-product-tours-intro-js/

版权

intro.min.js

在线销售产品已成为吸引全球受众关注的趋势。在这些产品中，与有形产品相比，纯基于网络的产品和服务更容易销售。在线营销产品是提高销售额的决定性因素。因此，以交互方式显示产品和服务的功能以引起潜在客户的注意非常重要。产品导览（也称为功能导览）是推广产品的理想解决方案。本教程将解释创建产品导览的重要性，并展示如何使用Intro.js构建有效的产品导览。

样品产品参观

什么是产品导览？

产品导览是一系列步骤，介绍产品的现有功能或最新版本中添加的功能。产品浏览的类型多种多样，直到最近，大多数产品浏览都是使用Flash作为演示文稿创建的。最近，JavaScript库在构建产品浏览中变得更加流行，因为它们提供了产品功能的交互式演示，而不是静态图像和动画。

为什么我需要产品参观？

通常，出于营销目的，基于Web的产品与网站相关联。这些网站包含说明产品功能和特性的用户指南或文档。但是由于以下原因，这些用户指南不如产品导览有效。

人们不喜欢阅读冗长的文档。
文档没有提供每个功能的交互式演示。
人们不定期阅读文档，因此很难引入新功能。

作为解决方案，产品导览用于突出功能并吸引新用户对产品的关注。在不同类型的产品导览创建库之间，产品导览的功能可能有所不同，但是每个库都提供构建导览所需的一组通用功能。让我们看一下产品浏览创建库的最基本功能。

产品游览创建库的功能

产品巡视开始按钮 –该按钮可能随库一起提供，或者可能需要开发人员定义自定义按钮来初始化巡视。该按钮的设计应引起用户的注意，并且通常比普通按钮大。
产品浏览步骤 –一旦开始，用户应该能够浏览介绍其功能的一系列步骤，直到完成产品浏览为止。产品游览创建库应包含通过在文档中分配各种HTML元素的简单明了的方式来定义游览中的步骤。尽管不是强制性的，但具有“ 上一个”和“ 下一个”按钮来浏览产品浏览的步骤也很有价值。
产品浏览跳过按钮 –几乎可以肯定，并非每个用户都希望进行完整的产品浏览。有时，巡视的前几步可能足以决定购买产品。在这种情况下，应允许用户跳过导览并继续前进。因此，库中应包含一个“ 跳过”按钮，使用户可以跳过游览。此按钮在游览的每个步骤中都应该可用。
产品浏览完成按钮 –当用户到达最后一步时，应该有一种方法来完成浏览。通常，这将是最后一步中可用的按钮。我们需要对此按钮进行有效的号召性用语。通常，号召性用语是购买或试用产品。完成按钮将取代最后一步中的跳过按钮。

这些是产品浏览的一般功能。接下来，让我们看一些用于创建基于JavaScript的产品导览的流行库。

产品导览创作库

存在几个基于JavaScript的产品巡回创建库。它们每个都提供该库独有的功能。下面显示了一些更受欢迎的选择。

在这些库中，Intro.js提供了产品浏览的所有基本功能。因此，出于本文的目的，我们将使用Intro.js创建一个示例产品导览。

使用Intro.js构建产品浏览

Intro.js是一个轻量级的开源库，用于创建网站或产品的逐步浏览。您可以从Github获取该库的副本。我们可以通过下载最新版本来开始实施。下载完成后，您可以提取zip文件并尝试在example文件夹中进行示例浏览。

通常，所有功能和必要信息都可以在网页上找到，并且产品导览用于通过其他信息突出显示功能。在本教程中，我们正在研究一个经过稍微修改的产品浏览，该功能最初在网页上不可用。随着游览的进行，将显示每个功能。首先，将必要的文件复制到本教程的新文件夹中。

步骤1 –添加Intro.js文件

首先，我们需要将Intro.js相关文件添加到我们的项目文件夹中。将intro.js和introjs.css复制到项目文件夹中。

第2步-创建HTML文件

创建一个新HTML文件，并包含JavaScript和CSS文件，如以下代码所示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="introjs.css" rel="stylesheet">
  </head>
  <body>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="intro.js"></script>
  </body>
</html>

步骤3 –设计第一步

如前所述，除了初始步骤外，所有步骤都将被隐藏。产品巡回开始按钮和第一步是我们在这里需要的必要条件。这些使用以下代码实现。

<div class="main_container">
  <div class="flexi_form_title">
    <h1 data-step="1" data-intro="This is flexible forms tour">Flexible Forms</h1>
    <a id="flexi_form_start" href="javascript:void(0);">Start Tour</a>
  </div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="intro.js"></script>
<script>
  $("#flexi_form_start").click(function() {
    introJs().start();
  });
</script>

前面的代码需要插入HTML文档的<body>标记内。请注意，此元素CSS样式由于冗长而未包含在此处。您可以在源文件中找到CSS代码。此时，您应该具有类似于以下的屏幕。

产品浏览初始屏幕

Intro.js使用名为data-step的自定义数据属性来定义产品浏览的步骤。这将是一个数字值，用于定义步骤的顺序。还有一个data-intro属性，用于提供每个步骤的说明。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

单击按钮后，我们必须通过调用introJs().start()来初始化产品浏览。现在，您应该具有游览的第一步，如下图所示。

产品游览第一步

步骤4 –设计隐藏步骤

第一步完成后，我们需要显示下一组步骤，这些步骤在初始页面加载期间被隐藏。因此，让我们看一下下面的代码。

<div id="form_container">
  <form class="flexi_form" data-step="2" data-intro="Flexible form default layout with multiple field types" style="display:none"  data-position="bottom">
    <ul>
      <li data-step="3" data-position="left" data-intro="Inline form validation">
        <div class="left">Text Field</div><input type="text" />
      </li>
      <li data-step="4" data-intro="Customizable Form Layouts">
        <div class="left">Dropdown Field</div>
        <select>
          <option>Option 1</option>
          <option>Option 2</option>
        </select>
      </li>
      <li data-step="5" data-intro="Guidence for filling forms">
        <div class="left">File Field</div>
        <input type="file" />
        <div class="right">Please Upload PDF Files</div>
      </li>
      <li>
        <div class="left">Checkboxes</div>
        <input type="checkbox" /><input type="checkbox" />
      </li>
      <li>
        <div class="left">Dropdown Field</div>
        <select>
          <option>Option 1</option>
          <option>Option 2</option>
        </select>
      </li>
    </ul>
  </form>
</div>

该代码块插入到第一个代码块之后，并位于main_container元素内，并且最初将被隐藏。该代码块包含产品浏览的多个步骤。在这里，我们还使用了data-position属性，这些属性使我们能够定义说明框的方向。在逐步执行这些步骤时，我们必须动态显示功能。因此，我们正在使用自定义JavaScript代码来筛选游览中的每个步骤。考虑以下代码。

<script>
  $("#flexi_form_start").click(function() {
    introJs().start().onbeforechange(function(targetElement) {
      $(".steps").hide();
      $(".left").css("float", "left");
      $("input").removeClass("error");
      $(".right").hide();

      switch($(targetElement).attr("data-step")) {
        case "2":
          $(".flexi_form").hide();
          $(targetElement).show();
          break;
        case "3":
          $("input").addClass("error");
          $(targetElement).show();
          break;
        case "4":
          $(".left").css("float", "none");
          $(targetElement).show();
          break;
        case "5":
          $(".right").show();
          $(targetElement).show();
          break;
      }
    });
  });
</script>

Intro.js提供了一个名为onbeforechange()的函数，该函数在每个步骤转换之前执行。下一步元素将作为参数传递给此函数。我们可以使用简单的switch语句来过滤步骤，如前面的代码所示。然后，我们过滤switch语句中的每个步骤，并添加必要的代码以显示产品功能。此演示用于说明产品浏览的功能，并且大多数功能与Intro.js不直接相关。您的产品浏览将类似于以下屏幕。

产品导览动态功能显示

您可以在本教程的结尾查看此产品浏览的完整演示和源代码。

步骤5 –实施完整功能

如导言所述，在巡回演出结束时发出号召性用语很重要。点击完成按钮后，我们会将用户重定向到另一个页面。使用以下代码完成此操作。

<script>
  introJs().start().oncomplete(function() {
    window.location.href = "complete.html";
  }).onbeforechange(function(targetElement) {
    // The rest of the code
  })
</script>

Intro.js oncomplete()方法用于在完成产品浏览后执行代码。当用户在最后一步中单击“ Done按钮时，将调用此函数。在这里，我们将用户重定向到另一个页面。用户单击此按钮后，应该强烈呼吁他们采取行动。

步骤6 –实施跳过功能

用户应该可以随时跳过该旅程，因此，除了最后一步之外，每个步骤都有一个“ Skip按钮。 Intro.js使用其onexit()方法实现跳过功能。以下代码已被修改为包括对onexit()的调用。

<script>
  introJs().start().oncomplete(function() {
    window.location.href = "complete.html";
  }).onexit(function() {
    window.location.href = "complete.html";
  }).onbeforechange(function(targetElement) {
    // The rest of the code
  })
</script>