README

 

PNotify是由SciActive开发的JavaScript通知插件。PNotify还可以根据Web Notifications规范提供桌面通知。如果桌面通知不可用或不受允许，PNotify将回退到在浏览器中显示常规通知。

演示

http://sciactive.com/pnotify/

要求

jQuery (1.6或更高版本)

入门指南

您可以使用Bower、NPM或自定义下载包含PNotify。

PNotify自定义下载包含以下文件

• pnotify.custom.js & pnotify.custom.min.js (已压缩)
• pnotify.custom.css & pnotify.custom.min.css (已压缩)

以下是如何在您的页面上包含它们的示例

<script type="text/javascript" src="pnotify.custom.min.js"></script>
<link href="pnotify.custom.min.css" media="all" rel="stylesheet" type="text/css" />

现在您可以像这样使用PNotify

<script type="text/javascript">
    $(function(){
        new PNotify({
            title: 'Regular Notice',
            text: 'Check me out! I\'m a notice.'
        });
    });
</script>

如果您没有使用任何UI库，您可以使用内置的样式，称为Bright主题。这是默认的。

如果您使用的是Bootstrap版本2，请在第一个通知之前包含此行

PNotify.prototype.options.styling = "bootstrap2";

如果您使用的是Bootstrap版本3，请在第一个通知之前包含此行

PNotify.prototype.options.styling = "bootstrap3";

如果您使用的是jQuery UI，请在第一个通知之前包含此行

PNotify.prototype.options.styling = "jqueryui";

如果您使用的是Bootstrap 3与Font Awesome，请在第一个通知之前包含此行

PNotify.prototype.options.styling = "fontawesome";

堆叠

堆叠是一个PNotify用来确定通知位置的物体。堆叠有两个必填属性dir1和dir2。dir1是通知堆叠的第一个方向。当通知在窗口中空间不足时，它们将移动到由dir2指定的方向。方向可以是"up"、"down"、"right"或"left"。堆叠之间相互独立，因此一个堆叠不知道也不关心它是否与其他堆叠重叠（并阻止）。默认堆叠可以像任何其他默认设置一样更改，它先向下，然后向左。堆叠对象由PNotify使用和操作，因此，传递时应该是变量。所以，调用像new PNotify({stack: {"dir1": "down", "dir2": "left"}});这样的代码将不会工作。它将创建一个通知，但这个通知将在自己的堆叠中，可能会与其他通知重叠。

模态堆叠

您可以将堆叠设置为模态，通过将“modal”属性设置为true。模态堆叠在其通知打开时在其后创建一个覆盖层。当其中最后的通知被移除时，覆盖层将被隐藏。如果将“overlay_close”属性设置为true，则单击覆盖层将导致该堆叠中的所有通知被移除。

示例堆叠

var stack_topleft = {"dir1": "down", "dir2": "right", "push": "top"};
var stack_bottomleft = {"dir1": "right", "dir2": "up", "push": "top"};
var stack_modal = {"dir1": "down", "dir2": "right", "push": "top", "modal": true, "overlay_close": true};
var stack_bar_top = {"dir1": "down", "dir2": "right", "push": "top", "spacing1": 0, "spacing2": 0};
var stack_bar_bottom = {"dir1": "up", "dir2": "right", "spacing1": 0, "spacing2": 0};
var stack_context = {"dir1": "down", "dir2": "left", "context": $("#stack-context")};

此堆叠通过代码而不是CSS进行初始定位。

var stack_bottomright = {"dir1": "up", "dir2": "left", "firstpos1": 25, "firstpos2": 25};

这是通过两个额外变量完成的。firstpos1和firstpos2是相对于视口边的像素值。dir1和dir2分别确定哪个边缘。计算如下

• dir = "up" - firstpos 是相对于视口底部的位置。
• dir = "down" - firstpos 是相对于视口顶部的位置。
• dir = "right" - firstpos 是相对于视口左边的位置。
• dir = "left" - firstpos 是相对于视口右边的位置。

要创建一个左上角的堆叠，定义堆叠

var stack_topleft = {"dir1": "down", "dir2": "right"};

然后向您的 pnotify 调用中添加两个选项

addclass: "stack-topleft", // This is one of the included default classes.
stack: stack_topleft

包含了一些 CSS 类，这些类可以为您定位通知

• stack-topleft
• stack-bottomleft
• stack-bottomright
• stack-modal

您可以通过定义一个自定义堆叠来创建自己的自定义位置和移动。

配置默认值/选项

• title: false - 通知的标题。
• title_escape: false - 是否转义标题的内容。 (不允许 HTML。)
• text: false - 通知的文本。
• text_escape: false - 是否转义文本的内容。 (不允许 HTML。)
• styling: "brighttheme" - 要使用的样式类。 (可以是 "brighttheme", "jqueryui", "bootstrap2", "bootstrap3", "fontawesome" 或自定义样式对象。请参阅 pnotify.js 末尾的源代码，以了解样式对象中的属性。)
• addclass: "" - 添加到通知的额外类。 (用于自定义样式。)
• cornerclass: "" - 用于角落样式的类。
• auto_display: true - 在创建通知时显示通知。将其关闭以将通知添加到历史记录而不显示它们。
• width: "300px" - 通知的宽度。
• min_height: "16px" - 通知的最小高度。它将扩展以适应内容。
• type: "notice" - 通知的类型。 "notice", "info", "success", 或 "error"。
• icon: true - 将图标设置为 true 以使用所选样式/类型的默认图标，false 为无图标，或字符串为您的自定义图标类。
• animation: "fade" - 显示和隐藏通知时使用的动画。 "none", "show", "fade", 和 "slide" 是 jQuery 内置的。其他需要 jQuery UI。使用具有 effect_in 和 effect_out 的对象以使用不同的效果。
• animate_speed: "slow" - 通知进出动画的速度。 "slow", "def" 或 "normal", "fast" 或毫秒数。
• position_animate_speed: 500 - 指定位置动画的特定持续时间。
• opacity: 1 - 通知的不透明度。
• shadow: true - 显示阴影。
• hide: true - 在延迟后删除通知。
• delay: 8000 - 在删除通知之前延迟的毫秒数。
• mouse_reset: true - 如果鼠标移到通知上，则重置隐藏计时器。
• remove: true - 在删除后从 DOM 中删除通知的元素。
• insert_brs: true - 将换行符转换为 br 标签。
• stack: {"dir1": "down", "dir2": "left", "push": "bottom", "spacing1": 25, "spacing2": 25, "context": $("body"), "modal": false} - 通知将被放置的堆叠。还控制通知堆叠的方向。

桌面模块

desktop: {

• desktop: false - 将通知显示为桌面通知。
• fallback: true - 如果不支持或允许桌面通知，则回退到常规通知。
• icon: null - 要显示的图标的 URL。如果为 false，则不会显示图标。如果为 null，则显示默认图标。
• tag: null - 使用标签可以更新现有的通知，或防止在选项卡之间重复通知。如果您将标签设置为 null，则将生成一个标签，以方便使用 "update" 功能。
• text: null - 可选地显示桌面上的不同文本

}

按钮模块

buttons: {

• closer: true - 提供一个按钮供用户手动关闭提示。
• closer_hover: true - 仅在悬停时显示关闭按钮。
• sticker: true - 提供一个按钮供用户手动粘贴提示。
• sticker_hover: true - 仅在悬停时显示粘贴按钮。
• show_on_nonblock: false - 即使非阻塞模块在使用时也显示按钮。
• labels: {close: "关闭", stick: "粘贴"} - 允许您更改显示的文本，以促进国际化。
• classes: {closer: null, pin_up: null, pin_down: null} - 用于按钮图标的类。留空以使用您使用的样式中的类。

}

非阻塞模块

nonblock: {

• nonblock: false - 创建一个非阻塞提示。它允许用户点击其下方的元素。
• nonblock_opacity: .2 - 当鼠标悬停时提示（如果它是非阻塞的）的透明度。

}

移动模块

mobile: {

• swipe_dismiss: true - 允许用户滑动关闭提示。
• styling: true - 使提示在移动设备上看起来更好。

}

动画模块

animate: {

• animate: false - 使用animate.css对提示进行动画处理。
• in_class: "" - 用于动画提示进入的类。
• out_class: "" - 用于动画提示退出的类。

}

动画模块还在提示上创建了一个方法attention，它接受来自Animate.css的注意力吸引类和回调，当动画完成时将被调用。

确认模块

confirm: {

• confirm: false - 创建一个确认框。
• prompt: false - 创建一个提示。
• prompt_class: "" - 添加到提示输入元素的类。
• prompt_default: "" - 提示的默认值。
• prompt_multi_line: false - 提示是否接受多行文本。
• align: "right" - 按钮的对齐方式。（right，center，left，justify）
• buttons: [{text: "确定", addClass: "", promptTrigger: true, click: function(notice, value){ notice.remove(); notice.get().trigger("pnotify.confirm", [notice, value]); }},{text: "取消", addClass: "", click: function(notice){ notice.remove(); notice.get().trigger("pnotify.cancel", notice); }}] - 要显示的按钮及其回调。如果按钮的promptTrigger设置为true，则在用户在单行提示中按Enter时将触发。如果只想有一个按钮，则使用null作为数组中的第二个条目以删除取消按钮。

}

历史模块

history: {

• history: true - 将提示放在历史记录中。
• menu: false - 显示下拉菜单以重新显示之前的提示。
• fixed: true - 使下拉菜单固定在视口的顶部。
• maxonscreen: Infinity - 屏幕上最多显示的通知数量。
• labels: {redisplay: "重新显示", all: "全部", last: "最后"} - 允许您更改显示的文本，以促进国际化。

}

参考模块

reference: {

• putThing: false - 提供一个东西。默认关闭。
• labels: {text: "旋转"} - 如果您正在显示任何文本，应使用标签选项以支持国际化。

}

回调模块

所有回调选项都期望一个参数，即一个函数，该函数将在该事件发生时被调用。它们可以像核心选项一样包含在传递给PNotify()的选项对象中。如果函数在"before_open"或"before_close"回调中返回false，则该事件将被取消。

• before_init - 在通知初始化之前调用的选项。它接受一个参数，即选项对象。
• after_init - 在通知初始化之后调用的选项。它接受一个参数，即通知对象。
• before_open - 在通知显示之前调用的选项。它接受一个参数，即通知对象。
• after_open - 在通知显示之后调用的选项。它接受一个参数，即通知对象。
• before_close - 在通知关闭之前调用的选项。它接受一个参数，即通知对象。
• after_close - 在通知关闭之后调用的选项。它接受一个参数，即通知对象。

实用函数

• PNotify.reload(root) - 重新初始化PNotify。在浏览器中，PNotify使用window作为根进行初始化。返回创建的PNotify对象。
• PNotify.removeAll() - 移除所有通知。
• PNotify.removeStack(stack) - 移除堆栈中的所有通知。
• PNotify.positionAll(animate) - 重新定位通知，可选地动画化其移动。
• notice.open() - 打开通知。
• notice.remove() - 移除通知。
• notice.get() - 获取通知的DOM元素。

使用RequireJS的PNotify

当它们检测到AMD/RequireJS时，PNotify核心定义了名为“pnotify”的命名模块，PNotify的每个模块都定义了类似“pnotify.module”的名称。以下示例展示了使用非阻塞和桌面模块与RequireJS一起使用的方法。

requirejs(['pnotify', 'pnotify.nonblock', 'pnotify.desktop'], function(PNotify){
    PNotify.desktop.permission();
    new PNotify({
        title: 'Desktop Notice',
        text: 'If you\'ve given me permission, I\'ll appear as a desktop notification. If you haven\'t, I\'ll still appear as a regular PNotify notice.',
        desktop: {
            desktop: true
        },
        nonblock: {
            nonblock: true
        }
    });
});

许可和更多信息

PNotify在Apache License, Version 2.0下分发。

有关下载、更多信息示例，请访问http://sciactive.com/pnotify/。