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

    });

我使用rails 5，任何人都知道它为什么不起作用？请事先提前。

Answer 1

你使用toastr-rails吗？

我已尝试使用但我不能这样做，所以现在我直接使用toastr：https://github.com/CodeSeven/toastr

只需添加application.js，就这样创建一个部分：

jquery

请注意，选项在代码中是内联的。

Answer 2

我知道这篇文章有点陈旧，但万一其他人在将来偶然发现它，这就是我在我的gem文件中使用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文件中。

再一次，希望这能帮助将来的某个人。

Answer 3

toastr-rails现在已经过时了，我强烈建议单独添加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' %>

如何自定义通知的外观 - toastr-rails

3 个答案: