Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@jellekralt
jellekralt committed Jul 28, 2013
0 parents commit 855b961
Show file tree
Hide file tree
Showing 7 changed files with 381 additions and 0 deletions.
2 changes: 2 additions & 0 deletions AUTHOR.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
Author: Jelle Kralt <[email protected]>
Date: 2013-07-27
21 changes: 21 additions & 0 deletions MIT-license
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
Copyright (c) 2013, Jelle Kralt
http://www.jellekralt.nl

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
34 changes: 34 additions & 0 deletions css/responsive-tabs.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
.r-tabs .r-tabs-nav {
margin: 0;
padding: 0;
}

.r-tabs .r-tabs-tab {
display: inline-block;
margin: 0;
list-style: none;
}

.r-tabs .r-tabs-panel {
padding: 15px;
display: none;
}

.r-tabs .r-tabs-accordion-title {
display: none;
}

.r-tabs .r-tabs-panel.r-tabs-state-active {
display: block;
}

/* Accordion responsive breakpoint */
@media only screen and (max-width: 768px) {
.r-tabs .r-tabs-nav {
display: none;
}

.r-tabs .r-tabs-accordion-title {
display: block;
}
}
66 changes: 66 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
body {
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 12px;
}

.r-tabs {
position: relative;
}

.r-tabs .r-tabs-nav {
border-bottom: 1px solid #ccc;
}

.r-tabs .r-tabs-nav .r-tabs-tab {
position: relative;
top: 1px;
}

.r-tabs .r-tabs-nav .r-tabs-anchor {
background: #00aadd;
margin-bottom: 3px;
padding: 10px 12px;
display: inline-block;
text-decoration: none;
color: #fff;
font-weight: bold;
}

.r-tabs .r-tabs-nav .r-tabs-state-active {
background-color: #fff;
margin-bottom: -1px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}

.r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {
color: #00aadd;
background-color: #fff;
}

.r-tabs .r-tabs-panel {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
margin-bottom: 3px;
}

.r-tabs .r-tabs-accordion-title .r-tabs-anchor {
display: block;
padding: 10px;
background-color: #00aadd;
color: #fff;
font-weight: bold;
text-decoration: none;
margin-bottom: 3px;
}

.r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor {
background-color: #fff;
color: #00aadd;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
margin-bottom: 0;
}
45 changes: 45 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>jQuery Responsive Tabs</title>
<link type="text/css" rel="stylesheet" href="css/responsive-tabs.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/jquery.responsiveTabs.js" type="text/javascript"></script>
</head>
<body>


<!--Horizontal Tab-->
<div id="horizontalTab">
<ul>
<li><a href="#tab-1">Responsive Tab-1</a></li>
<li><a href="#tab-2">Responsive Tab-2</a></li>
<li><a href="#tab-3">Responsive Tab-3</a></li>
</ul>
<div>
<div id="tab-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu scelerisque eros. Fusce ante orci, hendrerit sit amet metus sit amet, venenatis sodales felis. Morbi vel mi in leo dignissim convallis in a neque. Suspendisse sollicitudin nibh non dapibus condimentum. Etiam sit amet arcu ultricies, porttitor justo eget, scelerisque urna. Praesent non ligula nec ligula euismod condimentum eget sed augue. Ut feugiat, turpis id sollicitudin vestibulum, tellus massa adipiscing nisl, quis cursus nisl arcu vel ipsum.</p>
</div>
<div id="tab-2">
<p>Quisque sodales sodales lacus pharetra bibendum. Etiam commodo non velit ac rhoncus. Mauris euismod purus sem, ac adipiscing quam laoreet et. Praesent vulputate ornare sem vel scelerisque. Ut dictum augue non erat lacinia, sed lobortis elit gravida. Proin ante massa, ornare accumsan ultricies et, posuere sit amet magna. Praesent dignissim, enim sed malesuada luctus, arcu sapien sodales sapien, ut placerat eros nunc vel est. Donec tristique mi turpis, et sodales nibh gravida eu. Etiam odio risus, porttitor non lacus id, rhoncus tempus tortor. Curabitur tincidunt molestie turpis, ut luctus nibh sollicitudin vel. Sed vel luctus nisi, at mattis metus. Aenean ultricies dolor est, a congue ante dapibus varius. Nulla at auctor nunc. Curabitur accumsan feugiat felis ut pretium. Praesent semper semper nisi, eu cursus augue.</p>
</div>
<div id="tab-3">
<p>Mauris facilisis elit ut sem eleifend accumsan molestie sit amet dolor. Pellentesque dapibus arcu eu lorem laoreet, vitae cursus metus mattis. Nullam eget porta enim, eu rutrum magna. Duis quis tincidunt sem, sit amet faucibus magna. Integer commodo, turpis consequat fermentum egestas, leo odio posuere dui, elementum placerat eros erat id augue. Nullam at eros eget urna vestibulum malesuada vitae eu mauris. Aliquam interdum rhoncus velit, quis scelerisque leo viverra non. Suspendisse id feugiat dui. Nulla in aliquet leo. Proin vel magna sed est gravida rhoncus. Mauris lobortis condimentum nibh, vitae bibendum tortor vehicula ac. Curabitur posuere arcu eros.</p>
</div>
</div>
</div>

<script type="text/javascript">
$(document).ready(function () {
$('#horizontalTab').responsiveTabs({
closed: 'accordion',
toggle: true
});
});
</script>
</body>
</html>
6 changes: 6 additions & 0 deletions js/jquery-2.0.3.min.js

Large diffs are not rendered by default.

207 changes: 207 additions & 0 deletions js/jquery.responsiveTabs.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
/*
* Project: responsiveTabs.js
* Description: A plugin that creates responsive tabs, optimized for all devices
* Author: Jelle Kralt ([email protected])
* License: MIT
*/

;(function ( $, window, undefined ) {

// Defaults
var defaults = {
closed: false,
toggle: false,
activate: function(){},
deactivate: function(){},
load: function(){},
activateState: function(){},
classes: {
stateDefault: 'r-tabs-state-default',
stateActive: 'r-tabs-state-active',
tab: 'r-tabs-tab',
anchor: 'r-tabs-anchor',
panel: 'r-tabs-panel',
accordionTitle: 'r-tabs-accordion-title'
}
};


// The actual plugin constructor
function ResponsiveTabs(element, options) {
this.element = element;
this.$element = $(element);

this.tabs = [];
this.state = '';

// Extend the defaults with the passed options
this.options = $.extend( {}, defaults, options);

this.init();
}

ResponsiveTabs.prototype.init = function () {
var o = this;

// Load all the elements
this.tabs = this.loadElements();
this.loadClasses();
this.loadEvents();

// Window resize bind to check state
$(window).bind('resize', function(e) {
o.setState(e);
});

// Events
this.$element.bind('tabs-activate', function(e) {
o.options.activate.call(this, e);
});
this.$element.bind('tabs-deactivate', function(e) {
o.options.deactivate.call(this, e);
});
this.$element.bind('tabs-load', function(e) {
var firstTab = o.getTab(0);
o.openTab(e, firstTab); // Open first tab
o.setState(e); // Set state
o.options.load.call(this, e, firstTab); // Call the load callback
});
// Trigger loaded event
this.$element.trigger('tabs-load');
};

ResponsiveTabs.prototype.loadElements = function() {
var $ul = $('ul', this.$element);
var tabs = [];

// Add classes
this.$element.addClass('r-tabs');
$ul.addClass('r-tabs-nav');

// Get tab buttons
$('li', $ul).each(function() {
var $tab = $(this);
var $anchor = $('a', $tab);
var panelSelector = $anchor[0].getAttribute('href');
var $panel = $(panelSelector);
var $accordionTab = $('<div></div>').insertBefore($panel);
var $accordionAnchor = $('<a></a>').attr('href', panelSelector).html($anchor.html()).appendTo($accordionTab);
var oTab = {
tab: $(this),
anchor: $('a', $tab),
panel: $panel,
accordionTab: $accordionTab,
accordionAnchor: $accordionAnchor,
active: false
};
// Add to tab array
tabs.push(oTab);
});
return tabs;
};

ResponsiveTabs.prototype.loadClasses = function() {
for (var i=0; i<this.tabs.length; i++) {
this.tabs[i].tab.addClass(this.options.classes.stateDefault).addClass(this.options.classes.tab);
this.tabs[i].anchor.addClass(this.options.classes.anchor);
this.tabs[i].panel.addClass(this.options.classes.stateDefault).addClass(this.options.classes.panel);
this.tabs[i].accordionTab.addClass(this.options.classes.accordionTitle);
this.tabs[i].accordionAnchor.addClass(this.options.classes.anchor);
}
};

ResponsiveTabs.prototype.loadEvents = function() {
var o = this;
var fClick = function(e) {
var current = o.getCurrentTab();

e.preventDefault();

o.closeTab(e, current);
if(o.options.toggle === false || (o.options.toggle && current !== e.data.tab)) {
o.openTab(e, e.data.tab);
}
};

// Loop tabs
for (var i=0; i<this.tabs.length; i++) {
this.tabs[i].anchor.on('click', {tab: o.tabs[i]}, fClick);
this.tabs[i].accordionAnchor.on('click', {tab: o.tabs[i]}, fClick);
}
};


ResponsiveTabs.prototype.setState = function(e) {
var $ul = $('ul', this.$element);
var oldState = this.state;

if($ul.is(':visible')){
this.state = 'tabs';
} else {
this.state = 'accordion';
}

if(this.state !== oldState) {
this.$element.trigger('tabs-activate-state', e, {oldState: oldState, newState: this.state});
}
};

ResponsiveTabs.prototype.openTab = function(e, oTab) {
oTab.active = true;
oTab.tab.removeClass(this.options.classes.stateDefault).addClass(this.options.classes.stateActive);
oTab.panel.removeClass(this.options.classes.stateDefault).addClass(this.options.classes.stateActive);
oTab.accordionTab.removeClass(this.options.classes.stateDefault).addClass(this.options.classes.stateActive);

this.$element.trigger('tabs-activate', e, oTab);
};

ResponsiveTabs.prototype.closeTab = function(e, oTab) {
if(oTab !== undefined) {
oTab.active = false;
oTab.tab.removeClass(this.options.classes.stateActive).addClass(this.options.classes.stateDefault);
oTab.panel.removeClass(this.options.classes.stateActive).addClass(this.options.classes.stateDefault);
oTab.accordionTab.removeClass(this.options.classes.stateActive).addClass(this.options.classes.stateDefault);

this.$element.trigger('tabs-deactivate', e, oTab);
}
};

ResponsiveTabs.prototype.getTab = function(numRef) {
return this.tabs[numRef];
};

ResponsiveTabs.prototype.getCurrentTab = function() {
for (var i=0; i<this.tabs.length; i++) {
if(this.tabs[i].active) {
return this.tabs[i];
}
}
};

// Plugin wrapper
$.fn.responsiveTabs = function ( options ) {
var args = arguments;
if (options === undefined || typeof options === 'object') {
return this.each(function () {
if (!$.data(this, 'responsivetabs')) {
$.data(this, 'responsivetabs', new ResponsiveTabs( this, options ));
}
});
} else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
return this.each(function () {
var instance = $.data(this, 'responsivetabs');

if (instance instanceof ResponsiveTabs && typeof instance[options] === 'function') {
instance[options].apply( instance, Array.prototype.slice.call( args, 1 ) );
}

// Allow instances to be destroyed via the 'destroy' method
if (options === 'destroy') {
// TODO: destroy instance classes, etc
$.data(this, 'responsivetabs', null);
}
});
}
};

}(jQuery, window));

0 comments on commit 855b961

Please sign in to comment.