HTML dans Twitter Bootstrap popover
J'essaie d'afficher HTML dans un popover bootstrap, mais d'une manière ou d'une autre cela ne fonctionne pas. J'ai trouvé quelques réponses ici mais cela ne fonctionnera pas pour moi. Faites-moi savoir si je fais quelque chose de mal.
<script>
$(function(){
$('[rel=popover]').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
});
</script>
<li href="#" id="example" rel="popover" data-content="" data-original-title="A Title">
popover
</li>
<div id="popover_content_wrapper" style="display: none">
<div>This is your div content</div>
</div>
9 réponses
Vous ne pouvez pas utiliser <li href="#" car il appartient à <a href="#" c'est pourquoi cela ne fonctionnait pas, changez-le et tout va bien.
Voici de travail JSFiddle qui vous montre comment créer bootstrap liste.
Les parties pertinentes du code sont ci-dessous:
HTML:
<!--
Note: Popover content is read from "data-content" and "title" tags.
-->
<a tabindex="0"
class="btn btn-lg btn-primary"
role="button"
data-html="true"
data-toggle="popover"
data-trigger="focus"
title="<b>Example popover</b> - title"
data-content="<div><b>Example popover</b> - content</div>">Example popover</a>
JavaScript:
$(function(){
// Enables popover
$("[data-toggle=popover]").popover();
});
Et btw, vous avez toujours besoin d'au moins $("[data-toggle=popover]").popover(); pour activer la liste. Mais, à la place de data-toggle="popover" vous pouvez aussi utiliser id="my-popover" ou class="my-popover". Juste n'oubliez pas de les activer en utilisant par exemple: $("#my-popover").popover(); dans ces cas.
Voici le lien vers la spécification complète: Bootstrap Liste
Bonus:
Si pour une raison quelconque vous n'aimez pas (ou dévers) de lire le contenu d'une fenêtre du data-toggle et title balises. Vous pouvez également utiliser par exemple des divs cachés et un peu plus de JavaScript. Voici un exemple à ce sujet.
Acclamations.
Vous pouvez utiliser l'attribut data-html="true":
<a href="#" id="example" rel="popover"
data-content="<div>This <b>is</b> your div content</div>"
data-html="true" data-original-title="A Title">popover</a>
Vous devez créer une instance popover avec l'option html activée (placez ceci dans votre fichier javascript après le code JS popover):
$('.popover-with-html').popover({ html : true });
Une Autre façon de spécifier la liste de contenu réutilisables façon est de créer un nouvel attribut de données comme data-popover-content et l'utiliser comme ceci:
HTML:
<!-- Popover #1 -->
<a class="btn btn-primary" data-placement="top" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>
<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
<div class="popover-heading">
This is the heading for #1
</div>
<div class="popover-body">
This is the body for #1
</div>
</div>
JS:
$(function(){
$("[data-toggle=popover]").popover({
html : true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});
Cela peut être utile lorsque vous avez beaucoup de html à placer dans vos popovers.
Voici un exemple de violon: http://jsfiddle.net/z824fn6b/
J'ai utilisé un pop dans une liste, Im donnant un exemple via HTML
<a type="button" data-container="body" data-toggle="popover" data-html="true" data-placement="right" data-content='<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>'>
Ceci est une légère modification sur l'excellente réponse de Jack .
Ce qui suit garantit que les popovers simples, sans contenu HTML, restent inchangés.
JavaScript:
$(function(){
$('[data-toggle=popover]:not([data-popover-content])').popover();
$('[data-toggle=popover][data-popover-content]').popover({
html : true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});
Je déteste vraiment mettre du HTML long à l'intérieur de l'attribut, voici ma solution, claire et simple (remplacer ? avec tout ce que vous voulez):
<a class="btn-lg popover-dismiss" data-placement="bottom" data-toggle="popover" title="Help">
<h2>Some title</h2>
Some text
</a>
Puis
var help = $('.popover-dismiss');
help.attr('data-content', help.html()).text(' ? ').popover({trigger: 'hover', html: true});
C'est une vieille question, mais c'est une autre façon, en utilisant jQuery pour réutiliser le popover et continuer à utiliser les attributs de données Bootstrap d'origine pour le rendre plus sémantique:
Le lien
<a href="#" rel="popover" data-trigger="focus" data-popover-content="#popover">
Show it!
</a>
Contenu personnalisé à afficher
<!-- Let's show the Bootstrap nav on the popover-->
<div id="list-popover" class="hide">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Javascript
$('[rel="popover"]').popover({
container: 'body',
html: true,
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
});
Jouer avec un exemple complet: http://jsfiddle.net/tomsarduy/262w45L5/
Vous pouvez changer le " modèle/liste/liste.html' dans le fichier 'ui-bootstrap-npt-0.11.0.js' Écrire: "liez-html-dangereux" au lieu de "ng-bind"
Il affichera tous les popover avec html. * son HTML dangereux. Utilisez uniquement si vous faites confiance au code html.