mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-09 13:11:03 +02:00
Code Issues Releases Wiki Activity

markdownify tabs

Browse Source
This commit is contained in:
Mark Otto
2014-07-12 02:42:23 -07:00
parent 537cd1c1c3
commit 1916981faf
1 changed files with 73 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
docs/javascript/tabs.md
View File

@@ -3,11 +3,10 @@ layout: page
title: Tabs
---
<div class="bs-docs-section">
<h1 id="tabs" class="page-header">Togglable tabs <small>tab.js</small></h1>
## Example
Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.
<h2 id="tabs-examples">Example tabs</h2>
<p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
<div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
@@ -34,16 +33,16 @@ title: Tabs
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
</div>
</div>
</div><!-- /example -->
</div>
<div class="bs-callout bs-callout-info">
<h4>Extends tabbed navigation</h4>
<p>This plugin extends the <a href="../components/#nav-tabs">tabbed navigation component</a> to add tabbable areas.</p>
</div>
## Usage
<h2 id="tabs-usage">Usage</h2>
<p>Enable tabbable tabs via JavaScript (each tab needs to be activated individually):</p>
Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
{% highlight js %}
$('#myTab a').click(function (e) {
@@ -52,7 +51,7 @@ $('#myTab a').click(function (e) {
})
{% endhighlight %}
<p>You can activate individual tabs in several ways:</p>
You can activate individual tabs in several ways:
{% highlight js %}
$('#myTab a[href="#profile"]').tab('show') // Select tab by name
@@ -61,8 +60,10 @@ $('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
{% endhighlight %}
<h3>Markup</h3>
<p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap <a href="../components/#nav-tabs">tab styling</a>, while adding the <code>nav</code> and <code>nav-pills</code> classes will apply <a href="../components/#nav-pills">pill styling</a>.</p>
### Markup
You can activate a tab or pill navigation without writing any JavaScript by simply specifying `data-toggle="tab"` or `data-toggle="pill"` on an element. Adding the `.nav` and `.nav-tabs` classes to the tab `<ul>` will apply the Bootstrap <a href="../components/#nav-tabs">tab styling</a>, while adding the `.nav` and `.nav-pills` classes will apply <a href="../components/#nav-pills">pill styling</a>.
{% highlight html %}
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
@@ -81,8 +82,10 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
</div>
{% endhighlight %}
<h3>Fade effect</h3>
<p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>. The first tab pane must also have <code>.in</code> to properly fade in initial content.</p>
### Fade effect
To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.in to properly fade in initial content.
{% highlight html %}
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
@@ -92,11 +95,12 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
</div>
{% endhighlight %}
<h3>Methods</h3>
<h4>$().tab</h4>
<p>
Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM.
</p>
### Methods
#### $().tab
Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM.
{% highlight html %}
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
@@ -119,7 +123,8 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
</script>
{% endhighlight %}
<h3>Events</h3>
### Events
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
@@ -139,11 +144,11 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
</div>
{% highlight js %}
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})
{% endhighlight %}
</div>