简介
npm( Node Package Manager ) 是一款 Node.js 项目的包管理器，其拥有大量的开源的现成包，可供前端开发者使用。其中对于 UI 组件的包也是相当的丰富，本文将介绍一个 UI 组件包—— ui-notify。
ui-notify 是一个基于 jQuery 的通知组件，出色的 UI 设计使得它非常灵活、易用，不需要编写复杂的代码即可实现多种样式的通知信息，方便了开发者的使用。
安装
安装 ui-notify 很简单，只要在命令行中输入以下语句即可：
--- ------- --------- --
使用
使用 ui-notify 的前提是先要引入 jQuery ，然后在项目的 HTML 文件中添加以下代码：
----- ---------------- ---------------------------------------------------- ------- ------------------------------------------------------ ------- ----------------------------------------------------------
在这些代码中， rel="stylesheet"代表样式表， href 指定了 ui-notify 的样式文件路径，而 script 标签中则是 ui-notify 的 js 脚本。
接着，我们可以尝试使用其中的一个基本功能：向页面添加一个成功提示信息的通知框。代码如下：
----------------- -----------
其中，"操作成功！"是要显示的提示信息， "success"则是指定了通知框样式。在这个例子中，我们使用了样式为 "success" 的成功通知框。
除了 "success" 样式外，还有 "error"、 "warn"、 "info"、 "blue"、 "green"、 "red"、 "yellow"、 "white" 等多种样式可供选择。开发者可根据需要自由地选择使用。
以上是 ui-notify 的基础用法，下面将演示更加丰富的功能。
深入使用
ui-notify 还有很多实用的配置项，下面将挑选一些重要的进行介绍。
显示时间
在默认情况下，通知框会在 5000ms（即 5 秒）后消失。如果需要调整时间，有两种方式。
一种是全局调整，即通过全局对象 $.notify.defaults 设置全局通知框显示时间，如下所示：
------------------- --------------- ---- -------- --------- ------ -------------- ----- ---
其中 autoHide 和 autoHideDelay 用于关闭自动隐藏功能和设置显示时间。
第二种方式则是单独设置一个通知框的显示时间，代码如下：
-------------- --------- - --------- ----- -------------- ----- ---
位置
通知框可以在页面上任意位置出现，比如我们可以通过以下方式让它出现在页面中心：
------------------- --------------- ------- ------- ---
还可以设置在顶部中心、顶部左侧、顶部右侧、底部中心、底部左侧、底部右侧六个位置。
内容
除了上述功能，ui-notify 还支持在通知框里显示自定义的 HTML 内容。例如下面的代码来自于官方示例：
---------- -------- ----- ------- ------------ -- - ------ ------ --------- ----- ---
其中 message 可以是一个 HTML 字符串，style 则是样式。
事件处理
ui-notify 还支持一些事件处理，比如 click、 onClosed、 onShow 等事件。我们可以通过以下代码调用事件处理函数：
-------------- --------- -
------ --------------- ---------
-- ------
--
--------- -----------
-- ------
--
------- -----------
-- ------
-
---其中 click 事件处理函数用于处理点击事件，如当通知框被点击时可以跳转到对应的链接。onClosed 和 onShow 分别对应着通知框被关闭和显示的事件函数。
示例代码
最后，我们编写一段完整的演示代码，以便更好地理解 ui-notify 的使用方法。
--------- -----
------
------
----- ----------------
----- ---------------------------- ------------------
---------------
----- ---------------- ----------------------------------------------------
------- ------------------------------------------------------
------- ----------------------------------------------------------
------ ----------------
-------- -
----------------- --------
------ --------
-
--------
-------
------
------- -----------------------
---------- -- -
---------------------------------- ------- ----------
----------------- -----------
-------------------- --------
------------------ ---------
-------------- ------- ---- -- ----------
-------------- -- --- -------- -
-------------- -----
---------- ---------
---
---
---------
-------
-------这段代码实现了以下功能：
- 在底部中心显示 "操作成功！" 的成功通知框。
- 在底部中心显示 "Warning!" 的警告通知框。
- 在底部中心显示 "Error!" 的错误通知框。
- 在底部中心显示 "Some message with no options" 的普通通知框。
- 在底部中心显示 "Show me the money!" 的成功通知框，并设置自动隐藏、样式为 success。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005581181e8991b448d5379