jquery-roving-tabindex
Version:
jQuery collection plugin that implements one or two dimensional roving tabindex keyboard navigation
4 lines (3 loc) • 1.6 kB
JavaScript
(function($,window,document,undefined){var pluginName='jquery-roving-tabindex';$.fn.rovingTabindex=function rovingTabindex(rovingItemsSelector,options){options=$.extend({activeIndex:0,autoFocus:true,autoInit:true,autoReset:false,autoWrap:false,axis:'both',disableHomeAndEndKeys:false,isGrid:false,setFocusDelay:0},options);return this.each(function onEachMatchedEl(){var $widget=$(this);var $rovingItems=$widget.find(rovingItemsSelector);var updateTabindex=function($fromEl,$toEl){$fromEl.removeAttr('tabindex');$toEl.attr('tabindex','0');};var onDomChange=function(){$rovingItems=$widget.find(rovingItemsSelector);if(options.isGrid===true){$widget.trigger('gridNavigationItemsChange');}else{$widget.trigger('linearNavigationItemsChange');}};var onNavigationInitOrChange=function(e,data){var fromIndex=data.fromIndex;var toIndex=data.toIndex;var $roveFromEl=$rovingItems.eq(fromIndex);var $roveToEl=$rovingItems.eq(toIndex);updateTabindex($roveFromEl,$roveToEl);if(e.type!=='linearNavigationInit'&&e.type!=='gridNavigationInit'){if(options.autoFocus===true){setTimeout(function(){$rovingItems.eq(toIndex).focus();},options.setFocusDelay);}
$roveToEl.trigger('rovingTabindexChange',{fromIndex:fromIndex,toIndex:toIndex});}};if(options.isGrid===true){$widget.gridNavigation(rovingItemsSelector,options);}else{$widget.linearNavigation(rovingItemsSelector,options);}
$widget.preventScrollKeys(rovingItemsSelector);$widget.on('linearNavigationInit gridNavigationInit linearNavigationChange gridNavigationChange',onNavigationInitOrChange);$widget.on('domChange',onDomChange);});};}(jQuery,window,document));