34

div クリックでトーストの positionclass を変更しようとしています。

positionclass:Bottom に変更されません。ここで何が欠けていますか？

と使い方

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

デバッグ後、toastr.js の以下の getOptions メソッドが「positionclass:toast-bottom-full-width」を「toast-top-right」にオーバーライドしていることに気付きました

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

update 2 toastr.js の 140 行目で m optionsOverride が options.?? に正常に拡張されていません。

        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"');
});
4

4 に答える 4

39

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-30T20:07:06.380 に答える