如何在带有宝石'intros-rails'的 Rails 中创建导览游

已经为此工作了几天，我正在尝试使用gem"introjs-rails"来创建rails中的导览。 https://github.com/heelhook/intro.js-rails。下面的内容与指南要求的内容之间的一些区别是指南希望将"//=需要introjs"放入应用程序中.js但是我收到Javascript错误"introJs((.start((;是未定义的变量"，所以我将"//= 需要介绍"放在"介绍.js"文件中，这似乎可以解决它。但是当我启动页面时，我仍然没有收到弹出消息。

应用.html.erb

<head>
  <title>Workspace</title>
  <%= stylesheet_link_tag    'introjs', 'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'intro', 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
  <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
</head>

应用程序.scss

/*
 *= require introjs
 *= require_tree .
 *= require_self
*/

索引.html.erb

<h1 data-step="1" data-intro="This is a tooltip!">This is a Tool Tip!</h1>

简介.js

//= require introjs
introJs().start();

简介.css

 *= require introjs

尝试以下操作：

索引.html.erb：

<a class='introduction-farm' href='#' data-intro='Hello step one!'></a>

简介.js：

introJs(".introduction-farm").start();

正如您在评论中建议的那样，过早加载脚本是您问题的根源：setTimeout(function() { introJs().start(); }, 3000);

对于您的 CSS 问题，很可能没有引用jQuery，在这种情况下，您需要在 IntroJS 之前包含它，bootstrap：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

相关内容

最新更新

热门标签：