[JAVA] [Rails] Implémentation de la fonction tutoriel

Cible

Environnement de développement

・ Rubis: 2.5.7 Rails: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Système d'exploitation: macOS Catalina

supposition

Ce qui suit a été mis en œuvre.

・ Présentation mince ・ Mise en œuvre de la fonction de publication

la mise en oeuvre

1. Téléchargez les fichiers requis depuis Github

① Accédez au lien ci-dessous.

intro.js Github

② Cliquez sur «Code».

③ Copiez l'URL.

④ Clonez le référentiel.

Terminal

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

⑤ Déplacez ʻintro.js et ʻintrojs.css dans le répertoire cloné dans l'application.

2. Présentez Gem

Gemfile

#Postscript
gem 'jquery-rails'

Terminal

$ bundle

3. Modifiez ʻapplication.js`

application.js

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

3. Créer / modifier un fichier JavaScript

Terminal

touch app/assets/javascripts/tutorial.js

tutorial.js

$(function() {
  $('#tutorial').click(function() {
    introJs()
      .setOptions({
        nextLabel: 'Suivant →',
        prevLabel: '← Précédent',
        skipLabel: 'sauter',
        doneLabel: 'Fin',
        exitOnOverlayClick: false,
        showStepNumbers: false,

        steps: [
          {
            intro:
              '<b>Bienvenue chez Bookers!</b><br>Je vais vous présenter brièvement comment utiliser les livres!',
          },
          {
            element: '#introjs-step1',
            intro: 'Veuillez entrer un titre',
          },
          {
            element: '#introjs-step2',
            intro: 'Veuillez saisir le texte',
          },
          {
            element: '#introjs-step3',
            intro: 'Vous pouvez publier un livre en appuyant sur le bouton "Publier"',
          },
        ],
      })
      .start();
  });
});

[Explication]

① Le tutoriel commence en appuyant sur le bouton avec l'ID tutorial.

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

(2) Définissez une fonction pour configurer le didacticiel.

.setOptions({})

③ Réglez le menu.

nextLabel: 'Suivant →',
prevLabel: '← Précédent',
skipLabel: 'sauter',
doneLabel: 'Fin',
exitOnOverlayClick: false,
showStepNumbers: false,

④ Définissez le didacticiel.

steps: []

⑤ Définissez chaque modal.

** ◎ Lorsque ʻelement` n'est pas défini **

{
  intro: 'Ceci est un tutoriel.',
}

Il est affiché au centre de l'écran.

** ◎ Lorsque l'élément est défini **

{
  element: '#introjs-step1',
  intro: 'Veuillez saisir un titre.',
}

Il s'affiche en se concentrant sur le HTML correspondant à l'ID défini.

4. Modifier la vue

① Installez le bouton.

~html.slim

button id='tutorial'
  |Démarrer le didacticiel

② Donnez une pièce d'identité.

~html.slim

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

Si vous souhaitez l'implémenter avec d'autres mouvements

① Accédez au lien ci-dessous.

page officielle intro.js

(2) Lorsque vous faites défiler vers le bas de la page, l'écran suivant apparaît. Si vous voulez voir le mouvement, cliquez sur «DÉMO», et si vous voulez l'implémenter, appuyez sur «SOURCE» pour voir l'exemple de code.