更改位置類toastr通知

我想改變位置類爲div點擊我的烤麪包。更改位置類toastr通知

positionclass：不會更改爲Bottom。我在這裏錯過了什麼？

以及如何使用

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>

更新1

調試我注意到，下面getOptions方法從toastr.js被重寫 'positionclass：烤麪包-底全寬' 之後爲「烤麪包機頂 - 右」

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

更新2林e 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', '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

Thanks @John。我從給出的例子中找出了出於某些原因，我需要設置它2次才能使其工作。謝謝你真棒圖書館 – swapneel

@JohnPapa你能解釋一下這個嗎？我已經嘗試將我的文檔準備好，並且在我致電toastr.warning之前。它似乎並不需要。順便說一句我只是想改變showDuration，所以我的選項看起來像這樣：'toastr.options = {showmore.com「：」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

我結束了在不斷變化的positionClass的硬編碼值「角toastr.tpls.js」

現在它被正確定心！

來源

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通知

回答

相關問題