diff --git a/_layouts/default.html b/_layouts/default.html index 0c8a6733ce..eb7bc27c4d 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -36,6 +36,7 @@ + diff --git a/_sass/_tabs.scss b/_sass/_tabs.scss new file mode 100644 index 0000000000..987f4cb413 --- /dev/null +++ b/_sass/_tabs.scss @@ -0,0 +1,33 @@ +// Tabs (e.g. in Getting Started, to select which OS to use for instruction) + +$tab-accent-color: $brand-color; + +ul.tabs__top-bar { + margin: 0; + padding: 0; + list-style: none; +} + +ul.tabs__top-bar li { + background: none; + color: $grey-color; + display: inline-block; + padding: 10px 15px; + cursor: pointer; +} + +ul.tabs__top-bar li.current{ + background: $tab-accent-color; + color: $background-color; +} + +.tabs__content{ + display: none; + border: 2px solid $tab-accent-color; + padding: 15px; + margin-bottom: 15px; +} + +.tabs__content.current{ + display: inherit; +} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 741b759c8c..d79967f47e 100755 --- a/css/main.scss +++ b/css/main.scss @@ -61,7 +61,8 @@ $on-laptop: 800px; "code_pre", "catalog", "homepage", - "responsive_embeds" + "responsive_embeds", + "tabs" ; aside > :not(pre) > code[class*="language-"], aside > pre[class*="language-"] { diff --git a/js/tabs.js b/js/tabs.js new file mode 100644 index 0000000000..e1a58721b3 --- /dev/null +++ b/js/tabs.js @@ -0,0 +1,38 @@ +function setupTabs() { + var tabs = $('.tabs__top-bar li'); + var tabContents = $('.tabs__content'); + + function clearTabsCurrent() { + tabs.removeClass('current'); + tabContents.removeClass('current'); + } + + tabs.click(function () { + clearTabsCurrent(); + + var tab_id = $(this).attr('data-tab'); + + $(this).addClass('current'); + $("#" + tab_id).addClass('current'); + }); + + // The following selects the correct default tab in /guides/get-started + function selectOperatingSystemInTabs(osName) { + clearTabsCurrent(); + + $("li[data-tab='tab-sdk-install-" + osName + "']").addClass('current'); + $('#tab-sdk-install-' + osName).addClass('current'); + } + + if (window.navigator.userAgent.indexOf("Mac") != -1) { + selectOperatingSystemInTabs('mac'); + } else if (window.navigator.userAgent.indexOf("Linux") != -1 && + window.navigator.userAgent.indexOf("Android") == -1) { + // Doesn't auto-select the Linux tab when on Android. + selectOperatingSystemInTabs('linux'); + } +} + +$(document).ready(function () { + setupTabs(); +}); \ No newline at end of file diff --git a/tab-testing.md b/tab-testing.md new file mode 100644 index 0000000000..662981d4c7 --- /dev/null +++ b/tab-testing.md @@ -0,0 +1,45 @@ +--- +layout: page +title: Tab Testing +permalink: /tabs/ +--- + +This is a tab testing page; let's give js tabs shot: + +## Thar be Tab here + +Tabs below + + + +
+This is where Windows install instructions live +
+ +
+This is where Linux install instructions live +
+ +
+This is where Mac install instructions live +
+ +End of tabs + + +## Which JSON serialization method is right for me? + +This article covers two general strategies for working with JSON: + +* Manual serialization and deserialization +* Automated serialization and deserialization via code generation + +Different projects come with different complexities and use cases. For smaller +proof-of-concept projects or quick prototypes, using code generators might be +overkill. For apps with several JSON models with more complexity, doing +serialization by hand can quickly become tedious, repetitive and lend itself to +lots of small errors.