[英]How to put html code in a “Tour” Bootstrap
我有一個網站“ Drupal 8”和“ Bootstrap 3.3.7”。
我添加了“ Bootstrap Tour”庫:
巡視正在進行中,但是我無法在“內容”中添加html代碼。
這是我創建的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."
}
嘗試使用模板字符串來包裝您的html代碼。
http://exploringjs.com/es6/ch_template-literals.html
這樣,您就可以避免出現"
char "
問題。您還可以創建多行字符串。
{
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.
`
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.