Contenir forme au sein d'un bootstrap liste?

<div class="container">
    <div class="row" style="padding-top: 240px;">
        <a href="#" class="btn btn-large btn-primary" 
            data-content="<form><input type="text"/></form>"
            data-placement="top" data-original-title="Fill in form">Open form</a>
    </div>
</div>

JSfiddle

Je devine que je voudrais stocker le formulaire contenu dans une fonction javascript...

Comment puis-je contenir un formulaire dans un fichier d'amorce liste?

InformationsquelleAutor user1438003 | 2012-08-26

46

Remplacer guillemets autour de type="text" avec des guillemets simples, Comme
```
"<form><input type='text'/></form>"
```
OU

remplacer les guillemets emballage data-content avec de simples citations, Comme
```
data-content='<form><input type="text"/></form>'
```
- n'oubliez pas le "data-html= "true "" dans la balise button
- N'a pas fonctionné jusqu'à ce que j'ai fait ce que @Wirzi dit
InformationsquelleAutor AdityaParab
265

Je voudrais mettre mon formulaire dans le balisage et pas dans certaines données de la balise.
C'est la façon dont cela pourrait fonctionner:

Code JS:
```
$('#popover').popover({ 
    html : true,
    title: function() {
      return $("#popover-head").html();
    },
    content: function() {
      return $("#popover-content").html();
    }
});
```
Balisage HTML:
```
<a href="#" id="popover">the popover link</a>
<div id="popover-head" class="hide">
  some title
</div>
<div id="popover-content" class="hide">
  
</div>
```
Démo

Approches Alternatives:

X-Modifiable

Vous voudrez peut-être jeter un oeil à X-Modifiable.
Une bibliothèque qui vous permet de créer les éléments modifiables sur votre page en fonction de popovers.

Webcomponents

Mike Costello a publié Bootstrap Composants Web.
Cette chouette bibliothèque dispose d'un Popovers Composant qui permet d'intégrer le formulaire de balisage:
```
<button id="popover-target" data-original-title="MyTitle" title="">Popover</button>

<bs-popover title="Popover with Title" for="popover-target">
  
</bs-popover>
```
Démo
- Solution sympa, je viens de mettre le titre de data-title="Some Title" dans le <a id="myID"> balise pour ne pas avoir un supplément de div...
- Cela a été utile
- C'est une excellente solution. Doit être accepté de répondre.
- La seule véritable réponse.
- pour la façon dont vous l'avez mis.
- jsfiddle démo semble être brisé...
- Je viens de corrigé: jsfiddle.net/nB4U6
- Cette réponse mérite cent vingt-six jusqu'votes!
- Ouais, génial réponse. Il faut le dire. Encore et encore! Merci beaucoup.
- lors de la fermeture de la fenêtre pop-over, les données d'entrée est désactivée
- yepp thats droit. La raison pour cela est que bootstrap ne le cache de la liste. Bootstrap supprime de la DOM lorsqu'il se ferme. Cette restriction est donc un problème de bootstrap.liste elle-même et non pas de ce petit hack.
- Si vous souhaitez conserver les données, essayez d'écouter de la hide.bs.popover de l'Événement, puis de remplacer le .popover-content avec le contenu de la liste. Qui pourrait fonctionner.
- Grande réponse. Mais j'ai une autre question. comment puis-je afficher les info-bulle en bas. Selon votre échantillon, vous montrant l'info-bulle au bon endroit... ???? S'il vous plaît aider..
- utiliser le placement option. Découvrez jsfiddle.net/nB4U6/824
- Merci il fonctionnait. J'ai d'autres questions. lorsque je clique sur les autres composants de pointe de l'outil n'est pas hireing. Je veux dire . quand je cliecked zone vide je veux fermer l'ouverture de la pointe de l'outil... que puis-je faire pour que. l'approche que je dois suivre.
- Veuillez lire: getbootstrap.com/javascript/#popovers Vous êtes à la recherche pour le trigger option. (trigger: 'focus')
- solution sympa, mais autant que je sache footer ne peut pas être utilisé, qui est défini dans le code html de votre jsFiddle (que vous n'avez pas résoudre les problèmes)
- est-il possible de bind le contenu de la portée? La question que je me pose est, que les expressions définies dans le code html transmis à content n'est pas mis à jour par angulaire
- Pourquoi n'utilisez-vous pas: angular-ui.github.io/bootstrap/#/liste? Il faut résoudre votre problèmes.
- merci pour l'astuce!
- data='html' l'ai fait. Merci!!!!
InformationsquelleAutor HaNdTriX

<a data-title="A Title" data-placement="top" data-html="true" data-content="<form><input type='text'/></form>" data-trigger="hover"  class="btn btn-primary" id="test">Top popover</a>

simplement " data-html="true"

InformationsquelleAutor zainiafzan

Ou essayer celui-ci

Deuxième un deuxième cachés div de contenu pour tenir la forme de travail et de test sur le violon http://jsfiddle.net/7e2XU/21/

<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<div id="popover-content" style="display: none" >
<div class="container" style="margin: 25px; ">
<div class="row" style="padding-top: 240px;">
<label id="sample">
<form id="mainForm" name="mainForm" method="post" action="">
<p>
<label>Name :</label>
<input type="text" id="txtName" name="txtName" />
</p>
<p>
<label>Address 1 :</label>
<input type="text" id="txtAddress" name="txtAddress" />
</p>
<p>
<label>City :</label>
<input type="text" id="txtCity" name="txtCity" />
</p>
<p>
<input type="submit" name="Submit" value="Submit" />
</p>
</form>
</label>
</div>
</div> 
</div>
<a href="#" style="margin: 40px 40px;" class="btn btn-large btn-primary" rel="popover" data-content='' data-placement="left" data-original-title="Fill in form">Open form</a>
<script>
$('a[rel=popover]').popover({
html: 'true',
placement: 'right',
content : function() {
return $('#popover-content').html();
}
})
</script>

C'est une bonne solution, mais votre jsfiddle lien ne semble pas correspondre à la même mise en œuvre. Vous trouvez cette plunk j'ai fait qui l'implémente correctement: plnkr.co/modifier/IV2YbLCFSiYI0T1mXOLN?p=preview.

InformationsquelleAutor ivan ivan

comme ce de Travail démo http://jsfiddle.net/7e2XU/21/show/#
* Mise à jour: http://jsfiddle.net/kz5kjmbt/

 <div class="container">
<div class="row" style="padding-top: 240px;"> <a href="#" class="btn btn-large btn-primary"  data-content='
<form id="mainForm" name="mainForm" method="post" action="">
<p>
<label>Name :</label>
<input type="text" id="txtName" name="txtName" />
</p>
<p>
<label>Address 1 :</label>
<input type="text" id="txtAddress" name="txtAddress" />
</p>
<p>
<label>City :</label>
<input type="text" id="txtCity" name="txtCity" />
</p>
<p>
<input type="submit" name="Submit" value="Submit" />
</p>
</form>
data-placement="top" data-original-title="Fill in form">Open form</a>
</div>
</div>

Code JavaScript:

    $('a[rel=popover]').popover({
html: 'true',
placement: 'right'
})

Capture d'écran

Contenir forme au sein d'un bootstrap liste?

La démo n'a pas travaillé pour moi. FF 28, Win 7.
le violon ne fonctionne pas. semble avoir des problèmes de chargement de jQuery
Grâce à son fixe maintenant: jsfiddle.net/kz5kjmbt CA disparu, la caisse mise à jour du lien et de la capture d'écran. :)
Cette solution fonctionne sur courant Chrome et répond à la question. Toutefois, avoir des complexes, des balises dans le code html attributs peuvent être sujettes à l'erreur et d'ajouter des risques sur la maintenabilité et learnability du code.

InformationsquelleAutor Tats_innit

Vous pouvez télécharger le formulaire à partir d'un caché div élément avec le Bootstrap fourni hidden classe.

<button class="btn btn-default" id="form-popover">Form popover</button>
<div class="hidden">
<form id="form">
<input type="text" class="form-control" />
</form>
</div>

JavaScript:

$('#form-popover').popover({
content: $('#form').parent().html(),
html: true,
});

Remplacer $(...).parent().html() avec $(...).clone() 😉

InformationsquelleAutor Fred

Une solution complète pour toute personne qui pourrait avoir besoin d'elle, j'ai utilisé cela avec de bons résultats jusqu'à présent

JS:

$(".btn-popover-container").each(function() {
var btn = $(this).children(".popover-btn");
var titleContainer = $(this).children(".btn-popover-title");
var contentContainer = $(this).children(".btn-popover-content");
var title = $(titleContainer).html();
var content = $(contentContainer).html();
$(btn).popover({
html: true,
title: title,
content: content,
placement: 'right'
});
});

HTML:

<div class="btn-popover-container">
<button type="button" class="btn btn-link popover-btn">Button Name</button>
<div class="btn-popover-title">
Popover Title
</div>
<div class="btn-popover-content">
<form>
Or Other content..
</form>
</div>
</div>

CSS:

.btn-popover-container {
display: inline-block;
}
.btn-popover-container .btn-popover-title, .btn-popover-container .btn-popover-content {
display: none;
}

InformationsquelleAutor Sam

0

Je travaille dans WordPress beaucoup donc utiliser PHP.

Ma méthode est de contenir mon code HTML dans une Variable PHP, et puis l'écho de la variable dans data-content.
```
$my-data-content = '<form><input type="text"/></form>';
```
avec
```
data-content='<?php echo $my-data-content; ?>' 
```
InformationsquelleAutor bbruman

Vous devez vous connecter pour publier un commentaire.

Comment puis-je contenir un formulaire dans un fichier d'amorce liste?

Code JS:

Balisage HTML:

Approches Alternatives:

X-Modifiable

Webcomponents