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("<h5 class='resp-accordion' role='tab'><span class='resp-arrow'></span></h5>"); 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"][aria-controls^="tab_item-"]').each(function () { 114 var $currentTab = $(this); 115 $currentTab.click(function () { 116 117 var $currentTab = $(this); 118 var $tabAria = $currentTab.attr('aria-controls'); 119 120 if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) { 121 $respTabs.find('.resp-tab-content-active').slideUp('', function () { $(this).addClass('resp-accordion-closed'); }); 122 $currentTab.removeClass('resp-tab-active'); 123 return false;
124 } 125 if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) { 126 $respTabs.find('.resp-tab-active').removeClass('resp-tab-active'); 127 $respTabs.find('.resp-tab-content-active').slideUp().removeClass('resp-tab-content-active resp-accordion-closed'); 128 $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active'); 129 130 $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').slideDown().addClass('resp-tab-content-active'); 131 } else { 132 $respTabs.find('.resp-tab-content-temp').remove(); 133 $respTabs.find('.resp-tab-active').removeClass('resp-tab-active'); 134 var $oldtab = $respTabs.find('.resp-tab-content-active').removeAttr('style').removeClass('resp-tab-content-active').removeClass('resp-accordion-closed'); 135 var $oldtabClone = $oldtab.clone(true, true); 136 $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active'); 137 var $newtab = $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').addClass('resp-tab-content-active').attr('style', 'display:block'); 138 $newtab.wrap('<div class="resp-tab-content-wrapper" />'); 139 $oldtabClone.insertAfter($newtab).addClass('resp-tab-content-active').addClass('resp-tab-content-temp').css({ 140 position: 'absolute', 141 top: 0, 142 left: 0, 143 width: '100%' 144 }); 145 $newtab.parent().css({ position : 'relative' }).height(Math.max($newtab.outerHeight(), $oldtab.outerHeight())); 146 $newtab.css({ opacity: 0 }); 147 $newtab.animate({ opacity : 1 }); 148 $oldtabClone.animate({ opacity : 0 }, function() { 149 $oldtabClone.remove(); 150 $newtab.unwrap(); 151 }); 152 } 153 //Trigger tab activation event 154 $currentTab.trigger('tabactivate', $currentTab); 155 156 //Update Browser History 157 if(historyApi) { 158 var currentHash = window.location.hash; 159 var newHash = respTabsId+(parseInt($tabAria.substring(9),10)+1).toString(); 160 if (currentHash!="") { 161 var re = new RegExp(respTabsId+"[0-9]+"); 162 if (currentHash.match(re)!=null) { 163 newHash = currentHash.replace(re,newHash); 164 } 165 else { 166 newHash = currentHash+"|"+newHash; 167 } 168 } 169 else { 170 newHash = '#'+newHash; 171 } 172 173 history.replaceState(null,null,newHash); 174 } 175 }); 176 177 }); 178 179 //Window resize function 180 $(window).resize(function () { 181 $respTabs.find('.resp-accordion-closed').removeAttr('style'); 182 }); 183 }); 184 } 185 }); 186})(jQuery); 187
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.