介绍
UX（用户体验）是网页设计的重要组成部分。UX Tour 是一种在网页中创建交互式自动化旅游的工具，可以引导用户了解和了解网页的功能，并向用户展示有关其用法的信息。
ux-tour 是一个 npm 包，可以轻松地将 UX Tour 添加到您的网站。
安装
首先，我们需要使用 npm 将 ux-tour 包添加到我们的项目中。可以使用以下命令完成：
npm install ux-tour --save-dev
快速上手
基本使用
-- -------------------- ---- -------
------ ------ ---- ----------
----- ----------- - -
------ -
-
------- ------------------
-------- ----------- ---
--
-
------- ------------------
-------- ----------- ---
--
-- ---- --------
--
--
--------------------API 文档
方法
UxTour(options)
UxTour 方法接受一个包含 UX 旅游选项的对象，如下所示：
-- -------------------- ---- -------
----- ----------- - -
------ -
-
------- ------------------
-------- ----------- ---
--
-
------- ------------------
-------- ----------- ---
--
-- ---- --------
--
--
--------------------选项
steps
required
要执行的 UX 旅游的步骤。步骤是一个数组，其中包含每个步骤的信息。每个步骤都应该包含两个属性：
target
required
要选中的元素的选择器。如果有多个符合选择器的元素，则将选择第一个，您可以使用 CSS 或 jQuery 选择器语法选择元素。
content
required
在旅游期间显示给用户的内容。这可以是 HTML、纯文本或任何其他可传递到 HTML 元素 innerHTML 属性中的东西。
darkMode
启用或禁用 UX Tour 的黑暗模式。默认为 false。
onStepChanged
返回当前步骤更改时调用的回调。函数接受步骤对象作为参数。
示例
基本示例
-- -------------------- ---- -------
------ ------ ---- ----------
----- ----------- - -
------ -
-
------- ------------------
-------- ----------- ---
--
-
------- ------------------
-------- ----------- ---
--
-- ---- --------
--
--
--------------------启用黑暗模式
-- -------------------- ---- -------
------ ------ ---- ----------
----- ----------- - -
------ -
-
------- ------------------
-------- ----------- ---
--
-
------- ------------------
-------- ----------- ---
--
-- ---- --------
--
--------- -----
--
--------------------使用 onStepChanged 选项
-- -------------------- ---- -------
------ ------ ---- ----------
----- ----------- - -
------ -
-
------- ------------------
-------- ----------- ---
--
-
------- ------------------
-------- ----------- ---
--
-- ---- --------
--
-------------- ------ -- -
------------------ -----------------
--
--
--------------------结论
UX Tour 是一个很好的工具，可以帮助您创建交互式自动化旅游，以帮助您的用户更好地了解您的网站或应用程序。ux-tour npm 包提供了一个简单而强大的方式来使用 UX Tour。现在您已经了解了如何使用 ux-tour，赶快拿起它来为您的网站添加漂亮的 UX 旅游吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596781e8991b448d6e9a