1// Easy Responsive Tabs Plugin 2// Author: Samson.Onna <Email : [email protected]> 3(function ($) { 4 $.fn.extend({ 5 easyResponsiveTabs: function (options) { 6 var defaults = { 7 type: 'default', 8 width: 'auto', 9 fit: true, 10 closed: false, 11 tabidentify: '', 12 activate: function () {} 13 } 14 var options = $.extend(defaults, options); 15 var opt = options, jtype = opt.type, jfit = opt.fit, jwidth = opt.width, vtabs = 'vertical', accord = 'accordion'; 16 var hash = window.location.hash; 17 var historyApi = !!(window.history && history.replaceState); 18 19 $(this).bind('tabactivate', function (e, currentTab) { 20 if (typeof options.activate === 'function') { 21 options.activate.call(currentTab, e) 22 } 23 }); 24 25 this.each(function () { 26 var $respTabs = $(this); 27 var $respTabsList = $respTabs.find('ul.resp-tabs-list.' + options.tabidentify); 28 var respTabsId = $respTabs.attr('id'); 29 $respTabs.find('ul.resp-tabs-list.' + options.tabidentify + ' li').addClass('resp-tab-item').addClass(options.tabidentify); 30 $respTabs.css({ 31 'display': 'block', 32 'width': jwidth 33 }); 34 35 if (options.type == 'vertical') 36 $respTabsList.css('margin-top', '3px'); 37 38 $respTabs.find('.resp-tabs-container.' + options.tabidentify).css('border-color', options.active_content_border_color); 39 $respTabs.find('.resp-tabs-container.' + options.tabidentify + ' > div').addClass('resp-tab-content').addClass(options.tabidentify); 40 jtab_options(); 41 42 function jtab_options() { 43 if (jtype == vtabs) { 44 $respTabs.addClass('resp-vtabs').addClass(options.tabidentify); 45 } 46 if (jfit == true) { 47 $respTabs.css({ width: '100%', margin: '0px' }); 48 } 49 if (jtype == accord) { 50 $respTabs.addClass('resp-easy-accordion').addClass(options.tabidentify); 51 $respTabs.find('.resp-tabs-list').css('display', 'none'); 52 } 53 } 54 55 var $tabItemh2; 56 $respTabs.find('.resp-tab-content.' + options.tabidentify).before("<h2 class='resp-accordion " + options.tabidentify + "' role='tab'><span class='resp-arrow'></span></h2>"); 57 58 var itemCount = 0; 59 $respTabs.find('.resp-accordion').each(function () { 60 $tabItemh2 = $(this); 61 var $tabItem = $respTabs.find('.resp-tab-item:eq(' + itemCount + ')'); 62 var $accItem = $respTabs.find('.resp-accordion:eq(' + itemCount + ')'); 63 $accItem.append($tabItem.html()); 64 $accItem.data($tabItem.data()); 65 66 // FIX 1: ADDING THE ID HERE STOPS THE BROKEN ARIA ERROR 67 $tabItemh2.attr('id', options.tabidentify + '_tab_item-' + (itemCount)); 68 69 $tabItemh2.attr('aria-controls', options.tabidentify + '_tab_item-' + (itemCount)); 70 itemCount++; 71 }); 72 73 var count = 0, $tabContent; 74 $respTabs.find('.resp-tab-item').each(function () { 75 $tabItem = $(this); 76 77 // FIX 2: ADDING THE ID HERE SO ARIA-LABELLEDBY HAS A TARGET 78 $tabItem.attr('id', options.tabidentify + '_tab_item-' + (count)); 79 80 $tabItem.attr('aria-controls', options.tabidentify + '_tab_item-' + (count)); 81 $tabItem.attr('role', 'tab'); 82 $tabItem.css({ 83 'background-color': options.inactive_bg, 84 'border-color': 'none' 85 }); 86 87 var tabcount = 0; 88 $respTabs.find('.resp-tab-content.' + options.tabidentify).each(function () { 89 $tabContent = $(this); 90 91 // FIX 3: RESTORE THIS LINE (IT LINKS CONTENT TO THE TABS) 92 $tabContent.attr('aria-labelledby', options.tabidentify + '_tab_item-' + (tabcount)).css({ 93 'border-color': options.active_border_color 94 }); 95 96 tabcount++; 97 }); 98 count++; 99 }); 100 101 var tabNum = 0; 102 if (hash != '') { 103 var matches = hash.match(new RegExp(respTabsId + "([0-9]+)")); 104 if (matches !== null && matches.length === 2) { 105 tabNum = parseInt(matches[1], 10) - 1; 106 if (tabNum > count) { 107 tabNum = 0; 108 } 109 } 110 } 111 112 $($respTabs.find('.resp-tab-item.' + options.tabidentify)[tabNum]).addClass('resp-tab-active').css({ 113 'background-color': 'options.activetab_bg', 114 'border-color': options.active_border_color 115 }); 116 117 if (options.closed !== true && !(options.closed === 'accordion' && !$respTabsList.is(':visible')) && !(options.closed === 'tabs' && $respTabsList.is(':visible'))) { 118 $($respTabs.find('.resp-accordion.' + options.tabidentify)[tabNum]).addClass('resp-tab-active'); 119 $($respTabs.find('.resp-tab-content.' + options.tabidentify)[tabNum]).addClass('resp-tab-content-active').addClass(options.tabidentify).attr('style', 'display:block'); 120 } 121 122 $respTabs.find("[role=tab]").each(function () { 123 var $currentTab = $(this); 124 $currentTab.click(function () { 125 var $currentTab = $(this); 126 var $tabAria = $currentTab.attr('aria-controls'); 127 128 if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) { 129 $respTabs.find('.resp-tab-content-active.' + options.tabidentify).slideUp('', function () { 130 $(this).addClass('resp-accordion-closed'); 131 }); 132 $currentTab.removeClass('resp-tab-active'); 133 return false; 134 } 135 if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) { 136 $respTabs.find('.resp-tab-active.' + options.tabidentify).removeClass('resp-tab-active'); 137 $respTabs.find('.resp-tab-content-active.' + options.tabidentify).slideUp().removeClass('resp-tab-content-active resp-accordion-closed'); 138 $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active'); 139 $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + '].' + options.tabidentify).slideDown().addClass('resp-tab-content-active'); 140 } else { 141 $respTabs.find('.resp-tab-active.' + options.tabidentify).removeClass('resp-tab-active').css({ 142 'background-color': options.inactive_bg, 143 'border-color': 'none' 144 }); 145 $respTabs.find('.resp-tab-content-active.' + options.tabidentify).removeAttr('style').removeClass('resp-tab-content-active').removeClass('resp-accordion-closed'); 146 $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active').css({ 147 'background-color': options.activetab_bg, 148 'border-color': options.active_border_color 149 }); 150 $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + '].' + options.tabidentify).addClass('resp-tab-content-active').attr('style', 'display:block'); 151 } 152 $currentTab.trigger('tabactivate', $currentTab); 153 154 if (historyApi) { 155 var currentHash = window.location.hash; 156 var tabAriaParts = $tabAria.split('tab_item-'); 157 var currentId = $currentTab.attr('id'); 158 var newHash = currentId; 159 if (currentHash != "") { 160 newHash = currentHash.replace(currentHash, '#' + newHash); 161 } else { 162 newHash = '#' + newHash; 163 } 164 history.replaceState(null, null, newHash); 165 } 166 }); 167 }); 168 169 $(window).resize(function () { 170 $respTabs.find('.resp-accordion-closed').removeAttr('style'); 171 }); 172 }); 173 } 174 });
175})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.