Question

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

我在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 .

vendor/assets/stylesheets中的相应css -

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>

巡视未启动，而是显示了有序列表。有一个应用程序布局。我在这里缺少什么？

Answer 1

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

在你的application.js中你可以拥有：

//= require joyride

您也可以尝试删除.js

中的//= require joyride/modernizr.mq.js部分

Answer 2

Tmacram，

我回答了类似的问题Here

关于在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; }

或者，您只需将<ol>的ID和选择器更改为“joyRideTipContent”，即可开箱即用。

Answer 3

我和joyride一直有同样的问题，我只是让它工作，只是为了完成我案例中已经说过的事情

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

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

第3步：我使用js2coffee.org转换coffeescript中的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
    });
  });

到coffeescript：

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

    modal: true
    expose: true

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

P.s尝试不将文件放在vendor / assets / javascripts中的另一个文件夹中，无论如何都会编译它们。

rails中的简单Javascript Joyride插件

3 个答案: