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