Comment puis-je faire Bootstrap liste de travail avec du contenu HTML dans un autre élément
Je suis dans le processus de combinaison de Bootstrap panneaux avec Bootstrap liste des fonctionnalités. L'objectif est de montrer une liste lorsque l'utilisateur place le panneau d'en-tête. J'ai déjà eu ce travail, sauf que le data-content=""
partie devient tout à fait ingérable quand il a beaucoup de HTML à l'intérieur.
Voici un exemple de code HTML, je travaille avec. La partie qui dit que "les CHARGES DE HTML" contient des div à l', table, p, etc.
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-briefcase fa-fw"></i>
<abbr title="Panel title" data-container="body" data-toggle="popover"
data-placement="bottom" data-trigger="hover" data-html="true"
data-content="<div>LOADS OF HTML HERE</div>">
Panel title
</abbr>
<div class="col-xs-6 col-md-4 pull-right" style="margin-top: -4px;">
<!-- some buttons go here -->
</div>
</div>
<!-- /.panel-heading -->
</div>
<!-- some panel content goes here -->
</div>
Autres Bootstrap plugins résoudre ce problème en vous permettant de placer le code HTML dans un élément distinct, puis de référence de cet élément avec un "data-target" attribut. Malheureusement, la Liste ne prend pas en charge cette. Comment puis-je imiter ce comportement sans écrire élément spécifique du JavaScript?
- Pourquoi avez-vous de poser et de répondre à la question?
- Parce que StackOverflow favorise la Q&A-style de contenu? blog.stackoverflow.com/2011/07/...
- Info doux. Maintenant, je peux enfin poster les questions que je me mets charge de travail dans la, seulement pour trouver la réponse moi-même, juste avant d'être prêt à poster :). Il y a au moins été une couple de fois où il aurait probablement été utile pour les autres aussi 🙂
Vous devez vous connecter pour publier un commentaire.
Tout texte/HTML que vous souhaitez afficher dans la liste peuvent être ajoutées dans un
DIV
qui a undisplay:none;
propriété CSS pour elle.Vous pouvez passer d'une fonction à la
content
propriété de la liste des options qui obtient le contenu de la cachéDIV
. De cette façon, on n'a pas besoin de référence par ID et insérer des balises de script.Voici un exemple http://jsfiddle.net/wb3n8/
HTML:
CSS:
Javascript:
hover
méthode qui peut ensuite vérifier la pré-liste et justeshow
ouhide
en conséquence.Une solution élégante consiste à placer le code HTML contenu à l'intérieur d'un script, étiquette avec un id et ensuite ajouter un
data-target="element_id_goes_here"
attribut à l'élément qui va déclencher la liste. Puisque vous êtes à l'aide de liste, vous devriez déjà avoir une certaine générique JavaScript quelque part qui initialise le plugin. Vous pouvez étendre cette JavaScript avec quelques lignes de code.HTML
JavaScript
Solution, basée sur Martin Devillers post, mais plus souple (transmet toutes les données* les balises dans bootstrap js)