更改toastr通知的位置类

我试图在div点击上更改我的吐司的位置类。

positionclass：未更改为Bottom。？ 我在这里失踪了什么？

以及如何使用

toastr.optionsOverride =’positionclass：toast-bottom-full-width’;

@{ ViewBag.Title = "Index"; } 
Index
        $(document).ready(function () { // show when page load toastr.info('Page Loaded!'); $('#linkButton').click(function () { toastr.optionsOverride = 'positionclass:toast-bottom-full-width'; // show when the button is clicked toastr.success('Click Button', 'ButtonClick', 'positionclass:toast-bottom-full-width'); }); });   
 click here
  

更新1

调试之后我注意到toastr.js下面的getOptions方法覆盖’positionclass：toast-bottom-full-width’到’toast-top-right’

  function getOptions() { return $.extend({}, defaults, toastr.options); } 

更新2 toastr.js中的第140行未成功将m个optionsOverride扩展到选项。

  if (typeof (map.optionsOverride) !== 'undefined') { options = $.extend(options, map.optionsOverride); iconClass = map.optionsOverride.iconClass || iconClass; } 

更新3位置问题已得到修复，但我必须提到位置等级3次，如下所示。 我相信实现这一点的方法不那么嘈杂。

 $('#linkButton').click(function () { toastr.optionsOverride = 'positionclass = "toast-bottom-full-width"'; toastr.options.positionClass = 'toast-bottom-full-width'; //show when the button is clicked toastr.success('Click Button', 'ButtonClick', 'positionclass = "toast-bottom-full-width"'); }); 

Answer 1

您可以像这样设置它，如toastr演示中所示： http ：//codeseven.github.io/toastr/或此演示： http ：//plnkr.co/edit/6W9URNyyp2ItO4aUWzBB

 toastr.options = { "debug": false, "positionClass": "toast-bottom-full-width", "onclick": null, "fadeIn": 300, "fadeOut": 1000, "timeOut": 5000, "extendedTimeOut": 1000 } 

Answer 2

雅这里肯定有一个错误……

例如。 设置选项有点棘手。 我在调用我想要的toast类型之前动态设置它们。 第一次，选项无关紧要。 下一个吐司似乎拿起了选项，然后那之后的吐司不会改变。

例如

 var logger = app.mainModule.factory('logger', ['$log', function ($log) { var error = function (msg, data, showtoast) { if (showtoast) { toastr.options = { "closeButton": true, "debug": false, "positionClass": "toast-bottom-full-width", "onclick": null, "showDuration": "300", "hideDuration": "1000", "timeOut": "300000", "extendedTimeOut": "1000", "showEasing": "swing", "hideEasing": "linear", "showMethod": "fadeIn", "hideMethod": "fadeOut" }; toastr.error(msg); } $log.error(msg, data); }; var info = function (msg, data, showtoast) { if (showtoast) { toastr.options = { "closeButton": true, "debug": false, "positionClass": "toast-bottom-right", "onclick": null, "showDuration": "300", "hideDuration": "1000", "timeOut": "300000", "extendedTimeOut": "1000", "showEasing": "swing", "hideEasing": "linear", "showMethod": "fadeIn", "hideMethod": "fadeOut" }; toastr.info(msg); } $log.info(msg, data); }; var warning = function (msg, data, showtoast) { if (showtoast) { toastr.options = { "closeButton": false, "debug": false, "positionClass": "toast-bottom-right", "onclick": null, "showDuration": "300", "hideDuration": "1000", "timeOut": "5000", "extendedTimeOut": "1000", "showEasing": "swing", "hideEasing": "linear", "showMethod": "fadeIn", "hideMethod": "fadeOut" }; toastr.warning(msg); } $log.warning(msg, data); }; var success = function (msg, data, showtoast) { if (showtoast) { toastr.options = { "closeButton": false, "debug": false, "positionClass": "toast-bottom-right", "onclick": null, "showDuration": "300", "hideDuration": "1000", "timeOut": "5000", "extendedTimeOut": "1000", "showEasing": "swing", "hideEasing": "linear", "showMethod": "fadeIn", "hideMethod": "fadeOut" }; toastr.success(msg); } $log.info(msg, data); }; var logger = { success: success, error: error, info: info, warning: warning }; return logger; }]); 

Answer 3

我似乎无法找到2.0.3版本！ 最新版本是1.4.1 看到这个

我最终在’angular-toastr.tpls.js’中更改了positionClass的硬编码值

现在它正确定位！

Answer 4

改变位置是一个简单的简单步骤……见下文..

首先在显示消息之前声明位置类。

EX： toastr.options.positionClass = 'toast-bottom-right';

然后显示如下消息：

Command: toastr“成功”

希望它能很好地工作….谢谢

我只是在我的Laravel项目中使用它……如果你理解它，我会把我的代码放在这里….

toastr通知