Question

我一直在尝试根据需要在我的应用程序布局工作中添加样式添加到此Flash消息：

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

现在问题是flash消息是用ajax呈现的，因此样式应该只在出现flash消息时出现。然而，这种情况并非如此。即使没有闪光信息，也会出现绿色div，这看起来很尴尬。

现在我尝试过这样的事情：

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

我使用"<%= key%>"类进行样式设置。我将<div id="notice">留在外面进行ajax渲染，因为它似乎没有在ruby块中拾取div。但是，CSS样式不会使用"<%= key%>"类进行渲染。所以我似乎陷入了两个糟糕的选择之中：

我的应用程序中始终有一个尴尬的绿色div，只能查看呈现flash消息时的效果或
没有尴尬的绿色div，但是没有样式的flash消息，所以它看起来像一些尴尬的文本。

有什么方法可以让两个世界都做到最好？

Answer 1

我会为display: none;框设置#notice，并在jQuery代码中显示

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

你可以在填写代码之后和fadeIn之前做到这一点，确保使用回调，这样就不会到处乱转。

Answer 2

你能分享你生成这个的AJAX吗？

我会尝试在你的情况下尝试使用jQuery的append()方法在触发flash消息时将flash DIV添加到页面顶部，然后在一些计时器之后将其取走。

- 编辑 -

这是一个“例如”的例子：

我们只是说你的ajax调用正在点击FoosController #Update，并从#show动作发送。

在节目视图中我会有类似的东西：

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

我会将你的flash消息放在一个部分（使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' %>');

然后为了使其自动淡出，您可以包含一个脚本（在具有flash消息的特定视图中或在application.js文件中），如：

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

这将使任何div.flash淡出并在5秒后消失。或者，您可以在使用jQuery click（）方法单击后将其消除。

我希望有所帮助。

- 再次编辑 -

根据this railscast，使用RJS执行此操作：

在您的视图中创建：

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

在您的RJS文件中执行：

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

将Flash消息放在一个部分中仍然是一个好主意。请务必按照第一次编辑中的说明将Flash消息放入div.flash，您应该好好去。

Answer 3

是。当您的ajax请求进入时，您可以使用javascript应用样式，或者将请求的内容包装在具有唯一样式的容器中，这在原始页面上不存在。

基本上，隐藏“绿色框”直到它被填充或者用ajax发送“绿色框”。

疯狂的CSS困境

3 个答案: