[JAVA] [Rails] Implementierung der Tutorial-Funktion

Ziel

Entwicklungsumgebung

・ Ruby: 2.5.7 Schienen: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Betriebssystem: macOS Catalina

Annahme

Folgendes wurde implementiert.

・ Schlanke Einführung ・ Implementierung der Posting-Funktion

Implementierung

1. Laden Sie die erforderlichen Dateien von Github herunter

① Greifen Sie auf den unten stehenden Link zu.

intro.js Github

② Klicken Sie auf "Code".

③ Kopieren Sie die URL.

④ Klonen Sie das Repository.

Terminal

$ git clone [email protected]:usablica/intro.js.git

⑤ Verschieben Sie intro.js und introjs.css im geklonten Verzeichnis in die Anwendung.

2. Stellen Sie Gem vor

Gemfile

#Nachtrag
gem 'jquery-rails'

Terminal

$ bundle

3. Bearbeiten Sie application.js

application.js

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery //Nachtrag
//= require_tree .

3. Erstellen / bearbeiten Sie eine JavaScript-Datei

Terminal

touch app/assets/javascripts/tutorial.js

tutorial.js

$(function() {
  $('#tutorial').click(function() {
    introJs()
      .setOptions({
        nextLabel: 'Weiter →',
        prevLabel: '← Zurück',
        skipLabel: 'überspringen',
        doneLabel: 'Ende',
        exitOnOverlayClick: false,
        showStepNumbers: false,

        steps: [
          {
            intro:
              '<b>Willkommen bei Bookers!</b><br>Ich werde kurz vorstellen, wie man Bücher benutzt!',
          },
          {
            element: '#introjs-step1',
            intro: 'Bitte geben Sie einen Titel ein',
          },
          {
            element: '#introjs-step2',
            intro: 'Bitte geben Sie den Text ein',
          },
          {
            element: '#introjs-step3',
            intro: 'Sie können ein Buch veröffentlichen, indem Sie auf die Schaltfläche "Veröffentlichen" klicken',
          },
        ],
      })
      .start();
  });
});

[Erläuterung]

① Das Tutorial beginnt mit dem Drücken der Taste mit der ID Tutorial.

$('#tutorial').click(function() {}

(2) Definieren Sie eine Funktion zum Einstellen des Tutorials.

.setOptions({})

③ Stellen Sie das Menü ein.

nextLabel: 'Weiter →',
prevLabel: '← Zurück',
skipLabel: 'überspringen',
doneLabel: 'Ende',
exitOnOverlayClick: false,
showStepNumbers: false,

④ Legen Sie das Tutorial fest.

steps: []

⑤ Stellen Sie jedes Modal ein.

** ◎ Wenn element nicht gesetzt ist **

{
  intro: 'Dies ist ein Tutorial.',
}

Es wird in der Mitte des Bildschirms angezeigt.

** ◎ Wenn das Element gesetzt ist **

{
  element: '#introjs-step1',
  intro: 'Bitte geben Sie einen Titel ein.',
}

Es wird mit Fokus auf den HTML-Code angezeigt, der der festgelegten ID entspricht.

4. Ansicht bearbeiten

① Installieren Sie die Schaltfläche.

~html.slim

button id='tutorial'
  |Tutorial starten

② Geben Sie einen Ausweis.

~html.slim

= f.text_field :title, class:'form-control', id: 'introjs-step1'

Wenn Sie es mit anderen Bewegungen implementieren möchten

① Greifen Sie auf den unten stehenden Link zu.

intro.js offizielle Seite

(2) Wenn Sie zum Ende der Seite scrollen, wird der folgende Bildschirm angezeigt. Wenn Sie die Bewegung sehen möchten, klicken Sie auf "DEMO". Wenn Sie sie implementieren möchten, drücken Sie "SOURCE", um den Beispielcode anzuzeigen.