无法让 Joyride 工作 - 它显示一个列表 [英] Cannot get joyride to work - it displays a list
问题描述
我敢肯定，关于将文件放在哪里，这真的很愚蠢，但这里是:
我正在尝试使用 gem (zurb-foundation)、rails 3、ruby 1.9.3 的 Foundation 4，并且我正在尝试让joyride 功能正常工作.
这是我目前所拥有的:
<h1>列出产品</h1><div id="firstStop" class="panel">您网站的一些很棒的部分！</div><表格><tr><th><h2 id="numero1" class="so-awesome">姓名</h2></th><th><h3 id="numero2">价格</h3></th><th></th><th></th><th></th></tr><% @products.each 做 |product|％＞<tr><td><%=product.name%></td><td><%=产品.价格%></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><%结束%><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>您好，欢迎来到 Joyride 文档页面.</p><li data-id="numero1" data-class="custom so-awesome" data-text="Next"><h4>停止#1</h4><p>您可以控制游览站的所有详细信息.任何有效的 HTML 都可以在 Joyride 中使用.</p><li data-id="numero2" data-button="Next" data-options="tipLocation:top;tipAnimation:fade"><h4>停止#2</h4><p>通过使用自定义样式表为 Joyride 设置样式，获取正确的细节！</p><li data-button="下一步"><h4>停止#4</h4><p>它也可以作为模态使用！</p></ol><脚本>$(window).load(function() {$("#list_index_tour").joyride({});});在我的 application.html.erb 上:
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/--><!--[如果是 IE 7 ]><html class="ie6" lang="en"><![endif]--><!--[如果 IE 7 ]><html class="ie7" lang="en"><![endif]--><!--[如果 IE 8 ]><html class="ie8" lang="en"><![endif]--><!--[if (gte IE 9)|!(IE)]><!--><html lang="zh-cn"><!--<![endif]--><头><meta charset="utf-8"/><!-- 取消注释以使 IE8 呈现像 IE7 一样--><!-- <meta http-equiv="X-UA-Compatible" content="IE=7"/>--><!-- 将视口宽度设置为移动设备的设备宽度 --><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title><%= content_for?(:title) ?yield(:title) : "Untitled" %></title><%= stylesheet_link_tag "应用程序" %><%= javascript_include_tag "vendor/custom.modernizr" %><%= csrf_meta_tags %><!--/* 附加 Joyride CSS 文件 */--><link rel="stylesheet" type="text/css" href="jquery.joyride-2.0.css"><!--/* 需要附加jQuery */--><script src="jquery-1.8.3.min.js"></script><!--/* 然后附上 Joyride 插件 */--><script src="jquery.joyride-2.0.3.js"></script><身体><nav class="top-bar"><ul class="title-area"><li class="name"><h1><%= link_to "Awesome Store", products_path %></a></h1><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价目表"%></li><li class="divider"></li><li><%= link_to "联系我们" %></li><li class="divider"></li><li><%= link_to "Cart" %></li></nav><div class="row"><div class="small-8 columns"><%= yield %></div><div class="small-4 columns"><h2 class="subheader">关于我们</h2>yatta yatta yatta
<%= javascript_include_tag "应用程序" %></html>
在我的 application.js 上
//= 需要 jquery//= 需要 jquery_ujs//= 需要基础//= 需要 jquery.joyride-2.0.3//= 需要 Modernizr.mq//= 需要 jquery.cookie//= require_tree .$(function(){ $(document).foundation(); });应用程序.css
*= require_self*= 需要foundation_and_overrides*= 需要joyride-2.0.3*= require_tree .*/我将文件 jquery.joyride-2.0.3.js、modernizr 等放在目录 app/assets/javascripts/下
我得到的只是一个悲伤的清单:-(
我确实尝试遵循这里问题的建议，但是无济于事.
帮助?
Samantha,
您的代码的第一个问题是您的 jQuery 选择器使用了 # 符号，这意味着它正在寻找具有该 ID 的 DOM 元素.但是，游览的 <ol> 的 HTML 标记没有指定 ID，只有一个类.
因此，您的第一个解决方法是简单地更新您的 <ol>
发件人:
致:
然而，即使我的选择器是正确的并且想通了，我也遇到了类似的问题 - 请参阅下文. 遗憾的是，Zurb 自己的设置说明具有误导性.他们说您可以为包含导览步骤的 <ol> 列表使用任何您想要的 ID，但实际上您不能开箱即用.
Zurb 的joyride 代码取决于CSS/Javascript 之间的特定ID.此ID 和相关代码位于包含的joyride.css 文件中.那里使用的 ID 是joyRideTipContent".我已经粘贴了 Joyride.css 文件中相关的几行代码(它们靠近最顶部):
#joyRideTipContent { 显示:无；}.joyRideTipContent { 显示:无；}如果您更喜欢使用不同的 ID，只需按如下方式更改 css 文件中的上述代码，然后它就会起作用(我已经包含了上面代码片段中的名称):
#list_index_tour{ 显示:无；}.list_index_tour{ 显示:无；}或者，您可以将 <ol> 的 ID 和选择器更改为 joyRideTipContent，它可以立即使用.
最后，您的代码参考适用于 Rails，用于包含相关的 Javascript 和 CSS 文件.当插件不起作用时，您可能一直试图涵盖所有基础.但是，您的代码并不干燥，因为将 Sprockets 用于 Joyride js 和 css 文件以及在 application.html.erb 中使用 JS 和 CSS 样式表标签是不正确的.
除了纯粹的重复之外，随着时间的推移，当您更改文件并忘记在两个地方更新应用程序时，这种方法可能会导致问题.根据包含的顺序，它还可能导致冲突.
因为 Rails Sprockets 和 Asset Pipeline 是框架中非常强大的工具，我建议您坚持使用它并从 application.html.erb 中删除重复的引用.
所以对于重复标签方面...保留这些:
Application.js
//= 需要 jquery.joyride-2.0.3
应用程序.css
*= 需要joyride-2.0.3
并从此处删除引用:
Application.html.erb
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?
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
这篇关于无法让 Joyride 工作 - 它显示一个列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
