Question

花了几天的时间，我试图使用gem“ introjs-rails”在rails中创建一个导览。 https://github.com/heelhook/intro.js-rails。以下内容与指南要求之间的一些区别是，该指南希望将'// = require introjs'放入application.js，但是我遇到了Javascript错误'introJs（）。start（）;。是未定义的变量”，因此我将“ // = require introjs”放在“ Intro.js”文件中，似乎可以解决此问题。但是，当我启动页面时，仍然没有弹出消息出现。

Application.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>

Application.scss

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

Index.html.erb

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

Intro.js

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

Introjs.css

 *= require introjs

Answer 1

尝试以下操作：

Index.html.erb：

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

Intro.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>

如何使用宝石“ intros-rails”在Rails中创建导览

1 个答案: