自定義Zurb基金會Flash消息。有人可以告訴我我做錯了什麼

首先，我要感謝Babar和Matt Green在論壇上幫助我解決有關定製Flash消息和Foundation內部的問題。我非常感謝幫助。據說，我非常感謝有人向我指出我做錯了什麼，爲基金會定製了一個Flash消息。我只想做的就是在1秒後淡出閃光燈。我會用我的思考過程作爲評論發佈我的代碼，如果有人可以告訴我我要去哪裏錯，我會非常感激。我會盡量做到儘可能清楚。自定義Zurb基金會Flash消息。有人可以告訴我我做錯了什麼

首先，我在我的application.html.erb文件中的提示信息，看起來像這樣：

<% 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 %>

這是什麼代碼片段確實是創建一個動態閃光消息基於消息使它會根據消息分配一組.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的可以讓我自定義提示信息和foundation.min.js需要，我需要包括foundation.aler.js的插件。在我的application.html.erb的底部，我已經添加了這個來初始化代碼。

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

最後，我已經有這個代碼

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

什麼我做錯了我的應用程序/資產/ JavaScript的目錄中創建一個flash.js文件？哪裏有問題？難道是在我的應用程序文件而不是js/foundation.min.js它應該是javascripts/foundation.min.js。我試過這個，但它仍然不起作用。這令我非常憤怒，我不知道如何解決這個問題。一些幫助會很酷。

來源

2014-04-27 Dan Rubio

你所有的代碼似乎都很好，直到我們打你的flash.js文件。首先，我們應該從找到錯誤開始：（沒有冒犯性） - 您的選擇器會捕獲您的'.alert-box'類，但隨後會嘗試找到一個帶有該標記的標記 - 有兩行代碼可以做同樣的事情，以及複製/粘貼錯誤 - 只要jQuery從文檔中獲得'ready'事件，就會慢慢地淡出這些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'); 
}

什麼你下一步要做也許是提高你的selecter到自動指示成功只是淡出警報，因爲它並沒有真正影響用戶，如果它忽略了。另一方面，錯誤的警報應該指向你的臉並說「嘿！」，因此不會從用戶那裏採取行動而消失。

這裏有一些助手：

// 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

等等等等第四。通過這種方式，您可以根據自己的條件添加點擊事件，淡入淡出等。乾杯！

來源

2014-05-12 20:00:09 jstoone

自定義Zurb基金會Flash消息。有人可以告訴我我做錯了什麼

回答

相關問題