更改为positionclass通知toastr [英] Changing positionclass for toastr Notification
问题描述
我试图改变positionclass我对DIV点击敬酒。
positionclass：不更改为底？我失去了什么吗？
和如何使用
toastr.optionsOverride ='positionclass：烤面包底部全宽';
@ {
ViewBag.Title =指数;
}＆LT; H2＆GT;指数＆LT; / H＆GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =@ Url.Content（〜/脚本/ jQuery的-1.6.4.js）＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =@ Url.Content（〜/脚本/ toastr.js）＆GT;＆LT; / SCRIPT＆GT;
＆LT;链接rel =stylesheet属性类型=文/ CSS的href =〜/内容/ toastr.css/＆GT;
＆LT; /头＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{ //显示当页面加载
toastr.info（'页面载入！'）; $（'＃LinkButton的'）。点击（函数（）{
toastr.optionsOverride ='positionclass：烤面包底部全宽;
//显示当按钮被点击
toastr.success（'点击按钮，ButtonClick，positionclass：烤面包底部全宽'）;
}）; }）;＆LT; / SCRIPT＆GT;＆LT;身体GT;
＆LT; DIV ID =LinkButton的＆GT;点击此处＆lt; / DIV＆GT;
＆LT; /身体GT;更新1
调试后，我已经注意到了，下面getOptions方法从toastr.js被覆盖
positionclass：烤面包底部全宽到敬酒-右上角函数getOptions（）{
返回$ .extend（{}，默认值，toastr.options）;
}更新2 在toastr.js 140线是不是<STRONG>成功延长米
optionsOverride中的选项。??如果（typeof运算（map.optionsOverride）！==未定义）{
选项= $ .extend（选项，map.optionsOverride）;
iconClass = map.optionsOverride.iconClass || iconClass;
}更新3
当前位置问题已解决，但我不得不提到如下3类职位倍。我相信有一个不太吵闹的方式来实现这一目标。$（'＃LinkButton的'）。点击（函数（）{ toastr.optionsOverride ='positionclass =面包底，全角;
toastr.options.positionClass ='烤面包底部全宽;
//显示当按钮被点击
toastr.success（'点击按钮，ButtonClick'，'positionclass =面包底，全宽'）;
}）;
解决方案您可以只设置它像这样，如图所示toastr演示：的 HTTP：//$c$cseven.github.io/toastr/
或者这个演示： http://plnkr.co/edit/6W9URNyyp2ItO4aUWzBBtoastr.options = {
调试：假的，
positionClass：面包底，全宽
onclick事件：空，
淡入：300，
淡出：1000年，
超时：5000，
extendedTimeOut：1000
}I am trying to change positionclass for my toast on div click.
positionclass:is not changed to Bottom.? what am i missing here?
and how to use
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
after debugging i have noticed that below getOptions method from toastr.js is overriding 'positionclass:toast-bottom-full-width' to 'toast-top-right'
function getOptions() { return $.extend({}, defaults, toastr.options); }update 2 Line 140 in toastr.js is not successfully extending m optionsOverride in to options.??
if (typeof (map.optionsOverride) !== 'undefined') { options = $.extend(options, map.optionsOverride); iconClass = map.optionsOverride.iconClass || iconClass; }update 3 Postion 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.
$('#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"'); });
解决方案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.options = { "debug": false, "positionClass": "toast-bottom-full-width", "onclick": null, "fadeIn": 300, "fadeOut": 1000, "timeOut": 5000, "extendedTimeOut": 1000 }
这篇关于更改为positionclass通知toastr的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
