toastr通知のポジションクラスを変更する

divクリック時に私のトーストのpositionclassを変更しようとしています。toastr通知のポジションクラスを変更する

ポジションクラス：ボトムに変更されません。私はここで何が欠けていますか？

と

toastr.optionsOverride = 'positionclass：トーストボトム全角' を使用する方法。

@{ 
    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>

更新私はtoastr.jsからGETOPTIONS以下の方法が「positionclass：トーストボトム全角」をオーバーライドしていることに気づいたデバッグ後1

に「乾杯トップ

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

アップデート」右回転2林toastr.jsのe 140はではありません。 mを延長します。オプションをオプションにオーバーライドしますか？

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

更新3 Postionの問題が修正されましたが、私は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"'); 
});

出典

2013-06-24 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 
}

出典

2013-06-30 20:07:06

ありがとう@ジョン。私はいくつかの理由で私はそれを動作させるために2回それを設定する必要があります与えられた例から考え出した。すばらしい図書館ありがとうございます – swapneel

@JohnPapaこれをどこに置くべきか説明できますか？私はonreadyを書類に入れようとしました、そして、toastr.warningへの私の呼び出しの前にも。それは取るようではありません。ところで、私はshowDurationを次のように変更しようとしています： 'toastr.options = { " showDuration "：" 20000 "、 } – wilblack

バージョン' 2.0.2'では 'positionClass'が問題になりません全ての場合において尊重されています：[GitHubに関する問題を参照]（https://github.com/CodeSeven/toastr/issues/156）。これは '2.0.3'で修正されましたが、私がこのコメントを書いている時点ではまだ' 2.0.3'のリリースはありません。 – Scott

雅ここでバグが間違いなくあります...

のために例。オプションを設定するのはやや固いです。私は私が望むトーストタイプを呼び出す前にそれらを動的に設定しました。初めてのオプションは問題ではありません。次のトーストはオプションを拾うようだが、その後のトーストは変わらない。

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

出典

2013-09-19 01:05:09

私もこの問題を抱えています。あなたがそれを理解したらLMK。 –

私の問題は、一番上のコンテナがすべてのトーストを保持していたことでした。スタイルが異なる場合は、最初のルールが適用されます。 toastr.remove（）を呼び出すと、すぐにすべてがクリアされ、位置がリセットされます。 –

例えば

私はバージョン2.0.3を見つけるように見えることはできません！最新バージョンは1.4.1 see this

である私は今、それが正しく芯出しされた「アンギュラtoastr.tpls.js」

にpositionClassためのハードコードされた値を変更してしまいました！

出典

2015-06-03 19:57:23

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

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

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

次に、あなたのメッセージは以下のように示しています

Command: "成功" toastr

は、私はちょうどそれを使用おかげ

....うまく仕事でそれを願っています私の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 notifications

出典

2017-11-24 00:25:57

toastr通知のポジションクラスを変更する

答えて

関連する問題