docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve bootstrap tabs (#2546) 

Use data-target instead of href
Move tab-syncing code into site-wide JS so everyone can use it
Add example for syncing tab groups on the same page
This commit is contained in:
Misty Stanley-Jones 2017-03-30 12:57:37 -07:00 committed by GitHub
parent 9902ceb84c
commit c6aca8acee
6 changed files with 57 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -251,8 +251,8 @@ references as you rename, add, and remove tabs.
```
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">TAB 1 HEADER</a></li>
<li><a data-toggle="tab" href="#tab2">TAB 2 HEADER</a></li>
<li class="active"><a data-toggle="tab" data-target="#tab1">TAB 1 HEADER</a></li>
<li><a data-toggle="tab" data-target="#tab2">TAB 2 HEADER</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">TAB 1 CONTENT</div>

2
compose/compose-file/index.md
View File

@ -37,7 +37,7 @@ tutorial](/engine/getstarted-voting-app/index.md).
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title" id="collapsible-group-item-3"> <a class="" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree"> Example Compose file version 3 </a> </h4>
<h4 class="panel-title" id="collapsible-group-item-3"> <a class="" role="button" data-toggle="collapse" data-parent="#accordion" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree"> Example Compose file version 3 </a> </h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree" aria-expanded="true">
<div class="panel-body">

24
datacenter/dtr/2.2/guides/admin/configure/use-a-load-balancer.md
View File

@ -89,9 +89,9 @@ balance checks. Use `/health` instead for those kinds of checks.
Use the following examples to configure your load balancer for DTR.
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#nginx" data-group="nginx">NGINX</a></li>
<li><a data-toggle="tab" href="#haproxy" data-group="haproxy">HAProxy</a></li>
<li><a data-toggle="tab" href="#aws">AWS LB</a></li>
<li class="active"><a data-toggle="tab" data-target="#nginx" data-group="nginx">NGINX</a></li>
<li><a data-toggle="tab" data-target="#haproxy" data-group="haproxy">HAProxy</a></li>
<li><a data-toggle="tab" data-target="#aws">AWS LB</a></li>
</ul>
<div class="tab-content">
<div id="nginx" class="tab-pane fade in active">
@ -259,8 +259,8 @@ backend dtr_upstream_servers_443
You can deploy your load balancer using:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#nginx-2" data-group="nginx">NGINX</a></li>
<li><a data-toggle="tab" href="#haproxy-2" data-group="haproxy">HAProxy</a></li>
<li class="active"><a data-toggle="tab" data-target="#nginx-2" data-group="nginx">NGINX</a></li>
<li><a data-toggle="tab" data-target="#haproxy-2" data-group="haproxy">HAProxy</a></li>
</ul>
<div class="tab-content">
<div id="nginx-2" class="tab-pane fade in active">
@ -302,17 +302,3 @@ docker run --detach \
* [Backups and disaster recovery](../backups-and-disaster-recovery.md)
* [DTR architecture](../../architecture.md)
<script>
// sync tabs for the same language, so you only have to click once.
// jquery is only loaded at the footer, so we can't rely on it for the
// page load event
window.onload = function() {
$('.nav-tabs > li > a').click(function(e) {
var group = $(this).attr('data-group');
$('.nav-tabs > li > a[data-group="'+ group +'"]').tab('show');
})
};
</script>

6
engine/api/index.md
View File

@ -23,9 +23,9 @@ The API can be accessed with any HTTP client, but we also provide [SDKs](sdks.md
As an example, the `docker run` command can be easily implemented in various programming languages and by hitting the API directly with `curl`:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#python">Python</a></li>
<li><a data-toggle="tab" href="#go">Go</a></li>
<li><a data-toggle="tab" href="#curl">curl</a></li>
<li class="active"><a data-toggle="tab" data-target="#python">Python</a></li>
<li><a data-toggle="tab" data-target="#go">Go</a></li>
<li><a data-toggle="tab" data-target="#curl">curl</a></li>
</ul>
<div class="tab-content">
<div id="python" class="tab-pane fade in active">

9
js/docs.js
View File

@ -280,3 +280,12 @@ if($('.nav-sidebar ul a.active').length != 0)
$(this).addClass('collapse in').siblings;
});
}
// sync tabs with the same data-group
window.onload = function() {
$('.nav-tabs > li > a').click(function(e) {
var group = $(this).attr('data-group');
$('.nav-tabs > li > a[data-group="'+ group +'"]').tab('show');
})
};

42
test.md
View File

@ -232,22 +232,22 @@ You can nest captures within each other to represent more complex logic with Liq
Here are some tabs:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">TAB 1 HEADER</a></li>
<li><a data-toggle="tab" href="#tab2">TAB 2 HEADER</a></li>
<li class="active"><a data-toggle="tab" data-target="#tab1">TAB 1 HEADER</a></li>
<li><a data-toggle="tab" data-target="#tab2">TAB 2 HEADER</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">TAB 1 CONTENT</div>
<div id="tab2" class="tab-pane fade">TAB 2 CONTENT</div>
</div>
You need to adjust the IDs and HREFs to match your use case.
You need to adjust the `id` and `data-target` values to match your use case.
If you have Markdown inside the content of the `<div>`, you need to capture it, then
print it and run it through the `markdownify` Liquid filter. Here's a demo:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab3">TAB 1 HEADER</a></li>
<li><a data-toggle="tab" href="#tab4">TAB 2 HEADER</a></li>
<li class="active"><a data-toggle="tab" data-target="#tab3">TAB 1 HEADER</a></li>
<li><a data-toggle="tab" data-target="#tab4">TAB 2 HEADER</a></li>
</ul>
<div class="tab-content">
<div id="tab3" class="tab-pane fade in active">
@ -270,6 +270,38 @@ print it and run it through the `markdownify` Liquid filter. Here's a demo:
</div>
</div>
#### Synchronizing multiple tab groups
Consider an example where you have something like one tab per language, and
you have multiple tab sets like this on a page. You might want them to all
toggle together. We have Javascript that loads on every page that lets you
do this by setting the `data-group` attributes to be the same. Note that the
`data-target` attributes still need to point to unique div IDs.
In this example, selecting `Go` or `Python` in one tab set will toggle the
other tab set to match.
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" data-target="#go" data-group="go">Go</a></li>
<li><a data-toggle="tab" data-target="#python" data-group="python">Python</a></li>
</ul>
<div class="tab-content">
<div id="go" class="tab-pane fade in active">Go content here</div>
<div id="python" class="tab-pane fade in">Python content here</div>
</div>
And some content between the two sets, just for fun...
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" data-target="#go-2" data-group="go">Go</a></li>
<li><a data-toggle="tab" data-target="#python-2" data-group="python">Python</a></li>
</ul>
<div class="tab-content">
<div id="go-2" class="tab-pane fade in active">Go content here</div>
<div id="python-2" class="tab-pane fade in">Python content here</div>
</div>
### Cards
In a Bootstrap row, your columns need to add up to 12. Here are three cards in