0

我确信这真的很愚蠢，关于将文件放在哪里，但这里是：

我正在尝试使用 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/ 目录下

我得到的只是一个看起来很悲伤的清单:-(

我确实尝试在此处遵循此问题的建议，但无济于事。

帮助？

4

1 回答 1

3

萨曼莎，

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

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

最后，您的代码引用适用于 Rails 以包含相关的 Javascript 和 CSS 文件。当插件不起作用时，您可能一直在尝试覆盖所有基础。但是，您的代码并非 DRY，因为在您的 application.html.erb 中使用 Sprockets 来运行 js 和 css 文件以及使用 JS 和 CSS 样式表标签是双重的。

除了纯粹的重复之外，随着时间的推移，这种方法可能会导致问题，因为您在更改文件并忘记在两个地方更新它时维护您的应用程序。根据包含的顺序，它也可能导致冲突。

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

所以对于重复标签方面......保留这些：

  • 应用程序.js

    //= 需要 jquery.joyride-2.0.3

  • 应用程序.css

    *= 需要joyride-2.0.3

并从此处删除引用：

  • 应用程序.html.erb

于 2013-08-10T07:03:12.993 回答