IntroJS 即时入门(全)
原文:
zh.annas-archive.org/md5/571da8845201bceabaa0d164596b584f
译者:飞龙
协议:CC BY-NC-SA 4.0
第一章. 立即使用 IntroJs
欢迎使用 Instant IntroJs。这本书特别创建,旨在为您提供所有关于 IntroJs 的信息,以便您能够快速设置。您将学习 IntroJs 的基础知识,开始构建您的第一个逐步介绍,并发现一些技巧。
本文档包含以下部分:
所以,IntroJs 是什么? 帮助您了解 IntroJs 实际上是什么,以及您可以用它做什么。
安装 将教您如何以最少的麻烦下载和安装 IntroJs,然后设置它,以便您可以尽快使用。
快速入门 会向您展示如何执行 IntroJs 的核心任务之一——创建基本介绍。按照步骤创建您自己的基本介绍,这将成为您在 IntroJs 中大部分工作的基础。
你需要了解的 Top 7 个功能 将教您如何使用 IntroJs 最重要的功能执行一些任务。在本节结束时,您将能够使用您偏好的样式表自定义 IntroJs,使用 IntroJs 选项和公共 API,更改按钮标签或使用您的语言本地化它们,使用 IntroJs 与 Rails、PHP Yii 和其他框架一起使用,使用 IntroJs 回调函数和事件,构建和压缩库,使用 JSON 配置定义介绍,以及创建多页介绍或帮助。
您应该了解的人和地方 提供了许多有用的链接到项目页面和论坛,以及一系列有用的文章、教程、示例、博客和 IntroJs 超级贡献者的 Twitter 动态。这是因为每个开源项目都是围绕一个社区为中心的。
那么,IntroJs 是什么?
网络开发者必须意识到,他们的网站需要具有自解释性。网站导航应该是显而易见的。用户不希望花费太多时间来了解如何使用网站。如果需要向访客解释您的网站呢?为了实现这些目标,设计一个信息图表将是最佳方法之一。
用户是最重要的资产,通知他们网站的新变化至关重要。不向他们介绍更新和变化而失去大量用户总是比吸引他们更容易。那么您将如何通知他们这些变化呢?当然,您正在寻找最佳且最快捷的方式以避免浪费时间和精力。
IntroJs 是一个帮助用户了解新变化并指示新版本功能的库。当客户或用户访问一个网站时,展示网站的功能和新更新对于提高用户交互、性能以及以更简单、更快的速度与网站工作至关重要。即使是一个大功能也可能因为复杂性而被访客忽略。因此,清楚地展示网站功能可能会对网站的成败产生最大的影响。
为了在填写大型表单时提高用户的知识并加快这一过程,最好给他们提供更多相关信息。IntroJs 是一个库,允许开发者将网站划分为高亮部分,以帮助客户和用户更好地使用网站。通过使用这个库,他们可以创建逐步介绍来展示网站的功能,并告知用户关于新更改的信息。
用途
IntroJs 可用于多种情况,以使事物易于理解并对观众有用。IntroJs 主要用于以下方面:
-
向用户介绍部分
-
创建逐步介绍
-
创建多页介绍
-
向用户展示新更新和更改
IntroJs 是使用 JavaScript 和 CSS3 开发和设计的。要使用 IntroJs,需要在页面中包含 JavaScript 和 CSS 文件,并调用 IntroJs 方法。IntroJs 与其他库之间没有依赖关系,页面上也不需要使用任何其他库。
特性
IntroJs 是一个轻量级、开源且易于使用的库,拥有活跃的用户和开发者社区。以下是一些显著特性:
-
小巧(4 KB JavaScript 和 2 KB CSS)
-
易于使用
-
纯 JavaScript 和 CSS
-
无需依赖其他库
-
兼容移动和平板电脑设备
-
兼容旧版浏览器
-
免费且开源
-
MIT 许可证
安装
在本节中,我们将涵盖以下要点:
-
IntroJs 的要求是什么?
-
如何下载?
-
如何安装?
IntroJs 是一个客户端库,这意味着所有常规和事件都在客户端环境中管理和执行。所有安装和运行步骤都与客户端部分相关,无需在服务器上安装。
安装和运行 IntroJs 有四个简单的步骤。
第 1 步 – 要求
如前所述,要运行 IntroJs,无需在服务器上安装任何东西,所有工作都在客户端;您只需要一个网络浏览器。
要运行 IntroJs,您需要以下之一的网络浏览器:
-
IE 8 或更高版本
-
Firefox 20 或更高版本
-
Google Chrome 26 或更高版本
-
Safari 5.1 或更高版本
-
Opera 12.1 或更高版本
对于移动或平板电脑浏览器也有一些要求:
-
iOS Safari 3.2 或更高版本
-
Opera Mini 5.0-0.7 或更高版本
-
Android 浏览器 2.1 或更高版本
-
BlackBerry 浏览器 7.0 或更高版本
第 2 步 – 下载 JavaScript 和 CSS
要安装和运行 IntroJs,请下载最新版本。每个版本的必要文件应分别整理在单独的文件夹中。
IntroJs 的 GitHub 页面是下载最新版本的简单且最便捷的方式,该版本可在 github.com/usablica/intro.js/tags
找到。
如截图所示,所有版本都提供在 .zip
和 tar.gz
格式下。下载最新版本。在撰写本书时,可用的最新版本是 0.4.0。
此外,还有一个不稳定版本可在 github.com/usablica/intro.js/archive/master.zip
获取。
注意,正在开发中的版本可能存在一些问题或错误。它仅用于介绍库中的最新功能、更新和更改;对于生产环境来说,它可能没有用。
下载后,提取压缩文件。它通常包括以下文件和目录:
以下是对其中一些的解释:
-
BUILD
文件夹用于构建和制作生产文件 -
example
文件夹包含了一些使用 IntroJs 的示例 -
minified
文件夹包含生产过程中需要的压缩文件 -
intro.js
和introjs.css
文件是库的主要文件,适用于开发或修复错误(它们不建议用于生产;用于生产目的,请使用压缩文件)。 -
此外,
component.json
和package.json
是用于配置目的的包管理工具
第 3 步 – 配置
IntroJs 可以通过执行以下步骤在任何 HTML 页面上运行。
intro.min.js
和 intro.min.css
文件是安装时在压缩文件夹中可用的两个主要文件。这两个文件是为生产环境制作的。它们以压缩模式提供,并且从中移除了所有额外的注释和描述。
调用 IntroJs 文件有两种方法。然而,可以使用任何一种方法,但要实现更高的速度和准确性,第二种方法已被采用。