我正在使用jquery toastr。到目前为止一切都很棒。我可以很好地展示和关闭烤面包。 我希望能够独特地识别每个吐司。并在onHidden函数中使用该唯一标识符。有没有人这样做过?对封闭事件的toastr类或div周围的close事件调用jquery是更好的选择吗?
var mes = 'My name is Inigo Montoya.<input type="hidden" id="announcementId" value="1"/>' +
'<input type="hidden" id="userId" value="'+ userid +'"/> ';
var mes1 = 'Princess Bride<input type="hidden" id="announcementId2" value="2"/>'+
'<input type="hidden" id="userId1" value="'+ userid +'"/> ';
var mes2 = 'Man in Black<input type="hidden" id="announcementId2" value="3"/>'+
'<input type="hidden" id="userId2" value="'+ userid +'"/> ';
var mes3 = 'Inconcivable!<input type="hidden" id="announcementId3" value="4"/>'+
'<input type="hidden" id="userId3" value="'+ userid +'"/> ';
toastr.options = {
"closeButton": false,
"debug": false,
"positionClass": "toast-top-full-width",
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "0",
"extendedTimeOut": "0",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr.options.onHidden = function(item) {
//GET UNIQUE TOAST ID'S HERE
var val = 1;//$this.find("#announcemntId").val();
alert("CLOSED " + item);
}
toastr.error(mes, "First Toast");
toastr.error(mes1, "Second Toast");
toastr.error(mes2, "Third Toast");
toastr.error(mes3, "Fourth Toast");
答案 0 :(得分:6)
您可以传递第三个参数覆盖
的参数toastr.error('Some error', 'Error', { onHidden: function() {
console.log('Error toast hidden.')
}});
或修改全局onHidden
var onHiddenToast = function () {
console.log("onHidden");
}
toastr.options.onHidden = onHiddenToast;
你也可以通过参考来获得祝酒
var myToast = toastr.info("Some info");
//do what you want with myToast
答案 1 :(得分:0)
如果以后遇到任何人,我的解决方案就是这里。 从json加载吐司。每个toast都在它自己独特的div(信息,错误,警告,succuess)内,每个都有一个分配给它的类。我在toast中为每个消息分配了隐藏的属性和我需要的值。
$.ajax({
dataType: "json",
url: '/announcements/getannouncements/userid/' + userid,
success: function (data) {
$.each(data, function (i, val) {
var mes = '<input type="hidden" id="userId" value="' + userid + '"/>' +
'<input type="hidden" id="announcementId" value="' + val.id + '"/>' +
'Client: ' + val.client + '</br>' + val.announcement;
var title = val.title;
toastr.error(mes, title); //info, success, warning, error
});
},
error: function () {
alert("Could not get announcments");
}
});
因为当你点击div时关闭toast我可以捕获被点击的div类,找到公告和用户ID并预先形成我的逻辑
//class could be warning, error, info, success : we only use error
$(".toast-error").live('click', function () {
var userId = $(this).find("#userId").val();
var announcementId = $(this).find("#announcementId").val();
var url = '/announcements/acknowledge/userid/' + userId + '/announceid/' + announcementId;
// ajax call to the controller to write the timestamp of the user clicking the toast announcement
$.ajax({
dataType: "json",
url: url,
success: function (data) {
if (data == '1') {
alert("Successfully acknowledged");
}
else {
alert("Data error");
}
},
error: function () {
}
});
});
答案 2 :(得分:0)
我对这些答案不太了解,所以我要添加自己的答案。我使用jquery创建了一个onclose函数,(当有人单击toast-close按钮时)-
$('.toast-close-button').click(function() {
*someCodeHere
});