更改toastr通知的positionclass类
更改toastr通知的positionclass类
提问于 2013-06-24 18:33:22
我正在尝试在div单击时更改我的toast的位置类。
位置类:未更改为底部。？这里我漏掉了什么？
以及如何使用
toastr.optionsOverride =‘位置类: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‘to 'toast-top-right'
function getOptions() {
return $.extend({}, defaults, toastr.options);
}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的位置问题已经修复，但我不得不像下面这样提到position类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"');
});回答 4
Stack Overflow用户
回答已采纳
发布于 2013-07-01 04:07:06
您可以像这样设置它，如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
}Stack Overflow用户
发布于 2017-11-24 08:25:57
在下面更改position......see是一个简单而简单的步骤。
在显示消息之前，首先声明position类。
例如：toastr.options.positionClass = 'toast-bottom-right';
然后显示您的消息，如下所示：
Command:toastr“成功”
希望在work well....Thanks中实现
我刚把它用在我的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>Stack Overflow用户
发布于 2013-09-19 09:05:10
是的，这里肯定有个bug……
例如。设置选项有点麻烦。在调用我想要的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;
}]);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17273355
复制相关文章
相似问题
腾讯云开发者
