我怎么可以自定义通知的外观 - toastr护栏

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，任何人都知道为什么它不工作？韩国社交协会提前。

Answer 1

您是否使用toastr护栏？

我试过使用该但是我不能这样做，所以我现在直接使用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

toastr护栏现在已经过时，我强烈建议增加toastr独立。如果您在使用Rails 5+，你可以用纱线加toastr：

yarn add toastr

当然，你仍然可以下载toastr，复制并粘贴到资产过 - 如果你没有纱。

然后添加一个帮手：

module FooHelper
  def toastr_flash_class(type)
    case type
    when "alert"
      "toastr.error"
    when "notice"
      "toastr.success"
    else
      "toastr.info"
    end
  end
end

创建部分，例如_toaster.html.erb

<%= content_tag(:script) do %>
  <% flash.each do |type, message| %>
    <%= toastr_flash_class("#{type}") %>('<%= message %>')
  <% end %>
<% end %>

打电话给你的部分从你的布局，或从您的观点：

<%= render 'layouts/shared/toastr' %>

Answer 3

我知道，这个帖子是慈祥的老人，但在它万一别人绊倒在未来，这里是我得到了toastr在我的宝石文件中使用gem 'toastr-rails'工作。

//= 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文件了。

同样，希望这可以帮助别人的未来。