├── dist ├── simpletabs.css └── simpletabs.js ├── bower.json ├── LICENSE ├── simpletabs.coffee └── README.md /dist/simpletabs.css: -------------------------------------------------------------------------------- 1 | .content__item { 2 | display: none; 3 | } 4 | 5 | .content__item.is-active { 6 | display: block; 7 | } 8 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simpletabs", 3 | "version": "0.0.5", 4 | "main": "dist/simpletabs.js", 5 | "dependencies": { 6 | "jquery": ">= 1.8.0" 7 | }, 8 | "authors": [ 9 | "Rômulo Machado " 10 | ], 11 | "description": "A simple tabs component.", 12 | "keywords": [ 13 | "tabs" 14 | ], 15 | "license": "MIT", 16 | "homepage": "http://github.com/romulomachado/simpletabs", 17 | "ignore": [ 18 | "**/.*", 19 | "node_modules", 20 | "bower_components", 21 | "test", 22 | "tests" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Rômulo Machado 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /simpletabs.coffee: -------------------------------------------------------------------------------- 1 | $ -> 2 | hashTabs = -> 3 | _element: "" 4 | 5 | element: (element) -> 6 | this._element = element 7 | 8 | updateTab: -> 9 | this.updateTabLink() 10 | this.updateTabContainer() 11 | $('body').scrollTop(0) 12 | 13 | updateTabLink: -> 14 | this._element.parent().addClass('is-active').siblings('.is-active').removeClass('is-active') 15 | 16 | updateTabContainer: -> 17 | dataTab = this._element.data('tab') 18 | contentTab = $("[data-content='" + dataTab + "']") 19 | $('[data-content]').not(contentTab).removeClass('is-active') 20 | contentTab.each -> 21 | $(this).addClass('is-active') 22 | 23 | updateURLHash: -> 24 | window.location.hash = this._element.data('tab') 25 | 26 | if $('[data-tab]').length 27 | $(window).on 'load', -> 28 | if window.location.hash != "" 29 | hash = window.location.hash.replace("#", "") 30 | tabs = new hashTabs() 31 | tabs.element $("[data-tab='"+hash+"']") 32 | tabs.updateTab() 33 | else 34 | tabs = new hashTabs() 35 | tabs.element $("[data-tab]").first() 36 | tabs.updateTab() 37 | 38 | $(window).on 'hashchange', -> 39 | hash = window.location.hash.replace("#", "") 40 | tabs = new hashTabs() 41 | tabs.element $("[data-tab='"+hash+"']") 42 | tabs.updateTab() 43 | 44 | $('[data-tab]').on 'click', (e) -> 45 | tabs = new hashTabs() 46 | tabs.element $(this) 47 | tabs.updateURLHash() 48 | e.preventDefault() 49 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 |
5 | 6 | It is a tabs component and it is simple. 7 | 8 | ## Install 9 | 10 | Using [Bower](http://bower.io): 11 | 12 | ```bash 13 | bower install simpletabs 14 | ``` 15 | 16 | ## Usage 17 | 18 | ```html 19 | 20 | 21 | 22 | 23 | 29 | 30 |
31 |
32 |

Tab 1

33 | ... 34 |
35 | 36 | 37 |
38 |
39 | 40 |
41 |

Tab 2

42 | ... 43 |
44 |
45 | 46 | 47 | ``` 48 | 49 | A full working example is on [CodePen](http://codepen.io/romulomachado/full/rVYVqr/). 50 | 51 | ## Contributing 52 | 53 | If you'd like to contribute a feature or bugfix: Thanks! To make sure your fix/feature has a high chance of being included, please read the following guidelines: 54 | 55 | 1. Fork it ( https://github.com/romulomachado/simpletabs/fork ) 56 | 2. Create your feature branch (`git checkout -b my-new-feature`) 57 | 3. Commit your changes (`git commit -am 'Add some feature'`) 58 | 4. Push to the branch (`git push origin my-new-feature`) 59 | 5. Create a new Pull Request 60 | 61 | Thank you to all [the contributors](https://github.com/romulomachado/simpletabs/contributors)! 62 | -------------------------------------------------------------------------------- /dist/simpletabs.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | $(function() { 3 | var hashTabs; 4 | hashTabs = function() { 5 | return { 6 | _element: '', 7 | element: function(element) { 8 | return this._element = element; 9 | }, 10 | updateTab: function() { 11 | this.updateTabLink(); 12 | this.updateTabContainer(); 13 | $('body').scrollTop(0); 14 | }, 15 | updateTabLink: function() { 16 | return this._element.parent().addClass('is-active').siblings('.is-active').removeClass('is-active'); 17 | }, 18 | updateTabContainer: function() { 19 | var content, dataTab; 20 | dataTab = this._element.data('tab'); 21 | content = $('[data-content=\'' + dataTab + '\']'); 22 | $('[data-content]').not('[data-content="' + dataTab + '"]').removeClass('is-active'); 23 | return content.each(function() { 24 | return $(this).addClass('is-active'); 25 | }); 26 | }, 27 | updateURLHash: function() { 28 | return window.location.hash = this._element.data('tab'); 29 | } 30 | }; 31 | }; 32 | if ($('[data-tab]').length) { 33 | $(window).on('load', function() { 34 | var hash, tabs; 35 | if (window.location.hash !== '') { 36 | hash = window.location.hash.replace('#', ''); 37 | tabs = new hashTabs(); 38 | tabs.element($('[data-tab=\'' + hash + '\']')); 39 | return tabs.updateTab(); 40 | } else { 41 | tabs = new hashTabs(); 42 | tabs.element($('[data-tab]').first()); 43 | return tabs.updateTab(); 44 | } 45 | }); 46 | $(window).on('hashchange', function() { 47 | var hash, tabs; 48 | hash = window.location.hash.replace('#', ''); 49 | tabs = new hashTabs(); 50 | tabs.element($('[data-tab=\'' + hash + '\']')); 51 | return tabs.updateTab(); 52 | }); 53 | return $('[data-tab]').on('click', function(e) { 54 | var tabs; 55 | tabs = new hashTabs(); 56 | tabs.element($(this)); 57 | tabs.updateURLHash(); 58 | return e.preventDefault(); 59 | }); 60 | } 61 | }); 62 | }.call(this)); 63 | --------------------------------------------------------------------------------