All geek questions in one place

How to wrap twitter bootstrap tab as one form?

I have bootstrap tab for twitter.

I want two of the tabs to be part of the form. and the third is not.

So, I thought, I’ll just close the two tabs on the form.

But this does not work: http://jsfiddle.net/gLrr4/1/

In principle, while classes are applied to the correct elements, it seems that the form stops the corresponding tabs from changing their visibility.

How can i fix this?

Demo: http://jsfiddle.net/gLrr4/1/
Demo code:

<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>​
+4
source share
3 answers

Good,

Found a solution:

With a bit of 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'); });

And smidge css:

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

Now we can insert tabs into the form. Of course, this only supports form tags, not child tags.
I could make it support any element by removing > , but the problem is that it will cascade down if we had sub tabs!

+4
source

That's right, a bit of a long answer, but carrying with me - there are two problems that need to be “fixed” in order to make this work ...

First problem: the first two tabs are displayed simultaneously.

Reason : lines of boostrap.css (not reduced) 4042 and 4047 select only immediate descendants of the div:

 .tab-content > .tab-pane

and

 .tab-content > .active

Permission . Add the following CSS to a separate CSS file:

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

The second problem: the third tab is now always displayed when it was pressed, and another tab is selected.

Reason . This is because when boostrap clears the “active” class from tabs that have not been pressed, it searches only for direct children of the container. On line 1563 of the bootstrap.js file:

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

Permission . To fix this, you need to change this line to:

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

However, this is not ideal. Therefore, if you do not want to change the boot code, you can ...

  • Copy all elements of the boot tab between lines 1510 and 1624
  • Rename all occurrences of Tab to NewTab
  • Change $.fn.tab from line 1602 to $.fn.modifiedTab or similar
  • Change (data = new Tab(this)) on line 1606 to (data = new NewTab(this))
  • Use it as documentation , but .tab becomes .modifiedTab

Hope that helps :)

+2
source

I hope this is your search, here is the link http://jsfiddle.net/gLrr4/2/

It would seem that using the form tag outside the contents of the div-tab made it work.

0
source

Source: https://habr.com/ru/post/1435161/

More articles:


All Articles