电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 使用 Intro.js 向 JavaScript 应用程序添加交互式文档（1） [打印本页]

作者: look_w 时间: 2018-11-14 19:02 标题: 使用 Intro.js 向 JavaScript 应用程序添加交互式文档（1）

用户想要快速掌握一种新的 Web 应用程序 — 或者他们已经使用的应用程序中的新特性 —             他们通常对阅读冗长的文档或指南不感兴趣。在介绍和举例说明应用程序功能时，产品演示比静态文档更容易吸引用户的注意。导览尤其有效，因为它们会在用户使用应用程序时解释和演示产品特性。
  库采用一种创新的、交互式的方法来创建 JavaScript 应用程序文档。该库提供了需要的 JavaScript 和级联样式表 (CSS)             文件，您可使用它们创建向用户演示 Web 应用程序功能与特性的分步导览。使用             Intro.js，您可以将动态信息集成到应用程序中，用户在应用程序环境中进行导航时可以查看这些信息。该库集成了和  ，使您能够从开发环境中添加教学信息。UI 设计人员和             JavaScript 开发人员都可以利用 Intro.js 功能和资源，以一种简单、现代和动态的方式提高其应用程序的价值。
示例导览您可从                   的示例文件夹中获得示例导览。

Intro.js 功能很容易在任何网站 UI 中实现。该库是免费的、开源的，而且兼容最新版的 Internet Explorer、Chrome 和             Firefox。本教程将展示主要的 Intro.js 特性，并提供一个实现导览的分步示例。
Intro.js 导航Intro.js 实现了以下通用导航特性：

导览启动：Intro.js 库提供了一些示例按钮，您可以使用它们来定义导览初始化。您还可以设计您自己的按钮（示例：），将用户的注意力吸引到导览的开始处。
导览步骤：您必须指定用户要导航的步骤，直到他们完成导览。您可以通过导览文件中的一组 HTML 元素指定这些步骤，在本教程的后面可以看到更详细的介绍。默认情况下，Intro.js 库会指定标记为 Prev （Previous 的缩写）和 Next 的导航按钮：
导览完成或结束：在导览的每一步中，Intro.js 都为用户提供了跳过剩余步骤的选项。用户可以单击一个按钮 — 默认情况下标记为 End tour — 来离开导览：。用户到达导览的最后一步时，该库实现了一个标记为 Done () 的按钮，它取代了最后一步中的 End tour 按钮。单击 Done 按钮完成导览。

接下来，我们将会展示导览在我们的示例应用程序中是什么样。
Intro.js 中的基本导览可免费使用的图标示例应用程序中的图标来自和，二者都提供了一组可免费用于任何项目（包括软件和在线服务）的图标。

我们的示例应用程序原型包含一个使用 Node.js 和 AngularJS 在 JavaScript 中编写的网站。My Travel App 帮助游客管理其行程。这是该应用程序初始页面的外观：

My Travel App 有一个名为 Travellers Information 的菜单，用于管理游客、群组和语言：

我们创建了一个新的 Launch Tour 菜单，为 My Travel App 用户运行三种导览 — Getting Started、Navigate My Travel App 和 Manage Travellers：

为了举例说明，我们仅实现了 Manage Travellers 导览。（Getting Started 和 Navigate My Travel             App 选项只是一些占位符。）Manage Travellers 导览记录了用户通过 Travellers Information             菜单管理其游客、群组和语言的每一步。
为了提供导览功能的实时演示，我们将 My Travel App 部署到 IBM Bluemix，按照“ ”中描述的步骤开始部署，然后使用我们现有的 My Travel             App 项目代码。
启动 My Travel App 并自行尝试 Manage Travellers 导览。然后继续阅读，了解我们使用 Intro.js             编写导览的实际过程。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)