1// Easy Responsive Tabs Plugin 2// Author: Samson.Onna <Email : [email protected]> 3(function ($) { 4 $.fn.extend({ 5 easyResponsiveTabs: function (options) { 6 //Set the default values, use comma to separate the settings, example: 7 var defaults = { 8 type: 'default', //default, vertical, accordion; 9 width: 'auto', 10 fit: true, 11 closed: false, 12 tabidentify: '', 13 activate: function () { 14 } 15 } 16 //Variables 17 var options = $.extend(defaults, options); 18 var opt = options, jtype = opt.type, jfit = opt.fit, jwidth = opt.width, vtabs = 'vertical', accord = 'accordion'; 19 var hash = window.location.hash; 20 var historyApi = !!(window.history && history.replaceState); 21 22 //Events 23 $(this).bind('tabactivate', function (e, currentTab) { 24 if (typeof options.activate === 'function') { 25 options.activate.call(currentTab, e) 26 } 27 }); 28 29 //Main function 30 this.each(function () { 31 var $respTabs = $(this); 32 var $respTabsList = $respTabs.find('ul.resp-tabs-list.' + options.tabidentify); 33 var respTabsId = $respTabs.attr('id'); 34 $respTabs.find('ul.resp-tabs-list.' + options.tabidentify + ' li').addClass('resp-tab-item').addClass(options.tabidentify); 35 $respTabs.css({ 36 'display': 'block', 37 'width': jwidth 38 }); 39 40 if (options.type == 'vertical') 41 $respTabsList.css('margin-top', '3px'); 42 43 $respTabs.find('.resp-tabs-container.' + options.tabidentify).css('border-color', options.active_content_border_color); 44 $respTabs.find('.resp-tabs-container.' + options.tabidentify + ' > div').addClass('resp-tab-content').addClass(options.tabidentify); 45 jtab_options(); 46 //Properties Function 47 function jtab_options() { 48 if (jtype == vtabs) { 49 $respTabs.addClass('resp-vtabs').addClass(options.tabidentify); 50 } 51 if (jfit == true) { 52 $respTabs.css({ width: '100%', margin: '0px' }); 53 } 54 if (jtype == accord) { 55 $respTabs.addClass('resp-easy-accordion').addClass(options.tabidentify); 56 $respTabs.find('.resp-tabs-list').css('display', 'none'); 57 } 58 } 59 60 //Assigning the h2 markup to accordion title 61 var $tabItemh2; 62 $respTabs.find('.resp-tab-content.' + options.tabidentify).before("<h2 class='resp-accordion " + options.tabidentify + "' role='tab'><span class='resp-arrow'></span></h2>"); 63 64 /* $respTabs.find('.resp-tab-content.' + options.tabidentify).prev("h2").css({ 65 'background-color': options.inactive_bg, 66 'border-color': options.active_border_color 67 });*/ 68 69 var itemCount = 0; 70 $respTabs.find('.resp-accordion').each(function () { 71 $tabItemh2 = $(this); 72 var $tabItem = $respTabs.find('.resp-tab-item:eq(' + itemCount + ')'); 73 var $accItem = $respTabs.find('.resp-accordion:eq(' + itemCount + ')'); 74 $accItem.append($tabItem.html()); 75 $accItem.data($tabItem.data()); 76 $tabItemh2.attr('aria-controls', options.tabidentify + '_tab_item-' + (itemCount)); 77 itemCount++; 78 }); 79 80 //Assigning the 'aria-controls' to Tab items 81 var count = 0, 82 $tabContent; 83 $respTabs.find('.resp-tab-item').each(function () { 84 $tabItem = $(this); 85 $tabItem.attr('aria-controls', options.tabidentify + '_tab_item-' + (count)); 86 $tabItem.attr('role', 'tab'); 87 $tabItem.css({ 88 'background-color': options.inactive_bg, 89 'border-color': 'none' 90 }); 91 92 //Assigning the 'aria-label' attr to tab-content 93 var tabcount = 0; 94 $respTabs.find('.resp-tab-content.' + options.tabidentify).each(function () { 95 $tabContent = $(this); 96 $tabContent.attr('aria-label', options.tabidentify + '_tab_item-' + (tabcount)).css({ 97 'border-color': options.active_border_color 98 }); 99 tabcount++; 100 }); 101 count++; 102 }); 103 104 // Show correct content area 105 var tabNum = 0; 106 if (hash != '') { 107 var matches = hash.match(new RegExp(respTabsId + "([0-9]+)")); 108 if (matches !== null && matches.length === 2) { 109 tabNum = parseInt(matches[1], 10) - 1; 110 if (tabNum > count) { 111 tabNum = 0; 112 } 113 } 114 } 115 116 //Active correct tab 117 $($respTabs.find('.resp-tab-item.' + options.tabidentify)[tabNum]).addClass('resp-tab-active').css({ 118 'background-color': 'options.activetab_bg', 119 'border-color': options.active_border_color 120 }); 121 122 //keep closed if option = 'closed' or option is 'accordion' and the element is in accordion mode 123 if (options.closed !== true && !(options.closed === 'accordion' && !$respTabsList.is(':visible')) && !(options.closed === 'tabs' && $respTabsList.is(':visible'))) { 124 $($respTabs.find('.resp-accordion.' + options.tabidentify)[tabNum]).addClass('resp-tab-active')/*.css({ 125 'background-color': 'options.activetab_bg' + ' !important', 126 'border-color': options.active_border_color, 127 'background': '#8cc1e2' 128 })*/; 129 130 $($respTabs.find('.resp-tab-content.' + options.tabidentify)[tabNum]).addClass('resp-tab-content-active').addClass(options.tabidentify).attr('style', 'display:block'); 131 } 132 //assign proper classes for when tabs mode is activated before making a selection in accordion mode 133 else { 134 // $($respTabs.find('.resp-tab-content.' + options.tabidentify)[tabNum]).addClass('resp-accordion-closed'); //removed resp-tab-content-active 135 } 136 137 //Tab Click action function 138 $respTabs.find("[role=tab]").each(function () { 139 140 var $currentTab = $(this); 141 $currentTab.click(function () { 142 143 var $currentTab = $(this); 144 var $tabAria = $currentTab.attr('aria-controls'); 145 146 if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) { 147 $respTabs.find('.resp-tab-content-active.' + options.tabidentify).slideUp('', function () { 148 $(this).addClass('resp-accordion-closed'); 149 }); 150 $currentTab.removeClass('resp-tab-active')/*.css({ 151 'background-color': options.inactive_bg, 152 'border-color': 'none', 153 'background': '#004981' 154 })*/; 155 return false; 156 } 157 if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) { 158 $respTabs.find('.resp-tab-active.' + options.tabidentify).removeClass('resp-tab-active')/*.css({ 159 'background-color': options.inactive_bg, 160 'border-color': 'none', 161 'background': '#004981' 162 })*/; 163 $respTabs.find('.resp-tab-content-active.' + options.tabidentify).slideUp().removeClass('resp-tab-content-active resp-accordion-closed'); 164 $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active')/*.css({ 165 'background-color': options.activetab_bg, 166 'border-color': options.active_border_color, 167 'background': '#8cc1e2' 168 })*/; 169 170 $respTabs.find('.resp-tab-content[aria-label = ' + $tabAria + '].' + options.tabidentify).slideDown().addClass('resp-tab-content-active'); 171 } else { 172 $respTabs.find('.resp-tab-active.' + options.tabidentify).removeClass('resp-tab-active').css({ 173 'background-color': options.inactive_bg, 174 'border-color': 'none' 175 }); 176 177 $respTabs.find('.resp-tab-content-active.' + options.tabidentify).removeAttr('style').removeClass('resp-tab-content-active').removeClass('resp-accordion-closed'); 178 179 $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active').css({ 180 'background-color': options.activetab_bg, 181 'border-color': options.active_border_color 182 }); 183 184 $respTabs.find('.resp-tab-content[aria-label = ' + $tabAria + '].' + options.tabidentify).addClass('resp-tab-content-active').attr('style', 'display:block'); 185 } 186 //Trigger tab activation event 187 $currentTab.trigger('tabactivate', $currentTab); 188 189 //Update Browser History 190 if (historyApi) { 191 var currentHash = window.location.hash; 192 var tabAriaParts = $tabAria.split('tab_item-'); 193 // var newHash = respTabsId + (parseInt($tabAria.substring(9), 10) + 1).toString(); 194 var newHash = respTabsId + (parseInt(tabAriaParts[1], 10) + 1).toString(); 195 if (currentHash != "") { 196 var re = new RegExp(respTabsId + "[0-9]+"); 197 if (currentHash.match(re) != null) { 198 newHash = currentHash.replace(re, newHash); 199 } 200 else { 201 newHash = currentHash + "|" + newHash; 202 } 203 } 204 else { 205 newHash = '#' + newHash; 206 } 207 208 history.replaceState(null, null, newHash); 209 } 210 }); 211 212 }); 213 214 //Window resize function 215 $(window).resize(function () { 216 $respTabs.find('.resp-accordion-closed').removeAttr('style'); 217 }); 218 }); 219 } 220 });
221})(jQuery); 222
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.