如何使用 gem 'intros-rails' 在 Rails 中创建导览

Question

我已经为此工作了几天，我正在尝试使用 gem "introjs-rails" 在 rails 中创建导览。 https://github.com/heelhook/intro.js-rails。以下内容与指南要求的内容之间存在一些差异，指南希望将“//= require introjs”放入 application.js，但我收到 Javascript 错误 'introJs().start(); is undefined variable' 所以我将 '//= 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();

As you suggested in the comment, loading the script too earlier was the source of the issue for you : setTimeout(function() { introJs().start(); }, 3000);

对于您的 CSS 问题，很可能未引用 jQuery，在这种情况下，您需要在 IntroJS、bootstrap:[=18= 之前包含它]

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

如何使用 gem 'intros-rails' 在 Rails 中创建导览

How to create a guided tour in Rails with gem 'intros-rails'

javascript

ruby-on-rails

ruby

intro.js