ファイルをどこに置くかに関して、これは本当にばかげていると確信していますが、ここに行きます：
gem (zurb-foundation)、rails 3、ruby 1.9.3 を使用して Foundation 4 を試しています。ジョイライド機能を動作させようとしています。
これが私がこれまでに持っているものです：
<body>
<h1>Listing products</h1>
<div id="firstStop" class="panel">Some awesome part of your site!</div>
<table>
<tr>
<th> <h2 id="numero1" class="so-awesome">Name</h2></th>
<th><h3 id="numero2">Price</h3></th>
<th></th>
<th></th>
<th></th>
</tr>
<% @products.each do |product| %>
<tr>
<td><%= product.name %></td>
<td><%= product.price %></td>
<td><%= link_to 'Show', product %></td>
<td><%= link_to 'Edit', edit_product_path(product) %></td>
<td><%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</table>
<br />
<%= link_to 'New Product', new_product_path, class: "button radius" %>
<ol class="list_index_tour" data-joyride>
<li data-id="firstStop" data-text="Next">
<p>Hello and welcome to the Joyride documentation page.</p>
</li>
<li data-id="numero1" data-class="custom so-awesome" data-text="Next">
<h4>Stop #1</h4>
<p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
</li>
<li data-id="numero2" data-button="Next" data-options="tipLocation:top;tipAnimation:fade">
<h4>Stop #2</h4>
<p>Get the details right by styling Joyride with a custom stylesheet!</p>
</li>
<li data-button="Next">
<h4>Stop #4</h4>
<p>It works as a modal too!</p>
</li>
</ol>
<script>
$(window).load(function() {
$("#list_index_tour").joyride({
});
});
</script>
私のapplication.html.erbで：
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Uncomment to make IE8 render like IE7 -->
<!-- <meta http-equiv="X-UA-Compatible" content="IE=7" /> -->
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= content_for?(:title) ? yield(:title) : "Untitled" %></title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "vendor/custom.modernizr" %>
<%= csrf_meta_tags %>
<!-- /* Attach the Joyride CSS file */ -->
<link rel=" stylesheet" type="text/css" href="jquery.joyride-2.0.css">
<!--/* jQuery needs to be attached */ -->
<script src="jquery-1.8.3.min.js"></script>
<!--/* Then attach the Joyride plugin */ -->
<script src="jquery.joyride-2.0.3.js"></script>
</head>
<body>
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1><%= link_to "Awesome Store", products_path %></a></h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li><%= link_to "Browse Products", products_path %></li>
<li class="divider"></li>
<li><%= link_to "Price List" %></li>
<li class="divider"></li>
<li><%= link_to "Contact Us" %></li>
<li class="divider"></li>
<li><%= link_to "Cart" %></li>
</ul>
</div>
</nav>
<div class="row">
<div class="small-8 columns"><%= yield %></div>
<div class="small-4 columns">
<h2 class="subheader">About Us</h2>
yatta yatta yatta
</div>
</div>
<%= javascript_include_tag "application" %>
</body>
</html>
そして私のapplication.jsで
//= require jquery
//= require jquery_ujs
//= require foundation
//= require jquery.joyride-2.0.3
//= require modernizr.mq
//= require jquery.cookie
//= require_tree .
$(function(){ $(document).foundation(); });
アプリケーション.css
*= require_self
*= require foundation_and_overrides
*= require joyride-2.0.3
*= require_tree .
*/
jquery.joyride-2.0.3.js、modernizr などのファイルを app/assets/javascripts/ ディレクトリの下に配置しました。
私が得るのは悲しいリストだけです:-(
この質問 hereの提案に従おうとしましたが、役に立ちませんでした。
ヘルプ？