Question

我确信这是非常愚蠢的，关于放置文件的位置，但是这里有：

我正在尝试使用gem（zurb-foundation），rails 3，ruby 1.9.3的Foundation 4，我正在尝试使用joyride功能。

这是我到目前为止所做的：

<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(); });

Application.css

 *= require_self
 *= require foundation_and_overrides
  *= require joyride-2.0.3
 *= require_tree .
 */

我将文件jquery.joyride-2.0.3.js，modernizr等放在app / assets / javascripts /

目录下

我得到的只是一个令人悲伤的清单： - （

我确实尝试遵循 this question here的建议，但无济于事。

帮助？

Answer 1

萨曼莎，

您的代码的第一个问题是您的jQuery选择器使用#符号，这意味着它正在寻找具有该ID的DOM元素。但是，您对游览的<ol>的HTML标记没有指定ID，只有一个类。

因此，首先要解决的问题是更新<ol>

发件人：

<ol class="list_index_tour" data-joyride>

以

<ol id="list_index_tour" data-joyride>

然而，即使我的选择器是正确的并且想出来，我也遇到了类似的问题 - 请参阅下文。可悲的是，Zurb自己的设置说明具有误导性。他们说你可以在<ol>列表中使用你想要的任何ID，这些列表包含导游的步骤，但实际上你不能开箱即用。

Zurb的joyride代码取决于CSS / Javascript之间的特定ID。此ID和相关代码位于包含的joyride.css文件中。在那里使用的ID是“joyRideTipContent”。我已经粘贴了joyride.css文件中相关的几行代码（它们位于最顶端）：

#joyRideTipContent { display: none; } .joyRideTipContent { display: none; }

如果您更喜欢使用其他ID，只需按照以下步骤更改css文件中的上述代码，然后它就可以了（我已在上面的代码段中添加了该名称）：

#list_index_tour{ display: none; } .list_index_tour{ display: none; }

或者，您可以将<ol>的ID和选择器更改为joyRideTipContent，它可以立即使用。

最后，您的代码引用适用于Rails，包括相关的Javascript和CSS文件。当插件无法正常工作时，您可能一直试图覆盖所有基础。 但是，你的代码不是DRY，因为将sprockets用于joyride js和css文件并且在你的application.html.erb中也有JS和CSS样式表标签是双重的。

除了完全重复之外，这种方法可能会导致问题，因为当您更换文件并忘记在两个位置更新文件时维护应用程序。它也可能导致冲突，具体取决于您的包含的顺序。

由于Rails Sprockets和Asset Pipeline是非常强大的框架工具，我建议您坚持使用它并从application.html.erb中删除重复的引用。

因此对于重复标签方面......保留这些：

的application.js

// = require jquery.joyride-2.0.3

Application.css

* =要求joyride-2.0.3

并从此处删除引用：

Application.html.erb

不能让兜风工作 - 它显示一个列表

1 个答案: