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': 'inline-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 //next code are changed for closed all accordion tabs by default 105 //$($respTabs.find('.resp-accordion')[tabNum]).addClass('resp-tab-active'); 106 if ($($respTabs[tabNum]).hasClass('resp-easy-accordion')){ 107 if ( $($respTabs[tabNum]).find('.resp-tabs-list').attr('data-closed') == 'closed'){ 108 $($respTabs.find('.resp-tab-content')[tabNum]).addClass('resp-accordion-closed'); 109 } else { 110 $($respTabs.find('.resp-accordion')[tabNum]).addClass('resp-tab-active'); 111 $($respTabs.find('.resp-accordion')[tabNum]).next('.resp-tab-content').addClass('resp-tab-content-active'); 112 } 113 } else { 114 $($respTabs.find('.resp-tab-content')[tabNum]).addClass('resp-tab-content-active resp-accordion-closed'); 115 } 116 } 117 //assign proper classes for when tabs mode is activated before making a selection in accordion mode 118 else { 119 $($respTabs.find('.resp-tab-content')[tabNum]).addClass('resp-tab-content-active resp-accordion-closed') 120 } 121 122 //Tab Click action function 123 $respTabs.find("[role=tab]").each(function () { 124 125 var $currentTab = $(this); 126 $currentTab.click(function () { 127 128 var $currentTab = $(this); 129 var $tabAria = $currentTab.attr('aria-controls'); 130 131 if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) { 132 $respTabs.find('.resp-tab-content-active').slideUp('', function () { $(this).addClass('resp-accordion-closed'); }); 133 $currentTab.removeClass('resp-tab-active'); 134 return false; 135 } 136 if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) { 137 $respTabs.find('.resp-tab-active').removeClass('resp-tab-active'); 138 $respTabs.find('.resp-tab-content-active').slideUp().removeClass('resp-tab-content-active resp-accordion-closed'); 139 $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active'); 140 141 $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').slideDown().addClass('resp-tab-content-active'); 142 } else { 143 $respTabs.find('.resp-tab-active').removeClass('resp-tab-active'); 144 $respTabs.find('.resp-tab-content-active').removeAttr('style').removeClass('resp-tab-content-active').removeClass('resp-accordion-closed'); 145 $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active'); 146 $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').addClass('resp-tab-content-active').attr('style', 'display:block'); 147 } 148 //Trigger tab activation event 149 $currentTab.trigger('tabactivate', $currentTab); 150 151 //Update Browser History 152 if(historyApi) { 153 var currentHash = window.location.hash; 154 var newHash = respTabsId+(parseInt($tabAria.substring(9),10)+1).toString(); 155 if (currentHash!="") { 156 var re = new RegExp(respTabsId+"[0-9]+"); 157 if (currentHash.match(re)!=null) { 158 newHash = currentHash.replace(re,newHash); 159 } 160 else { 161 newHash = currentHash+"|"+newHash; 162 } 163 } 164 else { 165 newHash = '#'+newHash; 166 } 167 168 history.replaceState(null,null,newHash); 169 } 170 }); 171 172 }); 173 174 //Window resize function 175 $(window).resize(function () { 176 $respTabs.find('.resp-accordion-closed').removeAttr('style'); 177 }); 178 }); 179 } 180 });
181})(jQuery); 182
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.