Rails 应用程序中的 Foundation 5 顶部栏无法正常工作
Foundation 5 top-bar in Rails app not working
在多次尝试不同的示例和 运行 我的代码之后,我无法弄清楚为什么我的顶部栏上的下拉菜单不起作用。我尝试了每次搜索中出现的 'no-data-turbolinks' 技巧,但无济于事。
我也试过添加 jquery.turbolinks。越来越令人沮丧了。
我什至为 Zurb 自己的顶部栏示例加载了 html。没有工作。
我正在使用 Rails 4.2.0、jquery-rails 和 foundation-rails 5.5.0.
我不确定要包含什么代码,所以如果您有任何问题,如果您需要,我很乐意将其合并。
以下是我的_navbar.html.erb(来自基金会网站顶部栏示例的c/p):
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><a href="#">Right Button Active</a></li>
<li class="has-dropdown">
<a href="#">Right Button Dropdown</a>
<ul class="dropdown">
<li><a href="#">First link in dropdown</a></li>
<li class="active"><a href="#">Active link in dropdown</a></li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li><a href="#">Left Nav Button</a></li>
</ul>
</section>
</nav>
这是我的 application.html.erb:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= content_for?(:title) ? yield(:title) : "foundation-rails" %></title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag "vendor/modernizr" %>
<%= javascript_include_tag "application" 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<%= render partial: "elements/navbar" %>
<body>
<%= yield %>
</body>
<%= render partial: "elements/footer" %>
</html>
还有我的 application.js 文件(删除 turbolinks 引用后):
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require foundation
//= require_tree .
$(function(){ $(document).foundation(); });
我的 Gemfile(删除 turbolinks 后):
source 'https://rubygems.org'
gem 'rails', '>= 4.2.0'
group :test, :development do
gem 'rspec-rails'
gem 'factory_girl_rails'
gem 'sqlite3', require: false
gem 'database_cleaner'
gem 'capybara'
end
group :production do
gem 'thin', require: false
gem 'pg', require: false
end
gem 'bundler'
gem 'foundation-rails', '>= 5.5'
gem 'sass-rails'
gem 'sass', '>= 3.3'
gem 'nav_lynx'
gem 'jbuilder', '~> 2.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails'
gem 'uglifier', '>= 1.3.0'
gem 'sdoc', '~> 0.4.0', group: :doc, require: false
gem 'spring', group: :development
在 运行 rails g foundation:install
并允许命令覆盖主应用程序 ERB 文件之后,您将在 javascript_include_tag.
中得到一个 turbolinks 代码
在您的 application.html.erb 中,更改此...
<%= javascript_include_tag "application" 'data-turbolinks-track' => true %>
对此...
<%= javascript_include_tag "application" %>
这个单行代码更改应该可以修复它。它对我有用。
尝试将其移到结束 body
标记之前:
<%= javascript_include_tag "application" 'data-turbolinks-track' => true %>
在多次尝试不同的示例和 运行 我的代码之后,我无法弄清楚为什么我的顶部栏上的下拉菜单不起作用。我尝试了每次搜索中出现的 'no-data-turbolinks' 技巧,但无济于事。
我也试过添加 jquery.turbolinks。越来越令人沮丧了。
我什至为 Zurb 自己的顶部栏示例加载了 html。没有工作。
我正在使用 Rails 4.2.0、jquery-rails 和 foundation-rails 5.5.0.
我不确定要包含什么代码,所以如果您有任何问题,如果您需要,我很乐意将其合并。
以下是我的_navbar.html.erb(来自基金会网站顶部栏示例的c/p):
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><a href="#">Right Button Active</a></li>
<li class="has-dropdown">
<a href="#">Right Button Dropdown</a>
<ul class="dropdown">
<li><a href="#">First link in dropdown</a></li>
<li class="active"><a href="#">Active link in dropdown</a></li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li><a href="#">Left Nav Button</a></li>
</ul>
</section>
</nav>
这是我的 application.html.erb:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= content_for?(:title) ? yield(:title) : "foundation-rails" %></title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag "vendor/modernizr" %>
<%= javascript_include_tag "application" 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<%= render partial: "elements/navbar" %>
<body>
<%= yield %>
</body>
<%= render partial: "elements/footer" %>
</html>
还有我的 application.js 文件(删除 turbolinks 引用后):
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require foundation
//= require_tree .
$(function(){ $(document).foundation(); });
我的 Gemfile(删除 turbolinks 后):
source 'https://rubygems.org'
gem 'rails', '>= 4.2.0'
group :test, :development do
gem 'rspec-rails'
gem 'factory_girl_rails'
gem 'sqlite3', require: false
gem 'database_cleaner'
gem 'capybara'
end
group :production do
gem 'thin', require: false
gem 'pg', require: false
end
gem 'bundler'
gem 'foundation-rails', '>= 5.5'
gem 'sass-rails'
gem 'sass', '>= 3.3'
gem 'nav_lynx'
gem 'jbuilder', '~> 2.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails'
gem 'uglifier', '>= 1.3.0'
gem 'sdoc', '~> 0.4.0', group: :doc, require: false
gem 'spring', group: :development
在 运行 rails g foundation:install
并允许命令覆盖主应用程序 ERB 文件之后,您将在 javascript_include_tag.
在您的 application.html.erb 中,更改此...
<%= javascript_include_tag "application" 'data-turbolinks-track' => true %>
对此...
<%= javascript_include_tag "application" %>
这个单行代码更改应该可以修复它。它对我有用。
尝试将其移到结束 body
标记之前:
<%= javascript_include_tag "application" 'data-turbolinks-track' => true %>