更改位置类toastr通知

我想改变位置类为div点击我的烤面包。更改位置类toastr通知

positionclass：不会更改为Bottom。我在这里错过了什么？

以及如何使用

toastr.optionsOverride = 'positionclass：烤面包-底全宽度';

@{ 
    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

调试我注意到，下面getOptions方法从toastr.js被重写 'positionclass：烤面包-底全宽' 之后为“烤面包机顶 - 右”

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

更新2林e 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"'); 
});

来源

2013-06-24 swapneel

只需将它像这样，如图所示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 
}

来源

2013-06-30 20:07:06

Thanks @John。我从给出的例子中找出了出于某些原因，我需要设置它2次才能使其工作。谢谢你真棒图书馆 – swapneel

@JohnPapa你能解释一下这个吗？我已经尝试将我的文档准备好，并且在我致电toastr.warning之前。它似乎并不需要。顺便说一句我只是想改变showDuration，所以我的选项看起来像这样：'toastr.options = {showmore.com“：”20000“， }' – wilblack

版本'2.0.2'有一个问题，其中'positionClass'不是在所有情况下都受到尊重：[请参见GitHub上的问题]（https://github.com/CodeSeven/toastr/issues/156）。它固定在'2.0.3'中，但是在我写这篇评论的时候，还没有2.0.3版本。 – Scott

雅这里有肯定是一个错误......

对于例。设置选项有点粘。我在调用我想要的吐司类型之前动态设置它们。第一次，选项并不重要。接下来的敬酒似乎选择了选项，然后之后的敬酒不会改变。

例如

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; 
}]);

来源

2013-09-19 01:05:09

我也有这个问题。 LMK如果你想出来的话。 –

我的问题是，顶级容器可容纳所有面包。如果风格不同，那么第一个规则。调用toastr.remove（）将立即清除所有内容并重置定位。 –

我似乎无法找到版本2.0.3！最新的版本是1.4.1 see this

我结束了在不断变化的positionClass的硬编码值“角toastr.tpls.js”

现在它被正确定心！

来源

2015-06-03 19:57:23

它是一个简单的简单步骤来更改位置......见下文..

表示消息之前首先声明的位置类。

EX：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

来源

2017-11-24 00:25:57

更改位置类toastr通知

回答

相关问题