Question

EDIT。在尝试了很多不同的解决方案后，我发现当我添加

时

* =要求兜风

我的application.css.scss文件导致javascript中断（不确定这是否属实:(

我再次在Chrome控制台上测试了它，当我跑

时

$("#tutorial").joyride({});

一旦没有出现，但如果我跑了两次，那就行了。所以我的application.js文件现在看起来像：

$(document).ready( function(){       
$("#tutorial").joyride({});
$("#tutorial").joyride({});

});

它只渲染一次教程框然后当你点击下一步它再次中断..

原始邮寄。

我在我的rails应用程序中使用ZURBS joyride插件来创建一个登机教程。 http://zurb.com/playground/jquery-joyride-feature-tour-plugin

我已经使用chrome检查器在控制台中运行了javascript，但它不能用于页面加载。

有关如何解决此问题的任何想法？

Application.js文件

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require d3
//= require jquery.joyride
//= require modernizr.mq.js
//= require jquery.cookie.js
//= require_tree .

$(document).ready(function(){
    $("#tutorial").joyride({});
});

这就是我在index.html.erb文件中使用的内容

  <ol id='tutorial'>
    <li data-id="story">Tip content...</li>
    <li data-id="story">Tip content 2</li>
  </ol>

这显示索引中与data-id

对应的代码

 <div class="box-container">
  <div id="story" class="box">

    <h1>Welcome to WeWrite. </h1>
    <h3> Write stories together. </h3>

    <% @lines.each do |line| %>
        <div class="story">

            <div class="depth"><%= line.depth %></div> 
            <div class="story-link"><%= link_to "#{line.text}...",  line_path(line), :class => "story-link" %> </div>
        </div>
    <% end %>

将其添加到我的application.js文件中以查看脚本是否正在加载并且是

$(document).ready( function(){      
fireWhenReady();

});

function fireWhenReady() {
if(typeof $("#tutorial").joyride == "function") {
    $("#tutorial").joyride({});
    console.log("joyride");
}
else {
    setTimeout(fireWhenReady, 100);
}
}

Answer 1

您需要像演示一样设置autoStart : true选项。

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

Answer 2

根据您的评论，我建议您使用：

$(window).load(function(){
  $("#tutorial").joyride({});
})

这将确保每个东西都加载甚至子脚本。

Answer 3

我可以确认同样的行为。需要两次召唤兜风来开始。

唯一值得注意的补充是列表中的bootstrap“hide”类。如果我删除它，则列表始终可见。

以下作品有一些奇怪的原因：

<h2 id="joyride1">Heading...</h2>
<h2 id="joyride1">Heading...</h2>
<h2 id="joyride1">Heading...</h2>
<h2 id="joyride1">Heading...</h2>

<ol id="joyride" class="hide">
    <li data-id="joyride1" data-text="Next" data-options="tip_location: top; prev_button: false">
        <p>Hello and welcome to the Joyride documentation page.</p>
    </li>
    <li data-id="joyride2" data-text="Next" data-options="tip_location: top; prev_button: false">
        <p>Hello and welcome to the Joyride documentation page.</p>
    </li>
    <li data-id="joyride3" data-text="Next" data-options="tip_location: top; prev_button: false">
        <p>Hello and welcome to the Joyride documentation page.</p>
    </li>
    <li data-id="joyride4" data-text="Next" data-options="tip_location: top; prev_button: false">
        <p>Hello and welcome to the Joyride documentation page.</p>
    </li>
</ol>

$(function () {
    $("#joyride").joyride({});
    $("#joyride").joyride({}); // NEEDED TO START JOYRIDE
});

Joyride Javascript教程不适用于页面加载

3 个答案: