Comment envelopper une sélection d'onglets de démarrage de Twitter sous forme unique?

J'ai un composant de tabulation bootstrap Twitter.

Je veux que deux des onglets fassent partie d'un formulaire. Et le troisième à ne pas l'être.

Je pensais donc que je vais simplement envelopper les deux onglets sous une forme.

Mais cela ne fonctionne pas: http://jsfiddle.net/gLrr4/1/

Fondamentalement, pendant que les classes sont appliquées aux éléments de droite, il semble que le formulaire empêche les onglets respectifs de modifier leur visibilité.

Comment puis-je réparer cela?

Demo: http://jsfiddle.net/gLrr4/1/
Code de démo:

<html> <head> <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" type="text/css"/> <script src='http://twitter.github.com/bootstrap/js/bootstrap-tab.js'></script> </head> <body> <div class="alert alert-error">Tab 1 and two are wrapped in a form tag!</div> <div class='row'> <div class="span12"> <div class="tabbable"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">#tab1</a></li> <li><a href="#tab2" data-toggle="tab">#tab2</a></li> <li><a href="#tab3" data-toggle="tab">#tab3</a></li> </ul> <div class="tab-content"> <form class="form-vertical"> <div class="tab-pane active" id="tab1"> <div class="alert alert-info"> This is #tab1 </div> <div class='form-actions'> <button type='submit' class='btn btn-primary'>Save changes</button> <button id='cancel' class='btn'>Cancel</button> </div> </div> <div class="tab-pane" id="tab2"> <div class="alert alert-info"> This is #tab2 </div> <div class='form-actions'> <button type='submit' class='btn btn-primary'>Save changes</button> <button id='cancel' class='btn'>Cancel</button> </div> </div> </form> <div class="tab-pane" id="tab3"> <div class="alert alert-info"> This is #tab3 </div> </div> </div> </div> </div> </div> </body> </html>

D'accord,

Trouvé la solution:

Avec un peu de Javascript:

 $('a[data-toggle="tab"]').on('shown', function (e) { $(e.target.hash).closest('.tab-content') .find('> form > .tab-pane.active:not(' + e.target.hash + '), > .tab-pane.active:not(' + e.target.hash + ')') .removeClass('active'); });

Et un peu de css:

 .tab-content > form > .tab-pane, .pill-content > form > .pill-pane { display: none; } .tab-content > form > .active, .pill-content > form > .active { display: block; }

Nous pouvons maintenant nicher les onglets sous une forme, Bien sûr, cela ne prend en charge que les balises de forme, pas tout enfant,
Je pourrais le faire supporter tout élément en supprimant les > mais le problème est que cela tomber en cascade si nous avions des onglets imbriqués!

Juste, une longue réponse, mais supportez-moi: il y a deux problèmes qui nécessitent une «réparation» pour que cela fonctionne …

Premier problème: les deux premiers onglets sont affichés en même temps.

Cause : Boostrap.css (non minifiées) lignes 4042 et 4047 sélectionnez uniquement les descendants immédiats de la div:

 .tab-content > .tab-pane

 .tab-content > .active

Résolution : Ajoutez le CSS suivant à un fichier CSS distinct:

 .tab-content .tab-pane { display: none; } .tab-content .active { display: block; }

Deuxième problème: le troisième onglet est toujours affiché une fois qu'il a été cliqué et un autre onglet est sélectionné.

Cause : c'est parce que lorsque boostrap efface la classe "active" à partir des onglets qui n'ont pas été cliqués, il ne recherche que les descendants directs du conteneur. À la ligne 1563 de bootstrap.js:

 var $active = container.find('> .active')

Résolution : Pour résoudre ce problème, vous devrez modifier cette ligne vers:

 var $active = container.find('.active')

Cependant, ce n'est pas idéal. Donc, si vous ne voulez pas modifier le code bootstrap, vous pouvez …

Copiez tous les éléments de l'onglet d'amorçage entre les lignes 1510 et 1624
Renommer toutes les occurrences de Tab to NewTab
Changez $.fn.tab de la ligne 1602 à $.fn.modifiedTab ou similaire
Change (data = new Tab(this)) de la ligne 1606 à (data = new NewTab(this))
Utilisez-le selon la documentation , mais .tab devient .modifiedTab

J'espère que cela pourra aider 🙂

J'espère que c'est votre recherche, voici le lien http://jsfiddle.net/gLrr4/2/

Il semblerait que le fait de prendre l'étiquette de formulaire en dehors du contenu div-tab a fait fonctionner.