I have a twitter bootstrap tabs ponenet.
I want two of the tabs to be part of a form. and the third to not be.
So I thought, I'll just wrap the two tabs in a form.
But it does not work: /
Basically whilst the classes get applied to the right elements, it seems that the form is stopping the respective tabs from changing their visibility.
How can I fix this?
Demo: /
Demo Code:
<html>
<head>
<link rel="stylesheet" href=".css" type="text/css"/>
<script src='.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>
I have a twitter bootstrap tabs ponenet.
I want two of the tabs to be part of a form. and the third to not be.
So I thought, I'll just wrap the two tabs in a form.
But it does not work: http://jsfiddle/gLrr4/1/
Basically whilst the classes get applied to the right elements, it seems that the form is stopping the respective tabs from changing their visibility.
How can I fix this?
Demo: http://jsfiddle/gLrr4/1/
Demo Code:
<html>
<head>
<link rel="stylesheet" href="http://twitter.github./bootstrap/assets/css/bootstrap.css" type="text/css"/>
<script src='http://twitter.github./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>
- Can I ask why you don't want the third tab in the form? – greg84 Commented Sep 19, 2012 at 23:06
- Yeah, I am surprised this is not a supported use-case, I could see it being a mon practice? – Hailwood Commented Sep 19, 2012 at 23:12
2 Answers
Reset to default 4With a little 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 a smidge of CSS:
.tab-content > form > .tab-pane,
.pill-content > form > .pill-pane {
display: none;
}
.tab-content > form > .active,
.pill-content > form > .active {
display: block;
}
we can now nest the tabs in a form. Of course, this only supports form tags, not any child.
I could make it support any element by removing the >s but the issue is that that would cascade down if we had nested tabs.
There are a two issues that need "fixing" to get this to work.
First problem: The first two tabs are displayed at the same time.
Cause: bootstrap.css (not minified) lines 4042 and 4047 select only the immediate descendants of the div:
.tab-content > .tab-pane
and
.tab-content > .active
Resolution: Add the following CSS to a separate CSS file:
.tab-content .tab-pane
{
display: none;
}
.tab-content .active
{
display: block;
}
Second problem: The third tab is now always displayed once it's been clicked and another tab is selected.
Cause: This is because when Bootstrap clears the "active" class from the tabs that haven't been clicked, it only looks for direct descendants of the container. On line 1563 of bootstrap.js:
var $active = container.find('> .active')
Resolution: To fix this, you'll need to change this line to:
var $active = container.find('.active')
However, this is not ideal. So if you don't want to change the Bootstrap code you can:
- Copy all the bootstrap-tab stuff between lines 1510 and 1624
- Rename all occurrences of
TabtoNewTab - Change
$.fn.tabfrom line 1602 to$.fn.modifiedTabor similar - Change
(data = new Tab(this))from line 1606 to(data = new NewTab(this)) - Use it as per the documentation, but
.tabbees.modifiedTab
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744892280a4599486.html
评论列表（0条）