web-dev-qa-db-ja.com

toastr通知の位置クラスを変更する

Divクリックでトーストの位置クラスを変更しようとしています。

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);
    }

更新2 toastr.jsの140行目は正常に mオプションを拡張するoptions。??

        if (typeof (map.optionsOverride) !== 'undefined') {
            options = $.extend(options, map.optionsOverride);
            iconClass = map.optionsOverride.iconClass || iconClass;
        }

更新位置の問題は修正されましたが、以下のように位置クラスに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"');
});
jqueryasp.net-mvctoastr
26
swapneel

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
}
35
John Papa

ここには間違いなくバグがあります...

例えば。オプションの設定は少し厄介です。必要なトーストタイプを呼び出す直前に動的に設定します。初めて、オプションは関係ありません。次のトーストはオプションを選択するようで、その後のトーストは変更されません。

例えば

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;
}]);
6
Doug Beard

位置を変更するのは簡単な簡単な手順です......下記を参照してください。

メッセージを表示する前に、最初に位置クラスを宣言します。

例：toastr.options.positionClass = 'toast-bottom-right';

次に、次のようにメッセージを表示します。

Command:toastr "success"

うまくいくことを願って...ありがとう

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>

toastr通知

2
Shimul K. Sarkar

バージョン2.0.3が見つからないようです！最新バージョンは1.4.1です こちらをご覧ください

「angular-toastr.tpls.js」のpositionClassのハードコードされた値を変更することになりました

これで正しくセンタリングされました！

0
Arnold.Krumins