jquery-tabs
Version:
jQuery plugin that creates the basic interactivity for an ARIA tabs widget.
4 lines (3 loc) • 2.39 kB
JavaScript
(function($){$.fn.tabs=function tabs(options){options=$.extend({},options);return this.each(function onEach(){var $tabsWidget=$(this);var $tablist=$tabsWidget.find('.tabs__items');var $tabs=$tablist.find('.tabs__item');var $links=$tablist.find('a');var $panelcontainer=$tabsWidget.find('.tabs__content');var $panels=$panelcontainer.find('.tabs__panel');$tabsWidget.nextId('tabs');$tablist.attr('role','tablist');var ariaSelectedList=[];var ariaSelectedIndex;$tabs.each(function onEachTab(idx,el){var $tab=$(el);var ariaSelected=$tab.attr('aria-selected');if(ariaSelected!==undefined&&ariaSelected!=='false'&&ariaSelected==='true'){ariaSelectedList.push($tab.attr('aria-selected'));ariaSelectedIndex=idx;$panels.eq(idx).attr('role','tabpanel').prop('hidden',false);}else if(ariaSelected===undefined||ariaSelected==='false'){$tab.attr('aria-selected','false');ariaSelectedList.push($tab.attr('aria-selected'));$panels.eq(idx).attr('role','tabpanel').prop('hidden',true);}});$tabs.attr('role','tab');$panels.attr('role','tabpanel');if(ariaSelectedList.indexOf('true')===-1){$tabs.attr('aria-selected','false').first().attr('aria-selected','true');ariaSelectedIndex=0;$panels.prop('hidden',true).first().prop('hidden',false);}
$links.attr('role','presentation').removeAttr('href');if(options.livePanels===true){$panelcontainer.attr('aria-live','polite');}
$tabs.each(function onEachTab(idx,el){var $tab=$(el);var tabId=$tabsWidget.attr('id')+'-tab-'+idx;var panelId=$tabsWidget.attr('id')+'-panel-'+idx;$tab.attr('id',tabId).attr('aria-controls',panelId);$panels.eq(idx).attr('id',panelId).attr('aria-labelledby',tabId);});$tablist.rovingTabindex('[role=tab]',{autoWrap:true,disableHomeAndEndKeys:true,activeIndex:ariaSelectedIndex});$tablist.on('rovingTabindexChange','[role=tab]',function(e,data){var $selectedTab=$(this);var $activeTab=$tablist.find('[aria-selected=true]');var $activePanel=$panelcontainer.find('[aria-labelledby={0}]'.replace('{0}',$activeTab.attr('id')));var $selectedPanel=$panelcontainer.find('[aria-labelledby={0}]'.replace('{0}',$selectedTab.attr('id')));if($selectedTab[0]!==$activeTab[0]){$activePanel.prop('hidden',true);$selectedPanel.prop('hidden',false);$selectedTab.attr('aria-selected','true');setTimeout(function(){$activeTab.attr('aria-selected','false');$selectedTab.trigger('tabsSelect',data);},0);}});$tabsWidget.addClass('tabs--js');});};}(jQuery));