Lonely-boy (Talk | contribs) (Created page with "(function ($) { $.fn.extend({ easyResponsiveTabs: function (options) { var defaults = { type: 'default',...") |
Lonely-boy (Talk | contribs) |
||
(9 intermediate revisions by the same user not shown) | |||
Line 2: | Line 2: | ||
$.fn.extend({ | $.fn.extend({ | ||
easyResponsiveTabs: function (options) { | easyResponsiveTabs: function (options) { | ||
− | |||
var defaults = { | var defaults = { | ||
− | type: 'default', | + | type: 'default', |
width: 'auto', | width: 'auto', | ||
fit: true | fit: true | ||
} | } | ||
− | + | var options = $.extend(defaults, options); | |
− | var options = $.extend(defaults, options); | + | var opt = options, |
− | var opt = options, jtype = opt.type, jfit = opt.fit, jwidth = opt.width, vtabs = 'vertical', accord = 'accordion'; | + | jtype = opt.type, |
− | + | jfit = opt.fit, | |
− | + | jwidth = opt.width, | |
+ | vtabs = 'vertical', | ||
+ | accord = 'accordion'; | ||
this.each(function () { | this.each(function () { | ||
var $respTabs = $(this); | var $respTabs = $(this); | ||
Line 20: | Line 21: | ||
'width': jwidth | 'width': jwidth | ||
}); | }); | ||
− | |||
$respTabs.find('.resp-tabs-container > div').addClass('resp-tab-content'); | $respTabs.find('.resp-tabs-container > div').addClass('resp-tab-content'); | ||
jtab_options(); | jtab_options(); | ||
− | + | ||
function jtab_options() { | function jtab_options() { | ||
if (jtype == vtabs) { | if (jtype == vtabs) { | ||
Line 29: | Line 29: | ||
} | } | ||
if (jfit == true) { | if (jfit == true) { | ||
− | $respTabs.css({ width: '100%', margin: '0px' }); | + | $respTabs.css({ |
+ | width: '100%', | ||
+ | margin: '0px' | ||
+ | }); | ||
} | } | ||
if (jtype == accord) { | if (jtype == accord) { | ||
Line 36: | Line 39: | ||
} | } | ||
} | } | ||
− | |||
− | |||
var $tabItemh2; | var $tabItemh2; | ||
$respTabs.find('.resp-tab-content').before("<h2 class='resp-accordion' role='tab'><span class='resp-arrow'></span></h2>"); | $respTabs.find('.resp-tab-content').before("<h2 class='resp-accordion' role='tab'><span class='resp-arrow'></span></h2>"); | ||
− | |||
var itemCount = 0; | var itemCount = 0; | ||
$respTabs.find('.resp-accordion').each(function () { | $respTabs.find('.resp-accordion').each(function () { | ||
Line 49: | Line 49: | ||
itemCount++; | itemCount++; | ||
}); | }); | ||
− | |||
− | |||
var count = 0, | var count = 0, | ||
$tabContent; | $tabContent; | ||
Line 57: | Line 55: | ||
$tabItem.attr('aria-controls', 'tab_item-' + (count)); | $tabItem.attr('aria-controls', 'tab_item-' + (count)); | ||
$tabItem.attr('role', 'tab'); | $tabItem.attr('role', 'tab'); | ||
− | |||
− | |||
$respTabs.find('.resp-tab-item').first().addClass('resp-tab-active'); | $respTabs.find('.resp-tab-item').first().addClass('resp-tab-active'); | ||
$respTabs.find('.resp-accordion').first().addClass('resp-tab-active'); | $respTabs.find('.resp-accordion').first().addClass('resp-tab-active'); | ||
$respTabs.find('.resp-tab-content').first().addClass('resp-tab-content-active').attr('style', 'display:block'); | $respTabs.find('.resp-tab-content').first().addClass('resp-tab-content-active').attr('style', 'display:block'); | ||
− | |||
− | |||
var tabcount = 0; | var tabcount = 0; | ||
$respTabs.find('.resp-tab-content').each(function () { | $respTabs.find('.resp-tab-content').each(function () { | ||
Line 72: | Line 66: | ||
count++; | count++; | ||
}); | }); | ||
− | |||
− | |||
$respTabs.find("[role=tab]").each(function () { | $respTabs.find("[role=tab]").each(function () { | ||
var $currentTab = $(this); | var $currentTab = $(this); | ||
$currentTab.click(function () { | $currentTab.click(function () { | ||
− | |||
var $tabAria = $currentTab.attr('aria-controls'); | var $tabAria = $currentTab.attr('aria-controls'); | ||
− | |||
if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) { | if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) { | ||
− | $respTabs.find('.resp-tab-content-active').slideUp('', function () { $(this).addClass('resp-accordion-closed'); }); | + | $respTabs.find('.resp-tab-content-active').slideUp('', function () { |
+ | $(this).addClass('resp-accordion-closed'); | ||
+ | }); | ||
$currentTab.removeClass('resp-tab-active'); | $currentTab.removeClass('resp-tab-active'); | ||
return false; | return false; | ||
Line 89: | Line 81: | ||
$respTabs.find('.resp-tab-content-active').slideUp().removeClass('resp-tab-content-active resp-accordion-closed'); | $respTabs.find('.resp-tab-content-active').slideUp().removeClass('resp-tab-content-active resp-accordion-closed'); | ||
$respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active'); | $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active'); | ||
− | |||
$respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').slideDown().addClass('resp-tab-content-active'); | $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').slideDown().addClass('resp-tab-content-active'); | ||
} else { | } else { | ||
Line 98: | Line 89: | ||
} | } | ||
}); | }); | ||
− | |||
$(window).resize(function () { | $(window).resize(function () { | ||
$respTabs.find('.resp-accordion-closed').removeAttr('style'); | $respTabs.find('.resp-accordion-closed').removeAttr('style'); |
Latest revision as of 08:31, 19 October 2019
(function ($) {
$.fn.extend({ easyResponsiveTabs: function (options) { var defaults = { type: 'default', width: 'auto', fit: true } var options = $.extend(defaults, options); var opt = options, jtype = opt.type, jfit = opt.fit, jwidth = opt.width, vtabs = 'vertical', accord = 'accordion'; this.each(function () { var $respTabs = $(this); $respTabs.find('ul.resp-tabs-list li').addClass('resp-tab-item'); $respTabs.css({ 'display': 'block', 'width': jwidth }); $respTabs.find('.resp-tabs-container > div').addClass('resp-tab-content'); jtab_options();
function jtab_options() { if (jtype == vtabs) { $respTabs.addClass('resp-vtabs'); } if (jfit == true) { $respTabs.css({ width: '100%', margin: '0px' }); } if (jtype == accord) { $respTabs.addClass('resp-easy-accordion'); $respTabs.find('.resp-tabs-list').css('display', 'none'); } } var $tabItemh2;$respTabs.find('.resp-tab-content').before("
");
var itemCount = 0; $respTabs.find('.resp-accordion').each(function () { $tabItemh2 = $(this); var innertext = $respTabs.find('.resp-tab-item:eq(' + itemCount + ')').text(); $respTabs.find('.resp-accordion:eq(' + itemCount + ')').append(innertext); $tabItemh2.attr('aria-controls', 'tab_item-' + (itemCount)); itemCount++; }); var count = 0, $tabContent; $respTabs.find('.resp-tab-item').each(function () { $tabItem = $(this); $tabItem.attr('aria-controls', 'tab_item-' + (count)); $tabItem.attr('role', 'tab'); $respTabs.find('.resp-tab-item').first().addClass('resp-tab-active'); $respTabs.find('.resp-accordion').first().addClass('resp-tab-active'); $respTabs.find('.resp-tab-content').first().addClass('resp-tab-content-active').attr('style', 'display:block'); var tabcount = 0; $respTabs.find('.resp-tab-content').each(function () { $tabContent = $(this); $tabContent.attr('aria-labelledby', 'tab_item-' + (tabcount)); tabcount++; }); count++; }); $respTabs.find("[role=tab]").each(function () { var $currentTab = $(this); $currentTab.click(function () { var $tabAria = $currentTab.attr('aria-controls'); if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) { $respTabs.find('.resp-tab-content-active').slideUp(, function () { $(this).addClass('resp-accordion-closed'); }); $currentTab.removeClass('resp-tab-active'); return false; } if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) { $respTabs.find('.resp-tab-active').removeClass('resp-tab-active'); $respTabs.find('.resp-tab-content-active').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 + ']').slideDown().addClass('resp-tab-content-active'); } else { $respTabs.find('.resp-tab-active').removeClass('resp-tab-active'); $respTabs.find('.resp-tab-content-active').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 + ']').addClass('resp-tab-content-active').attr('style', 'display:block'); } }); $(window).resize(function () { $respTabs.find('.resp-accordion-closed').removeAttr('style'); }); }); }); } });
})(jQuery);