Как поместить HTML-код в "тур" Bootstrap - PullRequest
Новая
       29

Как поместить HTML-код в "тур" Bootstrap

0 голосов
/ 11 июня 2018

У меня есть сайт «Drupal 8» с «Bootstrap 3.3.7».

Я добавил библиотеку «Bootstrap Tour»:

http://bootstraptour.com/

Тур работает, но я не могу добавить html-код в "content".

Вот JS, который я создал: 

(function ($) {

// Instance the tour
var tour = new Tour({
  steps: [
  {
    element: ".region-navigation-menu-first",
    placement: "bottom",
    title: "Le menu de navigation",
    content: "Le menu de navigation, permet de naviguer sur le site.</p>"
  },
  {
    element: ".region-navigation-notification-first",
    placement: "bottom",
    title: "Les notifications",
    content: "Le logo notification, permet d'accéder aux notifications liées à l'activité de votre compte (statut des commandes, message privé, ...), ainsi qu'à celle du site (suivi des groupes, suivi des boutiques, ...).</p>"
  },
  {
    element: ".region-navigation-logo .logo",
    placement: "bottom",
    title: "Le logo",
    content: "Le logo S1BIOSE est présent sur toutes les pages du site. Il vous suffit de cliquer dessus pour revenir à la page d'accueil.</p>"
  },
  {
    element: ".region-navigation-notification-second",
    placement: "bottom",
    title: "Les paniers",
    content: "Le logo panier, permet d'accéder à vos paniers d'achats.</p>"
  },
  {
    element: ".region-navigation-menu-second",
    placement: "bottom",
    title: "Le menu de recherche",
    content: "Le menu de recherche, permet de filtrer et trier le contenu d'une page.</p>"
  },
  {
    element: "#block-follow",
    placement: "top",
    title: "Les réseaux sociaux",
    content: "S1BIOSE est présent sur les réseaux sociaux les plus populaires, n'hésitez pas à nous suivre."
  },
  {
    element: "#block-contact",
    placement: "top",
    title: "Les modes de contact",
    content: "Vous pouvez nous contacter par téléphone, courrier postal et par e-mail."
  },
  {
    element: "#block-information",
    placement: "top",
    title: "Les informations",
    content: "Ici vous trouverez toutes les informations juridiques concernant notre site."
  }
]});

// Initialize the tour
tour.init();

// Start the tour
tour.start();

            $('#bs-tour-restart').click(function () {
            $('#navbar-collapse-first, #navbar-collapse-second').collapse('hide');
            tour.init();
            tour.restart();
            });

})(window.jQuery);

Я хочу добавить HTML-код.

Если я заменю следующий шаг ".region-navigation-menu-first" следующим кодом, он не будет работать: 

    {
        element: ".region-navigation-menu-first",
        placement: "bottom",
        title: "Le menu de navigation",
        content: "Le menu de navigation, permet de naviguer sur le site.</p>

<div class="icon-tour">
  <div class="icon-navbar-first-alert">
    <span class="fa-layers fa-3x">
      <i class="fas fa-circle"></i>
        <i class="fas fa-bars fa-inverse" data-fa-transform="shrink-8"></i>
      </span>
    </span>
  </div>
</div>

L'icône clignote, lorsque vous pouvez administrer la page actuelle."
      }

1 Ответ

0 голосов
/ 11 июня 2018

Попробуйте использовать строку шаблона для переноса HTML-кода.

http://exploringjs.com/es6/ch_template-literals.html

Таким образом вы избежите проблем с символом ".Также вы сможете создавать многострочные строки. 

{
    element: ".region-navigation-menu-first",
    placement: "bottom",
    title: "Le menu de navigation",
    content: `
        <p>Le menu de navigation, permet de naviguer sur le site.</p>
        <div class="icon-tour">
          <div class="icon-navbar-first-alert">
            <span class="fa-layers fa-3x">
              <i class="fas fa-circle"></i>
                <i class="fas fa-bars fa-inverse" data-fa-transform="shrink-8"></i>
              </span>
            </span>
          </div>
        </div>
        L'icône clignote, lorsque vous pouvez administrer la page actuelle.
    `
}
...