Как создать экскурсию по Rails с помощью гема intros-rails - PullRequest
Новая
       7

Как создать экскурсию по Rails с помощью гема intros-rails

0 голосов
/ 05 апреля 2019

Работая над этим в течение нескольких дней, я пытаюсь использовать гем "introjs-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

1 Ответ

1 голос
/ 05 апреля 2019

Попробуйте следующее:

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