介绍
在前端开发中，我们常常需要设计一个漂亮、易用、具有互动性的引导界面，以引导用户完成一些操作。这时，一个好用的 npm 包是必不可少的。eg-joyride 是一个基于 jQuery 的简单可定制的引导式导游（步骤提示）插件，自带多种主题。
安装
使用 npm 安装 eg-joyride：
npm install eg-joyride
使用
引入
由于 eg-joyride 是基于 jQuery 的，使用前需要先引入 jQuery。可以使用 npm 安装，也可以直接从官网引入：
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
然后在 HTML 文件中引入 eg-joyride：
<link rel="stylesheet" href="./node_modules/eg-joyride/css/joyride.css"> <script src="./node_modules/eg-joyride/js/jquery.joyride-2.1.js"></script>
基本用法
在 JavaScript 文件中调用 eg-joyride，并传入参数。
-- -------------------- ---- -------
---------------------------- -
-----------------------
-- ------
------ -
-
------ ----- ---
----- ----- -- --- ----- -----
--
-
------ ----- ---
----- ----- -- --- ------ -----
-
--
-- ----
-------
---
---上述代码中，#my-tour是要被引导的元素，steps 参数是一个数组，每个数组项表示一步提示，其中 title 是步骤标题，text 是步骤说明。
定制主题
eg-joyride 自带了多种主题，我们也可以自定义主题，只需在 css 文件中加入样式即可。
-- -------------------- ---- ------- -- ----- -- ----------------------------- - ----------------- -------- ------ ----- -------------- ----- - ----------------------------- --- ----------------------------- - - ------ ----- - ----------------------------- ---- - ----------- ----- -------------- ---- -
在 JavaScript 文件中加入参数 tipContainer，指定提示内容使用的 css 类名。
-- -------------------- ---- -------
---------------------------- -
-----------------------
-- ------
------ -
-
------ ----- ---
----- ----- -- --- ----- -----
--
-
------ ----- ---
----- ----- -- --- ------ -----
-
--
-- -------
------------- --------------------------------
-- ----
-------
---
---高级用法
eg-joyride 还有很多其他的参数设置，例如设置步骤的位置和方向、动画效果、自定义按钮等。具体可以查看官方文档。
下面是一个高级示例，演示了如何使用自定义按钮。
-- -------------------- ---- -------
---------------------------- -
-----------------------
-- ------
------ -
-
------ ----- ---
----- ----- -- --- ----- ------
-- -----
------------ -------- ----------------------------------------------
--
-
------ ----- ---
----- ----- -- --- ------ -----
-
--
-- -------
----------------- --------------- ---- -
-- ------ --- -- -
--------------------------------------------- -
---------- ------- --- ---------- ----------
-- -----
---------------------------------
---
-
--
-- ----
-------
---
---结语
eg-joyride 是一个非常实用的引导式导游插件，使用起来非常简单，而且具有很高的灵活性。通过深入学习和使用，我们更能掌握开发互动性强的 web 应用的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005576e81e8991b448d46c2