在 notify.js 中完成 HTML

Question

我正在使用库 Notify js 在我的 php 网页上显示成功或错误消息。
当我使用

这样的普通文本时

$.notify("Changes are made successfully", "success");

然后它工作正常。

但有时，我需要在无序列表中显示消息，如下所示：

var message = '<p> Please correct following errors and then try again </p><ul><li>value1 is wrong</li><li>value 3 is wrong</li><li>value 5 is wrong</li></ul>';
$.notify(message, "error");

然后消息原样显示，表示整个html正在显示，而不是我想显示

Please correct following errors and then try again

 - value1 is wrong
 - value3 is wrong
 - value5 is wrong

如有任何建议，我们将不胜感激！

Answer 1

其他两种方式（除了完全嘈杂的addStyle方法）

使用`\n` 换行符转义字符

使用 \n 并期待 <br>！因此，不要使用 UL > LI，而是使用 newline 转义 \n 的某种组合，例如：

将可能的错误存储在一个数组中，而不是简单地在 Notify 消息中使用 then:

const errors = [ // Or however you can push() errors into this array...
  "value 1 is wrong",
  "value 2 is wrong",
  "value 3 is wrong",
];

// Add dashs "-" to each error and join with newline
const errorsList = errors.map(err => ` - ${err}`).join("\n");
const message = `Please correct following errors and then try again\n\n${errors.join("\n")}`;
$.notify(message, "error");

这将导致：

Please correct following errors and then try again

 - value 1 is wrong
 - value 2 is wrong
 - value 3 is wrong

修改插件源

对源代码进行简单编辑以允许 HTML 是：

在第 205 行添加到 pluginOptions:

        encode: true,

在第 513 行将 d = encode(d); 更改为：

                if (this.options.encode) {
                    d = encode(d);
                }

最后，当您使用插件时，只需将新选项 encode 设置为 false:

// Use like:
$.notify("Lorem<br><b>Ipsum</b>", {encode: false});

这是我的 pull request related to this Issue#130

Answer 2

您可以添加自己的 Class 和 HTML 内容，例如模板系统。

$.notify.addStyle('saved', {
  html: 
    "<p>Saved blabla...</p>"
});

$.notify(..., { 
  style: 'saved'
});

在 notify.js 中完成 HTML

Complete HTML in notify.js

javascript

notifyjs

使用`\n` 换行符转义字符

修改插件源

在 notify.js 中完成 HTML

Complete HTML in notify.js

javascript

notifyjs

使用\n 换行符转义字符

修改插件源

使用`\n` 换行符转义字符