1

由于对 rails 的误解，我担心我的插件无法正常工作。我正在将zurbs joyride 插件添加到索引页面。

我有以下内容vendor/assets/javascripts/joyride-

joyride-2.0.3.js
jquery.cookie.js
modernizr.mq.js

并以以下方式引用它们application.js-

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require joyride/joyride-2.0.3
//= require joyride/modernizr.mq.js
//= require joyride/jquery.cookie
//= require_tree .

以及适当的CSS vendor/assets/stylesheets-

joyride-2.0.3.css

并在application.css-

 *= require_self
 *= require bootstrap
 *= require joyride-2.0.3

现在在我的索引视图中-

<h1 id="pageTitle">Title of the page</h1>

<ol id="list_index_tour">
 <li data-id="pageTitle">Here is where the title of your page goes!</li>
</ol>

<script>
  $(window).load(function() {
    $("#list_index_tour").joyride({
    });
  });
</script>

游览没有启动，而是显示了一个有序列表。有一个应用程序布局。我在这里想念什么？

4

3 回答 3

1

您可以尝试为此插件制作清单文件。在您的子文件夹中创建一个index.js并引用您的资产。

在您的 application.js 中，您可以只拥有：

//= require joyride

您也可以尝试将.js零件放入//= require joyride/modernizr.mq.js

于 2013-04-06T00:21:16.637 回答
1

特马克拉姆，

我在这里回答了类似的问题

关于在 Rails 中更好地组织包含文件的原始答案是正确的，但这不会导致您的问题。这不起作用的真正原因是 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”，它可以直接使用。

于 2013-08-10T07:07:53.310 回答
0

我对joyride也有同样的问题，我刚刚开始工作，只是为了完成我已经说过的话

第一步：在 vendor/assets/javascripts 中，我删除文件名末尾的 js，并在 application.js 中以与演示相同的顺序放置 require 文件。并且还需要css文件

第二步：我创建一个包含joyride代码的部分，将它放在包含joyride视图的文件夹中，并在我的页脚之后的layout/application.html.erb位置呈现它

第三步：我使用演示中的 js2coffee.org 示例转换咖啡脚本中的 javascript

$(window).load(function() {
    $('#joyRideTipContent').joyride({
      autoStart : true,
      postStepCallback : function (index, tip) {
      if (index == 2) {
        $(this).joyride('set_li', false, 1);
      }
    },
    modal:true,
    expose: true
    });
  });

到咖啡脚本：

 $(window).load ->
  $("#joyRideTipContent").joyride
    autoStart: true
    postStepCallback: (index, tip) ->
      $(this).joyride "set_li", false, 1  if index is 2

    modal: true
    expose: true

所以基本上这是我所做的步骤，它对我有用。

Ps 尽量不要将文件放在 vendor/assets/javascripts 内的另一个文件夹中，无论如何它们都会被编译。

于 2013-10-14T04:26:11.253 回答