UpDown.js - Moving up and down with either keyboard commands or custom events with jquery |

Home Layout & InterfaceUpDown.js - Moving up and down with either keyboard commands or custom events with jquery

UpDown.js - Moving up and down with either keyboard commands or custom events with jquery

11 years ago Views

10637

1387

adelegard

UpDown.js - Moving up and down with either keyboard commands or custom events with jquery

UpDown.js is a jquery plugin that provides a flexible way to traverse through containers and their child elements with either keyboard commands or custom events.

Requirements

jQuery 1.4.2+

Usage

Basic use case:

    $('.some_table').updown('tbody tr');

This will do the following:

Add a class of 'highlight' onto the first found 'tbody tr' element within '.some_table'
Let you move up and down between these elements (removing and adding the 'highlight' class) with the j/k keys

Advanced use case:

    $('.some_table').updown('tbody tr', {
        skip_selector: '.skip',
        loop: false,
        move_scrollbar: false,
        key_action: 18, // alt
        key_down: [74, 40], // j, down arrow
        key_up: [75, 38], // k, up arrow
        on_action_override: function() {
            $('.last_action').text($('.highlight td:first').text());
        }
    });

This will do the following:

Add a class of 'highlight' onto the first found 'tbody tr' element within '.some_table'
Skip over elements with the 'skip' class
Not loop (once you hit your last 'tbody tr' element going 'down' once more will not jump back to the first 'tbody tr')
Not move the scrollbar to keep the current 'highlight' class visible
Fire the 'action' event on 18
Fire the key_down event on 74 or 40
Fire the key_up event on 75 or 38
Execute a custom 'action' method on the 'action' event

Options

Option Name	Default	Purpose
jump_between	true	whether or not traversal should be made between parent containers
loop	true	whether or not traversal should loop around to the beginning/end of the traversal elements
skip_selector		the selector(s) to skip over during traversal
table_row_helper	false	attempting to account for inconsistent table markup Specifically, tables with their header row as: the first row in the tbody the first row in the table with no thead or tbody
move_scrollbar	true	whether or not the scrollbar should be moved to keep the highlighted element visible
scrollbar_move_additional_px	200	how many additional pixels we should move when keeping the 'highlight_class' visible (in addition to height of 'highlight_class' element)
scrollbar_animate_speed	300	the speed (in milliseconds) of the scrollbar animation
highlight_class	"highlight"	the class to be added to each traversal element
action_window_location_href	true	whether or not the first anchor found in the highlighted element on the action event should be used to navigate the browser to that href
action_selector	' > td > a'	the selector to be used if action_window_location_href is true to navigate the page on the action event
key_event	"keydown"	the jQuery event to listen to for keyboard interaction
key_action	13 (enter key)	the keyboard keyCode that will fire the action event (this action can be overridden using the on_action_override option)
key_down	74 (j key)	the keyboard keyCode that will fire the down event (this action can be overridden using the on_key_down_override option), which by default will move the highlight class down one matching element
key_up	75 (k key)	the keyboard keyCode that will fire the up event (this action can be overridden using the on_key_up_override option), which by default will move the highlight class up one matching element
key_ignore_when_selector	'input:focus, button:focus'	the selectors in which the plugin should take no action if any matching elements are found
on_action_before		an overrideable function that will fire before the action event is fired
on_action_after		an overrideable function that will fire after the action event is fired
on_action_override		an overrideable function that will fire instead of the default action event
on_key_down_before		an overrideable function that will fire before the key down event is fired
on_key_down_after		an overrideable function that will fire after the key down event is fired
on_key_down_override		an overrideable function that will fire instead of the default key down event
on_key_up_before		an overrideable function that will fire before the key up event is fired
on_key_up_after		an overrideable function that will fire after the key up event is fired
on_key_up_override		an overrideable function that will fire instead of the default key up event
jump_between_up_before		an overrideable function that will fire before the jumping up event is fired
jump_between_up_after		an overrideable function that will fire after the jumping up event is fired
jump_between_up_override		an overrideable function that will fire instead of the default jumping up event
jump_between_down_before		an overrideable function that will fire before the jumping down event is fired
jump_between_down_after		an overrideable function that will fire after the jumping down event is fired
jump_between_down_override		an overrideable function that will fire instead of the default jumping down event

That's it! Please note, however, that currently only one usage of the plugin is supported on the page at any given time.

MIT License