问题
I am sure this is something really silly, regarding where to put the files, but here goes:
I am trying Foundation 4 using the gem (zurb-foundation), rails 3, ruby 1.9.3 and I am trying to get the joyride feature to work.
Here is what I have so far:
<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>
On my 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>
And on my 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(); });
Application.css
*= require_self
*= require foundation_and_overrides
*= require joyride-2.0.3
*= require_tree .
*/
I placed the files jquery.joyride-2.0.3.js, modernizr, and so on under the directory app/assets/javascripts/
All I get is a sad looking list :-(
I did try to follow the suggestions from this question here, but to no avail.
Help?
回答1:
Samantha,
The first issue with your code is that your jQuery selector is using the # symbol, which means it's looking for a DOM element with that ID. However, your HTML markup of the <ol> for the tour doesn't have an ID specified, only a class.
So, the first fix for you would be to simply update your <ol>
FROM:
<ol class="list_index_tour" data-joyride>
TO:
<ol id="list_index_tour" data-joyride>
However, I ran into a similar issue even when my selector was right and figured it out - see more below. Sadly Zurb's own instructions for setup are misleading. They say you can use whatever ID you want for your <ol> list that holds the steps of your guided tour, but you actually can't out of the box.
Zurb's code for joyride is dependent upon a specific ID between the CSS/Javascript. This ID and the relevant code is located within the included joyride.css file. The ID used there is "joyRideTipContent." I've pasted the relevant couple lines of code from the joyride.css file (they're near the very top):
#joyRideTipContent { display: none; }
.joyRideTipContent { display: none; }
If you would prefer to use a different ID, simply change the above code in the css file as follows and then it will work (I've included the name from your code snippet above):
#list_index_tour{ display: none; }
.list_index_tour{ display: none; }
Alternatively, you could just change the ID and selector of your <ol> to be joyRideTipContent and it would work right out of the box.
Lastly, your code references are fine for Rails for including the relevant Javascript and CSS files. You may have been trying to cover all your bases when the plugin wasn't working. However, your code isn't DRY in that it's duplicitous to use Sprockets to the joyride js and css files and ALSO to have JS and CSS stylesheet tags in your application.html.erb.
Outside of sheer duplication, this approach can cause problems over time as you maintain your app when you change out files and forget to update it in both places. It also can cause conflicts depending on the ordering of your includes.
Because Rails Sprockets and the Asset Pipeline are very powerful included tools of the framework, I'd recommend just sticking with that and removing the duplicate references from your application.html.erb.
So for the duplicate tags aspect...Keep these:
Application.js
//= require jquery.joyride-2.0.3
Application.css
*= require joyride-2.0.3
And Remove the references from here:
Application.html.erb
来源：https://stackoverflow.com/questions/17202699/cannot-get-joyride-to-work-it-displays-a-list