jQuery 更改 toastr 通知的位置类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17273355/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing positionclass for toastr Notification
提问by swapneel
I am trying to change positionclass for my toast on div click.
我正在尝试在 div 单击时更改我的吐司的位置类。
positionclass:is not changed to Bottom.? what am i missing here?
positionclass: 未更改为底部。？我在这里错过了什么？
and how to use
以及如何使用
toastr.optionsOverride = 'positionclass:toast-bottom-full-width';
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>
update 1
更新 1
after debugging i have noticed that below getOptions method from toastr.js is overriding 'positionclass:toast-bottom-full-width' to 'toast-top-right'
调试后我注意到 toastr.js 下面的 getOptions 方法将“positionclass:toast-bottom-full-width”重写为“toast-top-right”
function getOptions() {
return $.extend({}, defaults, toastr.options);
}
update 2Line 140 in toastr.js is not successfullyextending m optionsOverride in to options.??
更新 2toastr.js 中的第 140 行未成功将 m optionsOverride 扩展到选项中。??
if (typeof (map.optionsOverride) !== 'undefined') {
options = $.extend(options, map.optionsOverride);
iconClass = map.optionsOverride.iconClass || iconClass;
}
update 3Postion issue has been fixed but I have to mention position class 3 times as below. I am sure there is a less noisy way to achieve this.
更新 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"');
});
回答by John Papa
You can just set it like this, as shown in the toastr demo: http://codeseven.github.io/toastr/or this demo: http://plnkr.co/edit/6W9URNyyp2ItO4aUWzBB
您可以像这样设置它，如 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
}
回答by Doug Beard
Ya there's definately a bug here...
是的，这里肯定有一个错误......
For example. Setting the options is a bit sticky. I set them dynamically right before call the toast type I want. The first time, the options don't matter. The next toast seem to pick up the options, and then the toast after that won't change.
例如。设置选项有点棘手。我在调用我想要的 toast 类型之前动态设置它们。第一次，选项无关紧要。下一个吐司似乎选择了选项，然后之后的吐司不会改变。
For example
例如
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;
}]);
回答by Shimul K. Sarkar
it's a easy simple steps to change the position......see in below..
这是一个简单的简单步骤来改变位置......见下文......
first declare the position class before showing the message.
在显示消息之前首先声明位置类。
EX: toastr.options.positionClass = 'toast-bottom-right';
前任： toastr.options.positionClass = 'toast-bottom-right';
Then show your message as below:
然后显示您的消息如下：
Command:toastr"success"
Command:烤面包机“成功”
Hope it with work well....Thanks
希望它工作顺利....谢谢
I just used it in my Laravel project.... I will put my code here if you understand it....
我刚刚在我的 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>
