Skip to content

Commit 81f6f6b

Browse files
dlechdlech
committed
Add tabs template.
1 parent addf873 commit 81f6f6b

4 files changed

Lines changed: 156 additions & 0 deletions

File tree

‎_includes/head.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<script src="{{ site.github.url }}/javascripts/cards.js"></script>
1212
<script src="{{ site.github.url }}/javascripts/menu.js"></script>
1313
<script src="{{ site.github.url }}/javascripts/search.js"></script>
14+
<script src="{{ site.github.url }}/javascripts/tabs.js"></script>
1415
<!--[if lt IE 9]>
1516
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
1617
<![endif]-->

‎_includes/tabs.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{% comment %}
2+
3+
This uses `/javascripts/tabs.js` and css to provide a tabbed interface to hide
4+
and reveal content using tabs. Useful for things like code samples in multiple
5+
languages or tutorials for multiple OSes.
6+
7+
Parameters:
8+
9+
id: Can be anything.
10+
tabs: The labels that will be displayed on the tabs separated with a "|" character.
11+
files: The names of the files that will be used for the contents of the tabs
12+
separated with a "|" character. These can be .html or .md files. The files
13+
must be placed in the same directory as the calling file in a subdirectory
14+
named `_tabs/`.
15+
16+
{% endcomment %}
17+
18+
<div tab-area="{{ include.id }}" class="tab-area">
19+
{% assign id = "0" %}
20+
<div class="tabs">
21+
<ul tabs="{{ include.id }}">
22+
{% assign tabs = include.tabs | split: "|" %}
23+
{% for tab in tabs %}
24+
<li tab="{{ forloop.index0 }}">
25+
{{ tab }}
26+
</li>
27+
{% endfor %}
28+
</ul>
29+
</div>
30+
<div tab-content-area="{{ include.id }}" class="tab-content-area">
31+
{% assign tab_files = include.files | split: "|" %}
32+
{% for tab in tab_files %}
33+
{% assign ext = tab | split: "." | last %}
34+
{% if ext == "md" %}
35+
{% assign markdown = "markdown='1'" %}
36+
{% else %}
37+
{% assign markdown = "" %}
38+
{% endif %}
39+
{% comment %} Since we can have markdown here, it is important that these lines are not indented {% endcomment %}
40+
<div tab-content="{{ forloop.index0 }}" class="tab-content" {{ markdown }}>
41+
42+
{% include_relative _tabs/{{ tab }} %}
43+
44+
</div>
45+
{% comment %} End markdown no-indent block {% endcomment %}
46+
{% endfor %}
47+
</div>
48+
</div>

‎javascripts/tabs.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// Function to handle tabs from the /_includes/tabs.html template.
2+
3+
$(document).ready(function () {
4+
$('div[tab-area]').each(function (i, element) {
5+
var $tabArea = $(element);
6+
var $visibleContent;
7+
$tabArea.find('li[tab]').each(function (i, element) {
8+
var $tab = $(element);
9+
if (i == 0)
10+
$tab.addClass("tab-active");
11+
var id = $tab.attr('tab');
12+
$tab.on('click', function () {
13+
$tabArea.find('li[tab]').removeClass("tab-active");
14+
$tab.addClass("tab-active");
15+
$visibleContent.hide ();
16+
var $content = $tabArea.find('div[tab-content="' + id + '"]');
17+
$content.show ();
18+
$visibleContent = $content;
19+
});
20+
});
21+
$tabArea.find('div[tab-content]').each(function (i, element) {
22+
var $content = $(element);
23+
if (i > 0)
24+
$content.hide ();
25+
else
26+
$visibleContent = $content;
27+
});
28+
});
29+
});

‎stylesheets/styles.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1219,6 +1219,84 @@ section #title p {
12191219
margin-bottom: 5px;
12201220
}
12211221

1222+
.tab-area {
1223+
margin: 0px 0px 20px;
1224+
}
1225+
1226+
.tabs > ul {
1227+
list-style: none;
1228+
margin: 0px;
1229+
padding: 0px;
1230+
}
1231+
1232+
.tabs > ul > li {
1233+
cursor: pointer;
1234+
-webkit-appearance: button;
1235+
font-family: 'OpenSansLight', "Helvetica Neue", Helvetica, Arial, sans-serif;
1236+
font-weight: normal;
1237+
list-style: none;
1238+
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
1239+
1240+
color: white;
1241+
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #252525), color-stop(100%, #434343));
1242+
background: -webkit-linear-gradient(#252525, #434343);
1243+
background: -moz-linear-gradient(#252525, #434343);
1244+
background: -o-linear-gradient(#252525, #434343);
1245+
background: -ms-linear-gradient(#252525, #434343);
1246+
background: linear-gradient(#252525, #434343);
1247+
background-color: #252525;
1248+
line-height: 14px;
1249+
font-size: 14px;
1250+
display: inline-block;
1251+
text-align: center;
1252+
1253+
border: 1px solid #434343;
1254+
border-top-left-radius: 6px;
1255+
border-top-right-radius: 6px;
1256+
border-bottom-left-radius: 0px;
1257+
border-bottom-right-radius: 0px;
1258+
padding: 6px 10px;
1259+
margin: 0px;
1260+
}
1261+
1262+
.tabs > ul > li:hover {
1263+
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b6b6b6), color-stop(100%, #434343));
1264+
background: -webkit-linear-gradient(#b6b6b6, #434343);
1265+
background: -moz-linear-gradient(#b6b6b6, #434343);
1266+
background: -o-linear-gradient(#b6b6b6, #434343);
1267+
background: -ms-linear-gradient(#b6b6b6, #434343);
1268+
background: linear-gradient(#b6b6b6, #434343);
1269+
background-color: #b6b6b6;
1270+
}
1271+
1272+
.tabs > ul > li.tab-active {
1273+
cursor: unset;
1274+
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #696969), color-stop(100%, #434343));
1275+
background: -webkit-linear-gradient(#696969, #434343);
1276+
background: -moz-linear-gradient(#696969, #434343);
1277+
background: -o-linear-gradient(#696969, #434343);
1278+
background: -ms-linear-gradient(#696969, #434343);
1279+
background: linear-gradient(#696969, #434343);
1280+
background-color: #696969;
1281+
}
1282+
1283+
.tab-content-area {
1284+
margin: 0px;
1285+
padding: 12px;
1286+
background-color: #434343;
1287+
border-top-left-radius: 0px;
1288+
border-top-right-radius: 6px;
1289+
border-bottom-left-radius: 6px;
1290+
border-bottom-right-radius: 6px;
1291+
}
1292+
1293+
.tab-content {
1294+
margin: 0px;
1295+
padding: 12px;
1296+
background-color: #252525;
1297+
border-radius: 6px;
1298+
}
1299+
12221300
.user-card {
12231301
position: relative;
12241302
min-height: 40px;

0 commit comments

Comments
 (0)