Question

首先，我要感谢Babar和Matt Green在论坛上帮助我解决以前有关自定义Flash消息和基金会内部的问题。我非常感谢你的帮助。话虽如此，我非常感谢有人请向我指出我为基金会定制flash消息的错误。我只想做的是让闪光信息在1秒后淡出。我会用我的思考过程发布我的代码作为评论，如果有人可以请告诉我我错在哪里，我会非常感激。我会尽量保持清醒。

首先，我的application.html.erb文件中有一条flash消息，如下所示：

<% flash.each do |name, msg| %>
    <% if msg.is_a?(String) %>
      <div data-alert class="alert-box 
        <%= name.to_s == 'notice' ? 'success' : 'alert' %>">
        <%= content_tag :div, msg %>
         <a href="#" class="close">&times;</a>
      </div>
    <% end %>
  <% end %>

这段代码的作用是根据消息创建动态flash消息，以便根据消息分配一类.alert-box成功或.alert-box警报。

好的，现在根据Babar和Matt Green的建议以及有关Foundation文档的信息，我在application.html.erb文件的head标签中要求使用jquery和foundation.min.js，如下所示：

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet'  
     type='text/css'>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="/js/foundation.min.js"></script>
  <title><%= content_for?(:title) ? yield(:title) : "MusikFish" %></title>

  <%= stylesheet_link_tag    "application" %>
  <%= javascript_include_tag "vendor/modernizr" %>
  <%= csrf_meta_tags %>
</head>

Jquery将允许我自定义flash消息和foundation.min.js需要我需要的插件，包括foundation.aler.js。在我的application.html.erb的底部，我添加了这个来初始化代码。

 <script>
   $(document).foundation();
 </script>

最后，我在我的app / assets / javascripts目录中创建了一个flash.js文件，其中包含此代码

$(document).ready(function(){
  $('.alert-box success').fadeOut('slow');
  $('.alert-box success').fadeOut('slow');
};

我做错了什么？问题出在哪儿？可能是我的应用程序文件而不是js / foundation.min.js应该是javascripts / foundation.min.js。我试过这个，它仍然无法正常工作。这激怒了我，我不知道如何解决这个问题。一些帮助会很酷。

Answer 1

所有代码似乎都很好，直到我们点击你的flash.js文件。首先我们应该从找到错误开始:(没有冒犯） - 你的选择器捕获你的'.alert-box'类，但后来试图找到一个-tag - 有两行做同样的事情，也可能是复制/粘贴错误 - 只要jQuery从文档中获得“就绪”事件，您就会慢慢淡出flash消息。

我们想做的是： - 一般选择你的'.alert-box'课程 - 1秒后淡出闪光信息。

您可以做的是添加如下延迟：

$(document).ready(function(){
    // find element(s) with the '.alert-box' class
    var $alertBox = $('.alert-box');

    // fade $alertBox out after 1 second (1000 ms)
    $alertBox.delay(1000).fadeOut('slow');
}

接下来你可以做的就是增强你的选择，只淡化自动显示成功的警报，因为如果它被忽略，它并不会真正影响用户。另一方面，错误的警报应该指向你并且说“嘿！”，因此如果没有从用户那里采取行动，它就不会消失。

以下是一些助手：

// let's grab the alert
var $alert = $('.alert-box');

// now determine which kind of error it is
if($alert.hasClass('error'))
    // we have an error

if($alert.hasClass('success'))
    // we have success in our life

所以第四个。通过这种方式，您可以根据您的条件添加点击事件，淡出等。干杯！

自定义Zurb Foundation Flash消息。有人可以告诉我我做错了什么

1 个答案: