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 activate: function(){} 13 } 14 //Variables 15 var options = $.extend(defaults, options); 16 var opt = options, jtype = opt.type, jfit = opt.fit, jwidth = opt.width, vtabs = 'vertical', accord = 'accordion'; 17 var hash = window.location.hash; 18 var historyApi = !!(window.history && history.replaceState); 19 20 //Events 21 $(this).bind('tabactivate', function(e, currentTab) { 22 if(typeof options.activate === 'function') { 23 options.activate.call(currentTab, e) 24 } 25 }); 26 27 //Main function 28 this.each(function () { 29 var $respTabs = $(this); 30 var $respTabsList = $respTabs.find('ul.resp-tabs-list'); 31 var respTabsId = $respTabs.attr('id'); 32 $respTabs.find('ul.resp-tabs-list li').addClass('resp-tab-item'); 33 $respTabs.css({ 34 'display': 'block', 35 'width': jwidth 36 }); 37 38 $respTabs.find('.resp-tabs-container > div').addClass('resp-tab-content'); 39 jtab_options(); 40 //Properties Function 41 function jtab_options() { 42 if (jtype == vtabs) { 43 $respTabs.addClass('resp-vtabs'); 44 } 45 if (jfit == true) { 46 $respTabs.css({ width: '100%', margin: '0px' }); 47 } 48 if (jtype == accord) { 49 $respTabs.addClass('resp-easy-accordion'); 50 $respTabs.find('.resp-tabs-list').css('display', 'none'); 51 } 52 } 53 54 //Assigning the h2 markup to accordion title 55 var $tabItemh2; 56 $respTabs.find('.resp-tab-content').before("<h2 class='resp-accordion' 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 $tabItemh2.attr('aria-controls', 'tab_item-' + (itemCount)); 66 itemCount++; 67 }); 68 69 //Assigning the 'aria-controls' to Tab items 70 var count = 0, 71 $tabContent; 72 $respTabs.find('.resp-tab-item').each(function () { 73 $tabItem = $(this); 74 $tabItem.attr('aria-controls', 'tab_item-' + (count)); 75 $tabItem.attr('role', 'tab'); 76 77 //Assigning the 'aria-labelledby' attr to tab-content 78 var tabcount = 0; 79 $respTabs.find('.resp-tab-content').each(function () { 80 $tabContent = $(this); 81 $tabContent.attr('aria-labelledby', 'tab_item-' + (tabcount)); 82 tabcount++; 83 }); 84 count++; 85 }); 86 87 // Show correct content area 88 var tabNum = 0; 89 if(hash!='') { 90 var matches = hash.match(new RegExp(respTabsId+"([0-9]+)")); 91 if (matches!==null && matches.length===2) { 92 tabNum = parseInt(matches[1],10)-1; 93 if (tabNum > count) { 94 tabNum = 0; 95 } 96 } 97 } 98 99 //Active correct tab 100 $($respTabs.find('.resp-tab-item')[tabNum]).addClass('resp-tab-active'); 101 102 //keep closed if option = 'closed' or option is 'accordion' and the element is in accordion mode 103 if(options.closed !== true && !(options.closed === 'accordion' && !$respTabsList.is(':visible')) && !(options.closed === 'tabs' && $respTabsList.is(':visible'))) { 104 $($respTabs.find('.resp-accordion')[tabNum]).addClass('resp-tab-active'); 105 $($respTabs.find('.resp-tab-content')[tabNum]).addClass('resp-tab-content-active').attr('style', 'display:block'); 106 } 107 //assign proper classes for when tabs mode is activated before making a selection in accordion mode 108 else { 109 $($respTabs.find('.resp-tab-content')[tabNum]).addClass('resp-tab-content-active resp-accordion-closed') 110 } 111 112 //Tab Click action function 113 $respTabs.find("[role=tab]").each(function () { 114 115 var $currentTab = $(this); 116 $currentTab.click(function () { 117 118 var $currentTab = $(this); 119 var $tabAria = $currentTab.attr('aria-controls'); 120 121 if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) { 122 $respTabs.find('.resp-tab-content-active').slideUp('', function () { $(this).addClass('resp-accordion-closed'); }); 123 $currentTab.removeClass('resp-tab-active'); 124 return false;
125 } 126 if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) { 127 $respTabs.find('.resp-tab-active').removeClass('resp-tab-active'); 128 $respTabs.find('.resp-tab-content-active').slideUp().removeClass('resp-tab-content-active resp-accordion-closed'); 129 $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active'); 130 131 $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').slideDown().addClass('resp-tab-content-active'); 132 } else { 133 $respTabs.find('.resp-tab-active').removeClass('resp-tab-active'); 134 $respTabs.find('.resp-tab-content-active').removeAttr('style').removeClass('resp-tab-content-active').removeClass('resp-accordion-closed'); 135 $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active'); 136 $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').addClass('resp-tab-content-active').attr('style', 'display:block'); 137 } 138 //Trigger tab activation event 139 $currentTab.trigger('tabactivate', $currentTab); 140 141 //Update Browser History 142 if(historyApi) { 143 var currentHash = window.location.hash; 144 var newHash = respTabsId+(parseInt($tabAria.substring(9),10)+1).toString(); 145 if (currentHash!="") { 146 var re = new RegExp(respTabsId+"[0-9]+"); 147 if (currentHash.match(re)!=null) { 148 newHash = currentHash.replace(re,newHash); 149 } 150 else { 151 newHash = currentHash+"|"+newHash; 152 } 153 } 154 else { 155 newHash = '#'+newHash; 156 } 157 158 history.replaceState(null,null,newHash); 159 } 160 }); 161 162 }); 163 164 //Window resize function 165 $(window).resize(function () { 166 $respTabs.find('.resp-accordion-closed').removeAttr('style'); 167 }); 168 }); 169 } 170 }); 171})(jQuery); 172
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.