我如何定製通知的外觀 - toastr-rails

Question

我試圖自定義烤麪包的位置。

我試圖做到這一點，但它不工作：

applications.js

//= require jquery 
    //= require toastr 
    //= require jquery_ujs 
    //= require turbolinks 
    //= require_tree . 

    $(document).ready(function() { 


    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" 
        } 

    }); 

我使用的是軌道5

，任何人都知道爲什麼它不工作？ Tks提前。

Answer 1

您是否使用toastr-rails？

我試過使用該但是我不能這樣做，所以我現在直接使用toastr：https://github.com/CodeSeven/toastr

只添加的application.js所以創建部分像：

<% unless flash.empty? %> 
<script type="text/javascript"> 
    <% flash.each do |f| %> 
     <% type = f[0].to_s.gsub('alert', 'error').gsub('notice', 'info') %> 
     toastr['<%= type %>']('<%= f[1] %>', '', {"closeButton": false, "debug": false, "positionClass": "toast-bottom-full-width", "onclick": null, "showDuration": "300", "hideDuration": "1000", "timeOut": "5000", "extendedTimeOut": "1000", "showEasing": "swing", "hideEasing": "linear", "showMethod": "fadeIn", "hideMethod": "fadeOut" }); 
    <% end %> 
</script> 

請注意，這些選項在代碼上是內聯的。

Answer 2

我知道這篇文章有點老了，但萬一別人在將來會絆倒它，這裏是我如何使用gem 'toastr-rails'在我的gem文件中工作。

//= require jquery 
//= require jquery_ujs 
//= require toastr 
//= require_tree . 

/*global toastr*/ 
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" 
} 

對於我來說，我需要添加/*global toastr*/行，因爲我得到一個控制檯錯誤告訴我沿着線的東西「toastr」不是一個變量。然後你可以使用你想要的任何選項。不要忘記將*= require toastr添加到您的application.css文件中。

再次，希望這有助於未來的人。