npm 包 wiki.min.js 使用教程

前言

在前端开发中,经常会需要在网页中添加一些词汇或者名词的解释。这时候我们需要使用一个名为 wiki.min.js 的 npm 包。本文将详细介绍如何使用以及相关注意事项。

wiki.min.js 是什么?

wiki.min.js 是一个基于 JavaScript 的工具包,它可以快速、简单地为页面中的关键字添加说明信息。它支持多种效果,比如弹框、下拉菜单等,使用起来十分方便。

如何使用

安装

使用 npm 进行安装:

--- ------- -----------

或者直接在 HTML 文件中引入:

------- ---------------------------------------------

基本使用

在 HTML 文件中,使用类名 wiki 来标识需要添加说明信息的关键字。例如:

-------------- ---------------- ------------------ ---------------- --------------

然后在 JavaScript 文件中引入 wiki.min.js

------ ---- ---- --------------

-- -----------
----- ---- - --- ------
  -- ----------
  ----- --------
  -- ---
  ------- -
    -
      -------- ---- ---
      ----- ------ - -------
      ---- ----
      ------ -----
    --
    -
      -------- ---- ---
      ----- ------ - -------
      ---- ----
      ------ -----
    --
  --
---

-- --
--------------

细节注意

  • result 中每一项都需要提供 keyworddesc 两个必要的属性。
  • 可以通过 mode 属性来决定效果,支持 hover(鼠标经过触发)、click(点击触发)和 text(只显示文本,不触发任何效果)三种。
  • 当需要显示图片时,可提供 image 属性,值为图片地址。
  • 在进行初始化时,也可以传入一些全局配置参数,比如 zIndex(层叠顺序)、distance(效果触发距离)、offset(距离参考元素边缘的偏移值)等。

示例代码

--------- -----
------
  ------
    ------------------ ------------
    ------- ---------------------------------------------
    ------- -----------------------
      ----- ---- - --- ------
        ------- -
          -
            -------- ---- ---
            ----- ------ - -------
            ---- ----
            ------ -----
          --
          -
            -------- ---- ---
            ----- ------ - -------
            ---- ----
            ------ -----
          --
        --
        ----- --------
      ---

      --------------
    ---------
    -------
      ---------- -
        ------- ----- -----
        ----------- -------
      -
      ----- -
        ------ --------
        ---------------- ----------
        ------- --------
      -
    --------
  -------
  ------
    ---- ------------------
      ---
        ----
        ------- ---------------- ----------
        -
        ------- ---------------- ----------
        -
      ----
    ------
  -------
-------

结语

通过这篇文章的介绍,相信大家已经对 npm 包 wiki.min.js 有了一定的了解。它的使用非常简单,同时支持多种效果,并且具有较高的自定义能力。我们可以通过传递不同的数据源和参数来满足不同的需求。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60066bcf967216659e244d1e


猜你喜欢

  • npm 包 @nodert-win8.1/windows.system.remotedesktop 使用教程

    在前端开发中,我们常常需要访问本地计算机的一些资源,例如在浏览器中访问本地文件系统、读取系统信息等等。而在 Windows 平台下,我们可以使用 @nodert-win8.1/windows.syst...

    4 年前
  • npm 包 win.min.js 使用教程

    什么是 win.min.js? win.min.js 是一个简单的 JavaScript 库,常用于检测浏览器窗口是否处于最大化状态。它支持大多数的主流浏览器,并且可以与其他 JavaScript 库...

    4 年前
  • npm 包 @nodert-win8.1/windows.system.threading.core 使用教程

    在前端开发中,许多应用需要与操作系统进行交互。而在 Windows 环境下,我们可以使用 @nodert-win8.1/windows.system.threading.core 这个 npm 包,来...

    4 年前
  • npm 包 @nodert-win8.1/windows.system.userprofile 使用教程

    如果你在开发 Windows 平台应用,那么 @nodert-win8.1/windows.system.userprofile 这个 npm 包将会是你的好帮手。

    4 年前
  • npm包@nodert-win8.1/windows.ui使用教程

    随着HTML5、CSS3和ES6的发展,前端技术也在不断的更新迭代。在Web应用的开发中,将 Node.js 的包管理工具 npm 运用到前端开发中则成为了一个重要的实践。

    4 年前
  • npm 包 @nodert-win8.1/windows.ui.applicationsettings 使用教程

    在前端开发中,很多时候需要使用到 Windows 8.1/10 应用程序设置页面,但是使用纯 HTML/CSS/JavaScript 实现起来较为繁琐。为了方便开发者,npm 提供了 @nodert-...

    4 年前
  • npm 包 @nodert-win8.1/windows.ui.core 使用教程

    在前端开发中,我们经常会使用一些第三方库来帮助我们实现一些复杂的功能,而 npm 是一个非常流行的包管理工具,方便我们快速安装和使用这些库。在 Windows 8.1 平台上,@nodert-win8...

    4 年前
  • npm 包 location.min.js 使用教程

    前端开发中,经常会需要获取用户的地理位置信息,那么在此时,npm 包 location.min.js 就可以为我们提供很好的帮助。本文将详细介绍这个包的使用方法。 安装 使用 NPM 进行安装,命令如...

    4 年前
  • 使用 @nodert-win8.1/windows.ui.notifications npm 包教程

    在前端开发中,使用 npm 包可以帮助我们更加高效地完成代码开发和管理。在 Windows 8.1 平台下,我们可以使用 @nodert-win8.1/windows.ui.notifications...

    4 年前
  • npm 包 loading.min.js 使用教程

    在前端开发中,加载动画是一个很有用且实用的组件。loading.min.js 是一个可以帮助我们实现加载动画的 npm 包。在本篇文章中,我们将详细介绍 loading.min.js 的使用方法,并提...

    4 年前
  • NPM 包 @nodert-win8.1/windows.ui.input 使用教程

    本文将介绍如何使用 @nodert-win8.1/windows.ui.input 这个 NPM 包,用于在 Windows 8.1 系统上进行前端开发的输入控制。

    4 年前
  • npm 包 @nodert-win8.1/windows.ui.input.inking 使用教程

    在前端开发过程中,涉及到跨平台的开发环境,如何在不同的工具和设备中运行代码非常重要。npm 包 @nodert-win8.1/windows.ui.input.inking 提供了一种解决方案,它是一...

    4 年前
  • npm 包 local.min.js 使用教程

    什么是 local.min.js local.min.js 是一个可以帮助前端开发者在本地存储数据的 JavaScript 库。它可以通过浏览器本地存储的方式,将用户的数据保存在用户的本地浏览器缓存中...

    4 年前
  • NPM 包 locale.min.js 使用教程

    前言 在前端开发过程中,我们经常需要进行国际化处理来支持不同的语言。其中一个比较方便的方式就是使用 locale.min.js 这个 NPM 包。本文将详细介绍如何使用该包进行国际化处理。

    4 年前
  • npm 包 log.min.js 使用教程

    在前端开发中,日志是很重要的。在应用程序出现问题时,能够查看日志可以帮助我们快速地定位问题。而 npm 包 log.min.js 可以帮助我们更加方便地管理和记录日志。

    4 年前
  • npm 包 world.min.js 使用教程

    介绍 world.min.js 是一个基于Three.js开发的可用于在网页中渲染地球的 JavaScript 库,通过 npm 包的方式提供。它使用了高品质的纹理和光照技术,可以呈现出非常逼真的地球...

    4 年前
  • npm 包 logarithm.min.js 使用教程

    在前端开发中,数学计算是一个重要的领域。当我们需要进行对数计算时,可以使用 logarithm.min.js 这个实用的 npm 包。本文将为你介绍 logarithm.min.js 的详细使用教程,...

    4 年前
  • npm 包 loot.min.js 使用教程

    在前端开发中,我们经常会需要处理随机数、抽奖等相关功能。在这个时候,我们可以使用 npm 包 loot.min.js 来快速地实现这一功能。本篇文章将详细介绍如何使用这个 npm 包,并提供示例代码以...

    4 年前
  • npm 包 logical.min.js 使用教程

    逻辑运算是编程中最基本的操作之一。在前端开发中,逻辑运算用于控制页面元素的显隐、跳转和事件处理等等。为了方便开发者使用逻辑运算,有一个非常实用的 npm 包,名为 logical.min.js。

    4 年前
  • npm 包 macro.min.js 使用教程

    在前端开发中,我们经常需要编写一些重复性高、逻辑复杂的代码,这些代码不仅耗费时间,而且还容易出现错误。为了提高代码的复用性、可读性和可维护性,我们可以使用一些工具和库来简化开发过程。

    4 年前

相关推荐

    暂无文章