更改 toastr 通知的位置类答案

【问题标题】：Changing positionclass for toastr Notification更改 toastr 通知的位置类
【发布时间】：2013-06-20 20:01:58
【问题描述】：

我正在尝试在 div 点击时更改我的 toast 的位置类。

positionclass: 没有改为Bottom.?我在这里错过了什么？

以及如何使用

toastr.optionsOverride = 'positionclass:toast-bottom-full-width';

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<head>
    <title></title>
    <script type ="text/javascript" src ="@Url.Content("~/Scripts/jquery-1.6.4.js")"></script>
    <script type ="text/javascript" src ="@Url.Content("~/Scripts/toastr.js")"></script>
    <link rel="stylesheet" type="text/css" href="~/content/toastr.css" />
</head>
<script type="text/javascript">
    $(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');
        });

    });

</script>

<body>
    <div id ="linkButton" > click here</div>
</body>

更新 1

调试后我注意到来自 toastr.js 的 getOptions 方法被覆盖 'positionclass:toast-bottom-full-width' 到 'toast-top-right'

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

update 2 toastr.js 中的第 140 行未成功扩展 m optionsOverride in to options.??

        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"');
});

【问题讨论】：

标签： jquery asp.net-mvc toastr

【解决方案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
}

【讨论】：

谢谢@John。我从给定的示例中弄清楚出于某些原因，我需要将其设置 2 次才能使其正常工作。感谢您的精彩图书馆
@JohnPapa 你能解释一下把这个放在哪里吗？我已经尝试将我的文档准备好，也就是在我致电 toastr.warning 之前。似乎不需要。顺便说一句，我只是想改变 showDuration 所以我的选项看起来像这样：toastr.options = { "showDuration": "20000", }
版本2.0.2 存在一个问题，即positionClass 在所有情况下都不受尊重：See the issue on GitHub。它已在 2.0.3 中修复，但在我撰写此评论时，还没有 2.0.3 发布。
正确，这已在下一个版本 2.0.3 中得到修复。应该很快就会出来，或者你现在可以从 github 上获取。
有一个错误：而不是“：”它需要是“=”。我试图编辑帖子，但它需要至少有 6 个字符...

【解决方案2】：

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

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

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

然后显示您的消息如下：

Command:toastr“成功”

希望它运行良好....谢谢

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

<script src="{{ asset('js/toastr.min.js') }}" type="text/javascript"></script>
<script type="text/javascript">


    @if (Session::has('success'))

        toastr.options.positionClass = 'toast-bottom-right';
        toastr.success("{{ Session::get('success') }}");

    @endif


</script>

toastr notifications

【讨论】：

【解决方案3】：

是的，这里肯定有一个错误......

例如。设置选项有点棘手。我在调用我想要的 toast 类型之前动态设置它们。第一次，选项无关紧要。下一个 toast 似乎选择了选项，然后之后的 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;
}]);

【讨论】：

我也遇到了这个问题。 LMK 如果你想通了。
我的问题是顶部容器包含所有吐司。如果他们的风格不同，那么第一个规则。调用 toastr.remove() 将立即清除所有内容并重置定位。

【解决方案4】：

我似乎找不到 2.0.3 版！最新版本是1.4.1 see this

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

现在它可以正确居中了！

【讨论】：

【解决方案5】：

在我的情况下，位置不起作用，因为我在 options 属性之前调用了 toast：

之前

toastr["info"]("Testing Toast")

toastr.options = {
  "closeButton": true,
  "debug": false,
  "newestOnTop": false,
  "progressBar": false,
  "positionClass": "toast-bottom-right",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
}

之后

toastr.options = {
  "closeButton": true,
  "debug": false,
  "newestOnTop": false,
  "progressBar": false,
  "positionClass": "toast-bottom-right",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
}

toastr["info"]("Testing Toast")

【讨论】：