logo标签列表

更改 toastr 通知的 positionclass

jqueryasp.net-mvctoastr
38

我试图在点击 div 后更改 toast 的 positionclass 位置类，但是它没有改变到底部。我错过了什么吗？

还有，如何使用 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);
    }

更新2： toastr.js中第140行无法成功将m optionsOverride扩展为options。??

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

更新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"');
});
5个回答
42
谢谢@John。我从给定的例子中找到了答案，由于某些原因，我需要设置两次才能使其正常工作。感谢您提供如此棒的库。 - swapneel
1
@JohnPapa，您能解释一下应该把这个放在哪里吗？我已经尝试过放在我的文档onready中，也尝试了放在我的toastr.warning调用之前。但好像都不起作用。顺便说一句，我只是想改变showDuration的值，让我的选项看起来像这样：toastr.options = { "showDuration": "20000", }。 - wilblack
版本 2.0.2 存在一个问题，即在某些情况下不会尊重 positionClass：请参见 GitHub 上的问题。这个问题已经在 2.0.3 中得到修复，但是在我撰写此评论时，还没有发布 2.0.3 版本。 - Doctor Blue
没错，这个问题已经在下一个点版本2.0.3中得到修复。很快就会发布，或者你现在可以从Github上获取。 - John Papa
事实上，toastr 2.0.3 现在已经发布在 bower、nuget 上，并很快会发布在 cdnjs 上。 - John Papa
1
有一个错误：需要用“=”代替“：”。我尝试编辑帖子，但它需要至少6个字符... - Sebastian D'Agostino
9
这是一组轻松简单的步骤来更改位置......请查看下面。
首先，在显示消息之前声明位置类。
例如：toastr.options.positionClass = 'toast-bottom-right'; 然后按以下方式显示您的消息： Command: toastr"success"
希望它可以正常工作....谢谢
我刚在我的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通知

对于左上角：toastr.options.positionClass = "toast-top-left"; - Martlark
7

嗯，这里肯定有个错误...

例如，设置选项有点棘手。我在调用所需的吐司类型之前动态设置它们。第一次，选项并不重要。下一个吐司似乎会捕捉到选项，然后再下一个吐司就不会改变了。

例如

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;
}]);
我也遇到了这个问题。如果你解决了，请告诉我。 - Don Rolling
我的问题是顶部容器包含所有的提示框。如果它们的样式不同，那么第一个将起作用。调用toastr.remove()会立即清除所有内容并重置定位。 - Don Rolling
1
在我的情况下，位置不起作用，因为我在选项属性之前调用了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")
1

我似乎找不到2.0.3版本！最新版本是1.4.1 请查看此链接

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

现在它可以正确居中显示！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接