Сумасшедшая трудная дилемма CSS

Question

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

<div id= "notice"><% flash.each do |key, value| %>
   <%= value %>
<% end %></div>

Вот код CSS:

#notice {
    background: #e6efc2;
    color: #264409;
    border-color: #c6d880;
    padding: 0.8em;
    margin-bottom: 1em;
    border: 2px solid #ddd;
}     

Теперь проблемаэто означает, что флэш-сообщение отображается с помощью ajax, и поэтому предполагается, что стилизация появляется только при появлении флэш-сообщения.Однако, это не так.Зеленый div появляется даже тогда, когда нет флеш-сообщения, и это выглядит довольно неловко.

Теперь я попробовал что-то вроде этого:

<div id= "notice"><% flash.each do |key, value| %>
  <div class="<%= key %>"><%= value %></div>
<% end %></div>

, где я использую класс "<%= key%>"для укладки.Я оставляю <div id="notice"> снаружи для рендеринга ajax, потому что кажется, что он не поднимает div в блоке ruby.Однако стиль CSS не отображается с классом "<%= key%>".Таким образом, мне кажется, что я застрял между двумя плохими вариантами:

1. В моем приложении всегда присутствует неуклюжий зеленый div, который выглядит только так, как при отображении флеш-сообщения или
2. Не иметь неловкого зеленого div, но не иметь стиля для флеш-сообщения, так что оно просто выглядит как какой-то неловкий текст.

Есть ли способ, которым я могу получить лучшее из обоих миров

Answer 1

Я бы настроил display: none; для поля #notice и указал бы это в коде jQuery

$('#notice').css('display', 'block')

Вы можете получить это сразу после того, как заполните код и перед тем, как вы начнете использовать fadeIn, убедитесь, что вы используете обратные вызовы, чтобы вещи никуда не перепрыгивали.

Answer 2

Можете ли вы поделиться своим AJAX, который генерирует это?

В вашей ситуации я бы попробовал использовать метод jQuery append () , чтобы добавить флэш-DIV вверху страницы при запуске флэш-сообщения, а затем убрать его через некоторое время. .

- EDIT -

Вот пример "например":

Давайте просто скажем, что ваш ajax-вызов выполняет FoosController # Update и отправляется из действия #show.

В представлении шоу у меня будет что-то вроде:

<div class="notices"></div>

Я бы поместил ваши флеш-сообщения в частичное (упрощает код ajax), так что-то вроде views/shared/_flash.html.erb ...

<div class="flash"><% flash.each do |key, value| %>
   <%= value %>
<% end %></div>

В jQuery + ERB я бы написал update.js.erb файл в views/foos/

$('div.notices').append('<%= render 'shared/flash' %>');

Затем, чтобы сделать его автоматически исчезающим, вы можете включить скрипт (либо в специальном представлении с флэш-сообщениями, либо в файле application.js), например:

$(document).ready(function() {
  $('div.flash').delay(5000).fadeOut();
});

Это приведет к тому, что любая div.flash исчезнет и исчезнет через 5 секунд. В качестве альтернативы вы можете отключить его после щелчка, используя метод jQuery click ().

Надеюсь, это поможет.

- ИЗМЕНИТЬ СНОВА -

Согласно этому Railscast , сделать это с RJS:

На ваш взгляд создайте:

<div id="notices"></div>

В вашем файле RJS выполните:

page.insert_html :bottom, :partial=>'shared/flash'

Это все еще хорошая идея, чтобы поместить ваши флэш-сообщения в частичную. Убедитесь, что вы поместили флэш-сообщения в div.flash, как описано в первом редактировании, и все будет хорошо.

Answer 3

Да.Вы можете применить стили с помощью javascript, когда поступит ваш ajax-запрос, или же содержимое запроса будет помещено в контейнер с уникальными стилями, которых нет на исходной странице.

По сути, скрывайте «зеленую коробку», пока она не будет заполнена, или отправьте «зеленую коробку» с помощью ajax.