jquery – 更改toastr通知的positionclass

前端之家收集整理的这篇文章主要介绍了jquery – 更改toastr通知的positionclass前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在为div点击改变我的吐司的positionclass.

positionclass:is not changed to Bottom.? what am i missing here?

以及如何使用

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

调试之后,我注意到下面的getOptions方法从toastr.js被覆盖
‘positionclass:toast-bottom-full-width’to’toast-top-right’

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

更新2 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','positionclass = "toast-bottom-full-width"');
});

解决方法

你可以这样设置,如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
}

猜你在找的jQuery相关文章