diff --git a/README.md b/README.md index b163e70..890f75f 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ bower install simpletabs ``` -A full working example is on [CodePen](http://codepen.io/romulomachado/full/rVYVqr/). +A full working example is on [CodePen](http://codepen.io/magalhaespaulo/full/MaOqpo/). ## Contributing diff --git a/dist/simpletabs.css b/dist/simpletabs.css index 785c53a..0fdb615 100644 --- a/dist/simpletabs.css +++ b/dist/simpletabs.css @@ -5,3 +5,15 @@ .content__item.is-active { display: block; } + +@media (max-width: 767px) { + .large__screen { + display: none; + } +} + +@media (min-width: 768px) { + .small__screen { + display: none; + } +} diff --git a/dist/simpletabs.js b/dist/simpletabs.js index 3f967bc..e743783 100644 --- a/dist/simpletabs.js +++ b/dist/simpletabs.js @@ -32,6 +32,17 @@ }, updateURLHash: function() { return window.location.hash = this._element.data('tab'); + }, + responsiveTab: function() { + var elements, list; + list = this._element.parent().parent(); + elements = $(list).find('li'); + return elements.each(function(i) { + var content, dataTab; + dataTab = $('[data-tab]')[i].attributes['data-tab'].nodeValue; + content = $('[data-content=\'' + dataTab + '\']')[0]; + return $(this).addClass('large__screen').clone().removeClass('large__screen').addClass('small__screen').insertBefore(content); + }); } }; }; @@ -42,10 +53,12 @@ hash = window.location.hash.replace('#', ''); tabs = new hashTabs(); tabs.element($('[data-tab=\'' + hash + '\']')); + tabs.responsiveTab(); return tabs.updateTab(); } else { tabs = new hashTabs(); tabs.element($('[data-tab]').first()); + tabs.responsiveTab(); return tabs.updateTab(updateHash = false); } }); @@ -65,4 +78,4 @@ }); } }); -}.call(this)); \ No newline at end of file +}.call(this)); diff --git a/simpletabs.coffee b/simpletabs.coffee index 2f09165..9c8b665 100644 --- a/simpletabs.coffee +++ b/simpletabs.coffee @@ -25,16 +25,26 @@ $ -> updateURLHash: -> window.location.hash = this._element.data('tab') + responsiveTab: -> + list = this._element.parent().parent(); + elements = $(list).find('li') + elements.each (i) -> + dataTab = $('[data-tab]')[i].attributes['data-tab'].nodeValue + content = $('[data-content=\'' + dataTab + '\']')[0] + $(this).addClass('large__screen').clone().removeClass('large__screen').addClass('small__screen').insertBefore(content) + if $('[data-tab]').length $(window).on 'load', -> if window.location.hash != "" hash = window.location.hash.replace("#", "") tabs = new hashTabs() tabs.element $("[data-tab='"+hash+"']") + tabs.responsiveTab() tabs.updateTab() else tabs = new hashTabs() tabs.element $("[data-tab]").first() + tabs.responsiveTab() tabs.updateTab(updateHash=false) $(window).on 'hashchange', -> @@ -47,4 +57,4 @@ $ -> tabs = new hashTabs() tabs.element $(this) tabs.updateTab() - e.preventDefault() \ No newline at end of file + e.preventDefault()