2014-11-23 3 views
1

Я использую Foundation в течение нескольких лет, но у меня не было проблемы с плагинами JS, пока я просто не обновился до Foundation 5. Я запустил пакет «bundle», и обновил пути к файлам, но независимо от того, какие плагины, такие как Reveal и Joyride, просто никогда не запускаются, если вручную не вызвать через консоль. Инструменты dev не вызывают ошибок и не показывают никаких отсутствующих файлов, поэтому я не уверен, что происходит.Foundation 5 JS плагины не работают

Вот мой супер основной разметки:

<html class='no-js' lang='en'> 
    <head> 
    <meta charset='utf-8'> 
    <meta content='width=device-width, initial-scale=1.0' name='viewport'> 
    <link href='stylesheets/app.css' rel='stylesheet'> 
    <script src='bower_components/modernizr/modernizr.js'></script> 
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script> 
    </head> 
    <body> 
    <div class='row'> 
     <div class='small-12 columns'> 
     <a data_reveal_id='myModal' href='#'> 
      <button>Hello!</button> 
     </a> 
     </div> 
    </div> 
    <div class='reveal-modal' data_reveal id='myModal'> 
     <h1>I'm a modal!</h1> 
     <a class='close-reveal-modal'>&#215;</a> 
    </div> 
    <script src='bower_components/foundation/js/foundation.min.js'></script> 
    <script src='bower_components/fastclick/lib/fastclick.js'></script> 
    <script> 
     $(document).foundation(); 
    </script> 
    </body> 
</html> 

Любая помощь будет очень признателен! Я пробовал проверять каждый другой поток, который я могу найти, но я не видел подобной проблемы.

+0

уверен, не Вы там нет ошибок 404 в панели Сеть? – raina77ow

+0

@ raina77ow - нет, ничего в консоли, и ничего в сети (все загружается) – user2559119

+0

попробуйте воспроизвести ошибку в скрипке и поделиться с нами. –

ответ

0

У вас есть 2 ошибки в коде.

  1. использование Dont подчеркивает, использовать дефис для данных атрибутов работать правильно
  2. Dont поставить кнопку внутри тега привязки, кнопка достаточных полномочий.

Как так:

<html class='no-js' lang='en'> 
    <head> 
    <meta charset='utf-8'> 
    <meta content='width=device-width, initial-scale=1.0' name='viewport'> 
    <link href='stylesheets/app.css' rel='stylesheet'> 
    <script src='bower_components/modernizr/modernizr.js'></script> 
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script> 
    </head> 
    <body> 
    <div class='row'> 
     <div class='small-12 columns'> 
     <!--<a data_reveal_id='myModal' href='#'>--> 
      <button data-reveal-id='myModal'>Hello!</button> 
     <!--</a>--> 
     </div> 
    </div> 
    <div class='reveal-modal' data-reveal id='myModal'> 
     <h1>I'm a modal!</h1> 
     <a class='close-reveal-modal'>&#215;</a> 
    </div> 
    <script src='bower_components/foundation/js/foundation.min.js'></script> 
    <script src='bower_components/fastclick/lib/fastclick.js'></script> 
    <script> 
     $(document).foundation(); 
    </script> 
    </body> 
</html> 
Смежные вопросы