Настройка Zurb Foundation Flash сообщений. Может кто-нибудь подскажите пожалуйста что я делаю не так

Question

Настройка Zurb Foundation Flash сообщений. Может кто-нибудь подскажите пожалуйста что я делаю не так

0

Для начала я хотел бы поблагодарить Бабара и Мэтта Грина на форуме, чтобы помочь мне с моими предыдущими вопросами о настройке флеш-сообщений и внутренних документов Фонда. Я очень ценю эту помощь. С учетом сказанного, я очень хотел бы, чтобы кто-то понравился мне, что я делаю неправильно, чтобы настроить флеш-сообщение для Фонда. Все, что я просто хочу сделать, это заставить флэш-сообщения исчезнуть через 1 секунду. Я отправлю свой код с моим мыслительным процессом в качестве комментария, и если кто-то может рассказать мне, где я ошибаюсь, я бы очень это оценил. Я постараюсь быть максимально ясным.

Во-первых, у меня есть флеш-сообщение в файле 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 в зависимости от сообщения.

Итак, теперь, согласно рекомендациям Бабара и Мэтта Грина, и из информации о документах Foundation, мне потребовались как jquery, так и foundation.min.js в моих тегах заголовка файла application.html.erb так:

<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 позволит мне настроить флеш-сообщение, а для основания.min.js требуются плагины, которые мне нужны, включая foundation.aler.js. В нижней части моего application.html.erb я добавил это для инициализации кода.

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

Наконец, я создал файл flash.js в каталоге app/assets/javascripts, который имеет этот код

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

Что я делаю не так? В чем проблема? Может быть, в моем файле приложения вместо js/foundation.min.js он должен быть javascripts/foundation.min.js. Ive пробовал это, и он все еще не работает. Это бесит меня, и я не знаю, как это исправить. Некоторая помощь была бы крутой.

Dan Rubio 28 апр. 2014, в 00:44

Источник

Теги:

jquery

ruby-on-rails

zurb-foundation

1 ответ

Ещё вопросы

jstoone · Answer 1 · 2014-05-12T18-41-00.000Z

Весь ваш код кажется просто замечательным, пока мы не ударим ваш файл flash.js. Сначала мы должны начать с поиска ошибок: (без обид). Ваш селектор ловит ваш класс ".alert-box", но затем пытается найти -tag с этим - Есть две линии, делающие одно и то же, также может быть ошибка копирования/вставки. Вы медленно уменьшаете флеш-сообщения, как только jQuery получает событие "ready" из документа.

Мы хотели бы сделать следующее: - Выберите свой класс ".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');
}

То, что вы могли бы сделать дальше, возможно, улучшит ваш выборщик, чтобы только выпустить предупреждения, которые указывают на успех автоматически, потому что это действительно не влияет на пользователя, если его упускают из виду. Ошибочные предупреждения, с другой стороны, должны указывать вам в лицо и говорить "HEY!" И, следовательно, не исчезать без каких-либо действий, предпринимаемых пользователем.

Вот некоторые помощники:

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

Так и дальше и так четвертое. Таким образом, вы можете добавлять клики-события, fadeouts и т.д. На основе ваших условий. Ура!