Пользовательские классы и форматирование на флэш-сообщениях для Twitter Настройки загрузки Bootstrap

Ответ 1

Мой ответ для Bootstrap 2.0 начинается с полезного ответа @Railslerner, но использует частичный код в частичном.

app/helpers/application_helper.rb (так же, как ответ @Railslerner)

module ApplicationHelper
  def flash_class(level)
    case level.to_sym
    when :notice then "alert alert-info"
    when :success then "alert alert-success"
    when :error then "alert alert-error"
    when :alert then "alert alert-error"
    end
  end
end

Где-то в приложении /views/layouts/application.html.erb:

<%= render 'layouts/flash_messages' %>

приложение/просмотров/макеты/_flash_messages.html.erb

<div>
  <% flash.each do |key, value| %>
    <div class="<%= flash_class(key) %> fade in">
      <a href="#" data-dismiss="alert" class="close">×</a>
      <%= value %>
    </div>
  <% end %>
</div>

Отличия:

• Каждый раз, когда он вызывается, он не перебирает разные уровни ошибок.
• Вместо этого выполняется цикл хэширования флэш-памяти, если хэш содержит сообщения (после подход в учебнике Michael Hartl Rails).
• Не используется тег <p>, больше не требуется в Bootstrap 2.0.

Не забудьте включить bootstrap-alert.js, чтобы функция затухания и закрытия работала. Если вы используете самоцветов bootstap-sass, добавьте эту строку в app/assets/javascripts/application.js:

//= require bootstrap-alert

Обновление 6/5/2015: После обновления до Rails 4.2 я обнаружил, что level был (по крайней мере иногда) включенным как String и не смог сопоставить оператор case в ApplicationHelper, Изменено на level.to_sym.

Ответ 2

Вот мой ответ с Bootstrap 2.0.0

приложение/хелперы/application_helper.rb

module ApplicationHelper
  def flash_class(level)
    case level
    when :notice then "alert alert-info"
    when :success then "alert alert-success"
    when :error then "alert alert-error"
    when :alert then "alert alert-error"
    end
  end
end

приложение/просмотров/общий/_flash_messages.html.erb

<% [:notice, :error, :alert].each do |level| %>
   <% unless flash[level].blank? %>
     <div class="<%= flash_class(level) %> fade in">
      <a href="#" data-dismiss="alert" class="close">×</a>
       <%= content_tag :p, flash[level] %>
     </div>
   <% end %>
<% end %>

Это дает вам затухание при закрытии и закрытии кнопки. Если вы использовали HAML, проверьте этот пост: http://ruby.zigzo.com/2011/10/02/flash-messages-twitters-bootstrap-css-framework/

Ответ 3

Я добавляю новый ответ для Bootstrap 3.0 на основе ответа Марка Берри. Бутстрап CSS для оповещений находится на http://getbootstrap.com/components/#alerts

app/helpers/application_helper.rb

module ApplicationHelper
  def flash_class(level)
    case level
    when :notice then "alert-info"
    when :success then "alert-success"
    when :error then "alert-danger"
    when :alert then "alert-warning"
    end
  end
end

приложение/просмотров/макеты/_flash_messages.html.erb

<div>
  <% flash.each do |key, value| %>
    <div class="alert alert-dismissable <%= flash_class(key) %> fade in">
       <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
      <%= value %>
    </div>
  <% end %>
</div>

Отличия:

• Измените классы Bootstrap для ошибок и предупреждений.
• Добавьте .alert-dismissable и измените код для кнопки закрытия.

Ответ 4

Попробуйте следующее:

application_helper.rb

def flash_class(level)
  case level
    when :notice then "info"
    when :error then "error"
    when :alert then "warning"
  end
end

а затем

<% [:notice, :error, :alert].each do |level| %>
  <% unless flash[level].blank? %>
    <div data-alert="alert" class="alert-message <%= flash_class(level) %> fade in">
      <a class="close" href="#">×</a>
      <%= content_tag :p, flash[level] %>
    </div>
  <% end %>
<% end %>

Ответ 5

Имя Bootstrap 3 класса (скорректировано с ответа Марка Берри):

def flash_class(level)
  case level
    when :notice then "alert alert-info"
    when :success then "alert alert-success"
    when :error then "alert alert-danger"
    when :alert then "alert alert-warning"
  end
end

Ответ 6

Я бы предложил добавить классы для разных уровней уведомлений, используемых в rails:

.alert-notice {
    background-color: #f2dede;
    border-color: #eed3d7;
    color: #b94a48; }

и др.

и использовать их в соответствии с примерами из бутстрапа twitter:

<% flash.each do |key, value| %>
    <div class="alert alert-<%= key %>">
        <a href="#" data-dismiss="alert" class="close">×</a>
        <%= value %>
    </div>
<% end %>

Это делает устаревший класс ApplicationHelper # flash_class (level) устаревшим. Это жесткое кодирование в приложении, которое пахнет. Стилирование относится к таблицам стилей.

Ответ 7

Это не идеальное решение, но, предполагая, что вы когда-либо используете флеш-сообщения "уведомление" или "ошибка", вы можете использовать это:

...
<% content_tag :div, :id => "flash_#{name}", :class => "alert-message #{name == "notice" ? "success" : name}" do %>
...

Ответ 8

Если вы хотите полностью изменить стиль флэш-сообщения - например, если вы не хотите, чтобы сообщение исчезло, вы можете сделать что-то вроде этого:

В вашем контроллере:

flash[:order_error] = "This is an important error that shouldn't fade!"

Затем сравните клавишу вспышки, чтобы показать соответствующий стиль (с помощью to_sym):

<% flash.each do |key, msg| %>
  <% if key == 'order_error'.to_sym %>
    <div class="error" id="newErrorStyle"><%= msg %></div>
  <% else %>
    <div class="<%= key %>" id="flash-<%= key %>"><%= msg %></div>
    <% content_tag :script, :type => "text/javascript" do -%>
      setTimeout("new Effect.Fade('flash-<%= key %>');", 8000);
    <% end %>
  <% end %>
<% end %>