如何将 ID 分配给 toastr.js 通知并根据需要进行更新
Posted
技术标签:
【中文标题】如何将 ID 分配给 toastr.js 通知并根据需要进行更新【英文标题】：How to assign ID to toastr.js notification and update it as needed 【发布时间】：2015-08-04 21:15:31 【问题描述】：在我的项目中，我需要保持通知处于打开状态，除非用户点击它，并且如果在它被触发和用户点击它之间的时间有更新，我需要更新 toast 通知上的值。
我没有找到任何关于如何更新通知的参考。有谁知道吗？
我正在使用这个 github 仓库：toastr.js
请推荐
【问题讨论】：
【参考方案1】：您可以通过使用toast.options 在全局范围内设置timeOut 值0 来无限期地打开toast。
或者，您可以使用 toast 方法的第三个参数来设置它。
例如：
toastr.success("message body", "title", timeOut:0)
对于第二个问题，您可以通过在创建时捕获它的引用来更新现有的 toast，然后在创建后对其进行变异。
例如：
var myToast = toastr.success("message body", "title", timeOut:0);
myToast.find(".toast-title").text("new title");
myToast.find(".toast-message").text("new message");
您可能还想将extendedTimeOut 设置为0，以防用户在您完成之前将鼠标悬停在吐司上，如下所示：
var myToast = toastr.success("message body", "title", timeOut:0, extendedTimeOut:0);
完成后，您可以通过编程方式隐藏 toast：
$(myToast).fadeOut();
【讨论】：
是否可以将此超时设置为 0 并且仍然有进度条指示正在进行中？ 目前无法显示不确定的进度。 谢谢你的回答先生。你为我节省了一些时间 我们可能还需要注意如果所需的吐司不可用怎么办。【参考方案2】：有一个像这样的简单解决方案-
toastr.options.timeOut = 0;
演示代码-
$(function()
function Toast(type, css, msg)
this.type = type;
this.css = css;
this.msg = 'This is positioned in the ' + msg + '. You can also style the icon any way you like.';
var toasts = [
new Toast('error', 'toast-bottom-full-width', 'This is positioned in the bottom full width. You can also style the icon any way you like.'),
new Toast('info', 'toast-top-full-width', 'top full width'),
new Toast('warning', 'toast-top-left', 'This is positioned in the top left. You can also style the icon any way you like.'),
new Toast('success', 'toast-top-right', 'top right'),
new Toast('warning', 'toast-bottom-right', 'bottom right'),
new Toast('error', 'toast-bottom-left', 'bottom left')
];
toastr.options.positionClass = 'toast-top-full-width';
toastr.options.extendedTimeOut = 0; //1000;
toastr.options.timeOut = 0;
toastr.options.fadeOut = 250;
toastr.options.fadeIn = 250;
var i = 0;
$('#tryMe').click(function ()
$('#tryMe').prop('disabled', true);
delayToasts();
);
function delayToasts()
if (i === toasts.length) return;
var delay = i === 0 ? 0 : 2100;
window.setTimeout(function () showToast(); , delay);
// re-enable the button
if (i === toasts.length-1)
window.setTimeout(function ()
$('#tryMe').prop('disabled', false);
i = 0;
, delay + 1000);
function showToast()
var t = toasts[i];
toastr.options.positionClass = t.css;
toastr[t.type](t.msg);
i++;
delayToasts();
)body
margin: 5em;
li
font-size: 18px;
padding: 4px;
#toast-container > .toast
background-image: none !important;
#toast-container > .toast:before
position: fixed;
font-family: FontAwesome;
font-size: 24px;
line-height: 18px;
float: left;
color: #FFF;
padding-right: 0.5em;
margin: auto 0.5em auto -1.5em;
#toast-container > .toast-warning:before
content: "\f003";
#toast-container > .toast-error:before
content: "\f001";
#toast-container > .toast-info:before
content: "\f005";
#toast-container > .toast-success:before
content: "\f002";
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<h1>Toastr with FontAwesome Icons</h1>
<ul class="icons-ul">
<li><i class="icon-li icon-ok"></i>Embedded icon using the <i> tag</li>
<li><i class="icon-li icon-ok"></i>Doesn't work with background-image</li>
<li><i class="icon-li icon-ok"></i>We can use the :before psuedo class</li>
<li><i class="icon-li icon-ok"></i>Works in IE8+, FireFox 21+, Chrome 26+, Safari 5.1+, most mobile browsers</li>
<li><i class="icon-li icon-ok"></i>See <a href="http://caniuse.com/#search=before">CanIUse.com</a> for browser support</li>
</ul>
<button class="btn btn-primary" id="tryMe">Try Me</button>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="script.js"></script>
</body>
</html>【讨论】：
【参考方案3】：我需要识别我的 toastr 并且我找到了解决方案：
toastr["error"]("Message", "Alert",
own_id: 666,
onCloseClick: function(a, b)
// here you can update notification identified by own_id
console.log(this.own_id);
)
【讨论】：
【参考方案4】：我假设您对每个 toast 都有一个唯一的 ID。这将完成这项工作：
var t = toastr.warning("message", "title");
t.attr('id', 'your unique id');
之后，您可以像这样简单地选择每个 toastr：
t = $('#id')
【讨论】：
以上是关于如何将 ID 分配给 toastr.js 通知并根据需要进行更新的主要内容，如果未能解决你的问题，请参考以下文章