first commit
This commit is contained in:
172
libraries/easy-tabs/css/easy-responsive-tabs.css
Normal file
172
libraries/easy-tabs/css/easy-responsive-tabs.css
Normal file
@@ -0,0 +1,172 @@
|
||||
ul.resp-tabs-list, p {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.resp-tabs-list li {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
display: inline-block;
|
||||
padding: 7px 15px;
|
||||
margin: 0 0 0 0;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
opacity: 0.6;
|
||||
|
||||
}
|
||||
.resp-tabs-container {
|
||||
padding: 0px;
|
||||
clear: left;
|
||||
}
|
||||
h2.resp-accordion {
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
display: none;
|
||||
}
|
||||
.resp-tab-content {
|
||||
display: none;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.resp-tab-active {
|
||||
border: 1px solid #8691b2;
|
||||
border-bottom: none;
|
||||
margin-bottom: -1px !important;
|
||||
padding: 7px 14px !important;
|
||||
border-top: 1px solid #8691b2;
|
||||
border-bottom: 1px #fff solid;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.resp-tab-active {
|
||||
border-bottom: none;
|
||||
background-color: #fff;
|
||||
}
|
||||
.resp-content-active, .resp-accordion-active {
|
||||
display: block;
|
||||
}
|
||||
.resp-tab-content {
|
||||
border: 1px solid #8691b2;
|
||||
border-top-color: #8691b2;
|
||||
}
|
||||
h2.resp-accordion {
|
||||
font-size: 13px;
|
||||
border: 1px solid #c1c1c1;
|
||||
border-top: 0px solid #c1c1c1;
|
||||
margin: 0px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
h2.resp-tab-active {
|
||||
border-bottom: 0px solid #c1c1c1 !important;
|
||||
margin-bottom: 0px !important;
|
||||
padding: 10px 15px !important;
|
||||
}
|
||||
h2.resp-tab-title:last-child {
|
||||
border-bottom: 12px solid #c1c1c1 !important;
|
||||
background: blue;
|
||||
}
|
||||
.resp-vtabs > ul.resp-tabs-list {
|
||||
float: left;
|
||||
width: 250px;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.resp-vtabs > .resp-tabs-list li {
|
||||
display: block;
|
||||
padding: 10px 15px !important;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
float: none;
|
||||
background-color: #fff;
|
||||
}
|
||||
.resp-tabs-list li i {
|
||||
margin-right: 10px;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
.resp-vtabs > .resp-tabs-container {
|
||||
padding: 0 15px;
|
||||
background-color: #f3f4f7; /*$cHoverBackground*/
|
||||
border: 1px solid #e5e5e5;
|
||||
float: left;
|
||||
width: calc( 100% - 250px );
|
||||
min-height: 250px;
|
||||
clear: none;
|
||||
}
|
||||
.resp-vtabs .resp-tab-content {
|
||||
border: none;
|
||||
word-wrap: break-word;
|
||||
background-color: transparent;
|
||||
}
|
||||
.resp-vtabs li.resp-tab-active {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-right: -1px;
|
||||
padding: 10px 15px;
|
||||
border-top: 1px solid;
|
||||
border: 1px solid #4186da;
|
||||
border-left: 10px solid #4186da;
|
||||
margin-bottom: 0 !important;
|
||||
border-right: 1px #FFF solid;
|
||||
|
||||
}
|
||||
.resp-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
float: right;
|
||||
margin-top: 3px;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 12px solid #c1c1c1;
|
||||
}
|
||||
h2.resp-tab-active span.resp-arrow {
|
||||
border: none;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 12px solid #9B9797;
|
||||
}
|
||||
h2.resp-tab-active {
|
||||
background: #DBDBDB;
|
||||
}
|
||||
.resp-easy-accordion h2.resp-accordion {
|
||||
display: block;
|
||||
}
|
||||
.resp-easy-accordion .resp-tab-content {
|
||||
border: 1px solid #c1c1c1;
|
||||
}
|
||||
.resp-easy-accordion .resp-tab-content:last-child {
|
||||
border-bottom: 1px solid #c1c1c1;
|
||||
}
|
||||
.resp-jfit {
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
}
|
||||
.resp-tab-content-active {
|
||||
display: block;
|
||||
}
|
||||
h2.resp-accordion:first-child {
|
||||
border-top: 1px solid #c1c1c1;
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
ul.resp-tabs-list {
|
||||
display: none;
|
||||
}
|
||||
h2.resp-accordion {
|
||||
display: block;
|
||||
}
|
||||
.resp-vtabs .resp-tab-content {
|
||||
border: 1px solid #C1C1C1;
|
||||
}
|
||||
.resp-vtabs .resp-tabs-container {
|
||||
border: none;
|
||||
float: none;
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
clear: none;
|
||||
}
|
||||
.resp-accordion-closed {
|
||||
display: none !important;
|
||||
}
|
||||
.resp-vtabs .resp-tab-content:last-child {
|
||||
border-bottom: 1px solid #c1c1c1 !important;
|
||||
}
|
||||
}
|
||||
209
libraries/easy-tabs/js/easyResponsiveTabs.js
Normal file
209
libraries/easy-tabs/js/easyResponsiveTabs.js
Normal file
@@ -0,0 +1,209 @@
|
||||
// Easy Responsive Tabs Plugin
|
||||
// Author: Samson.Onna <Email : samson3d@gmail.com>
|
||||
(function ($) {
|
||||
$.fn.extend({
|
||||
easyResponsiveTabs: function (options) {
|
||||
//Set the default values, use comma to separate the settings, example:
|
||||
var defaults = {
|
||||
type: 'default', //default, vertical, accordion;
|
||||
width: 'auto',
|
||||
fit: true,
|
||||
closed: false,
|
||||
tabidentify: '',
|
||||
activetab_bg: '#f3f4f7',
|
||||
inactive_bg: '#FFF',
|
||||
active_border_color: '',
|
||||
active_content_border_color: '',
|
||||
activate: function () {
|
||||
}
|
||||
}
|
||||
//Variables
|
||||
var options = $.extend(defaults, options);
|
||||
var opt = options, jtype = opt.type, jfit = opt.fit, jwidth = opt.width, vtabs = 'vertical', accord = 'accordion';
|
||||
var hash = window.location.hash;
|
||||
var historyApi = !!(window.history && history.replaceState);
|
||||
|
||||
//Events
|
||||
$(this).bind('tabactivate', function (e, currentTab) {
|
||||
if (typeof options.activate === 'function') {
|
||||
options.activate.call(currentTab, e)
|
||||
}
|
||||
});
|
||||
|
||||
//Main function
|
||||
this.each(function () {
|
||||
var $respTabs = $(this);
|
||||
var $respTabsList = $respTabs.find('ul.resp-tabs-list.' + options.tabidentify);
|
||||
var respTabsId = $respTabs.attr('id');
|
||||
$respTabs.find('ul.resp-tabs-list.' + options.tabidentify + ' li').addClass('resp-tab-item').addClass(options.tabidentify);
|
||||
$respTabs.css({
|
||||
'display': 'block',
|
||||
'width': jwidth
|
||||
});
|
||||
|
||||
if (options.type == 'vertical')
|
||||
$respTabsList.css('margin-top', '3px');
|
||||
|
||||
$respTabs.find('.resp-tabs-container.' + options.tabidentify).css('border-color', options.active_content_border_color);
|
||||
$respTabs.find('.resp-tabs-container.' + options.tabidentify + ' > div').addClass('resp-tab-content').addClass(options.tabidentify);
|
||||
jtab_options();
|
||||
//Properties Function
|
||||
function jtab_options() {
|
||||
if (jtype == vtabs) {
|
||||
$respTabs.addClass('resp-vtabs').addClass(options.tabidentify);
|
||||
}
|
||||
if (jfit == true) {
|
||||
$respTabs.css({width: '100%', margin: '0px'});
|
||||
}
|
||||
if (jtype == accord) {
|
||||
$respTabs.addClass('resp-easy-accordion').addClass(options.tabidentify);
|
||||
$respTabs.find('.resp-tabs-list').css('display', 'none');
|
||||
}
|
||||
}
|
||||
|
||||
//Assigning the h2 markup to accordion title
|
||||
var $tabItemh2;
|
||||
$respTabs.find('.resp-tab-content.' + options.tabidentify).before("<h2 class='resp-accordion " + options.tabidentify + "' role='tab'><span class='resp-arrow'></span></h2>");
|
||||
|
||||
$respTabs.find('.resp-tab-content.' + options.tabidentify).prev("h2").css({
|
||||
//'background-color': options.inactive_bg,
|
||||
'border-color': options.active_border_color
|
||||
});
|
||||
|
||||
var itemCount = 0;
|
||||
$respTabs.find('.resp-accordion').each(function () {
|
||||
$tabItemh2 = $(this);
|
||||
var $tabItem = $respTabs.find('.resp-tab-item:eq(' + itemCount + ')');
|
||||
var $accItem = $respTabs.find('.resp-accordion:eq(' + itemCount + ')');
|
||||
$accItem.append($tabItem.html());
|
||||
$accItem.data($tabItem.data());
|
||||
$tabItemh2.attr('aria-controls', options.tabidentify + '_tab_item-' + (itemCount));
|
||||
itemCount++;
|
||||
});
|
||||
|
||||
//Assigning the 'aria-controls' to Tab items
|
||||
var count = 0,
|
||||
$tabContent;
|
||||
$respTabs.find('.resp-tab-item').each(function () {
|
||||
$tabItem = $(this);
|
||||
$tabItem.attr('aria-controls', options.tabidentify + '_tab_item-' + (count));
|
||||
$tabItem.attr('role', 'tab');
|
||||
$tabItem.css({
|
||||
//'background-color': options.inactive_bg,
|
||||
'border-color': 'none'
|
||||
});
|
||||
|
||||
//Assigning the 'aria-labelledby' attr to tab-content
|
||||
var tabcount = 0;
|
||||
$respTabs.find('.resp-tab-content.' + options.tabidentify).each(function () {
|
||||
$tabContent = $(this);
|
||||
$tabContent.attr('aria-labelledby', options.tabidentify + '_tab_item-' + (tabcount)).css({
|
||||
'border-color': options.active_border_color
|
||||
});
|
||||
tabcount++;
|
||||
});
|
||||
count++;
|
||||
});
|
||||
|
||||
// Show correct content area
|
||||
var tabNum = 0;
|
||||
if (hash != '') {
|
||||
var matches = hash.match(new RegExp(respTabsId + "([0-9]+)"));
|
||||
if (matches !== null && matches.length === 2) {
|
||||
tabNum = parseInt(matches[1], 10) - 1;
|
||||
if (tabNum > count) {
|
||||
tabNum = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Active correct tab
|
||||
$($respTabs.find('.resp-tab-item.' + options.tabidentify)[tabNum]).addClass('resp-tab-active');
|
||||
|
||||
//keep closed if option = 'closed' or option is 'accordion' and the element is in accordion mode
|
||||
if (options.closed !== true && !(options.closed === 'accordion' && !$respTabsList.is(':visible')) && !(options.closed === 'tabs' && $respTabsList.is(':visible'))) {
|
||||
$($respTabs.find('.resp-accordion.' + options.tabidentify)[tabNum]).addClass('resp-tab-active');
|
||||
|
||||
$($respTabs.find('.resp-tab-content.' + options.tabidentify)[tabNum]).addClass('resp-tab-content-active').addClass(options.tabidentify).attr('style', 'display:block');
|
||||
}
|
||||
//assign proper classes for when tabs mode is activated before making a selection in accordion mode
|
||||
else {
|
||||
// $($respTabs.find('.resp-tab-content.' + options.tabidentify)[tabNum]).addClass('resp-accordion-closed'); //removed resp-tab-content-active
|
||||
}
|
||||
|
||||
//Tab Click action function
|
||||
$respTabs.find("[role=tab]").each(function () {
|
||||
|
||||
var $currentTab = $(this);
|
||||
$currentTab.click(function () {
|
||||
|
||||
var $currentTab = $(this);
|
||||
var $tabAria = $currentTab.attr('aria-controls');
|
||||
|
||||
if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) {
|
||||
$respTabs.find('.resp-tab-content-active.' + options.tabidentify).slideUp('', function () {
|
||||
$(this).addClass('resp-accordion-closed');
|
||||
});
|
||||
$currentTab.removeClass('resp-tab-active').css({
|
||||
//'background-color': options.inactive_bg,
|
||||
'border-color': 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) {
|
||||
$respTabs.find('.resp-tab-active.' + options.tabidentify).removeClass('resp-tab-active').css({
|
||||
//'background-color': options.inactive_bg,
|
||||
'border-color': 'none'
|
||||
});
|
||||
$respTabs.find('.resp-tab-content-active.' + options.tabidentify).slideUp().removeClass('resp-tab-content-active resp-accordion-closed');
|
||||
$respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
|
||||
|
||||
$respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + '].' + options.tabidentify).slideDown().addClass('resp-tab-content-active');
|
||||
} else {
|
||||
console.log('here');
|
||||
$respTabs.find('.resp-tab-active.' + options.tabidentify).removeClass('resp-tab-active').css({
|
||||
//'background-color': options.inactive_bg,
|
||||
'border-color': 'none'
|
||||
});
|
||||
|
||||
$respTabs.find('.resp-tab-content-active.' + options.tabidentify).removeAttr('style').removeClass('resp-tab-content-active').removeClass('resp-accordion-closed');
|
||||
|
||||
$respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
|
||||
|
||||
$respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + '].' + options.tabidentify).addClass('resp-tab-content-active').attr('style', 'display:block');
|
||||
}
|
||||
//Trigger tab activation event
|
||||
$currentTab.trigger('tabactivate', $currentTab);
|
||||
|
||||
//Update Browser History
|
||||
if (historyApi) {
|
||||
var currentHash = window.location.hash;
|
||||
var tabAriaParts = $tabAria.split('tab_item-');
|
||||
// var newHash = respTabsId + (parseInt($tabAria.substring(9), 10) + 1).toString();
|
||||
var newHash = respTabsId + (parseInt(tabAriaParts[1], 10) + 1).toString();
|
||||
if (currentHash != "") {
|
||||
var re = new RegExp(respTabsId + "[0-9]+");
|
||||
if (currentHash.match(re) != null) {
|
||||
newHash = currentHash.replace(re, newHash);
|
||||
} else {
|
||||
newHash = currentHash + "|" + newHash;
|
||||
}
|
||||
} else {
|
||||
newHash = '#' + newHash;
|
||||
}
|
||||
|
||||
history.replaceState(null, null, newHash);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
//Window resize function
|
||||
$(window).resize(function () {
|
||||
$respTabs.find('.resp-accordion-closed').removeAttr('style');
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
Reference in New Issue
Block a user