jQuery Plugin For Traversing Between Elements with Custom Events - updown.js

jQuery Plugin For Traversing Between Elements with Custom Events - updown.js
File Size: 46.9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

updown.js is a jQuery plugin that allows you to smoothly traverse between html elements (and their child elements) with keyboard commands or custom events. By default, the plugin allows to use J and K key to scroll up and down between html elements.

More examples:

Basic Usage:

1. Include jQuery javascript library and jQuery.updown.js script on the page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="src/jquery.updown.js" type="text/javascript"></script>

2. Create the html for the traversal content

<div class="demo">
<div></div>
<div></div>
<div></div>
<div></div>
</div>

3. Call the plugin

<script>
$(function() {
$('.demo').updown('div');
);
</script>

4. Options

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

This awesome jQuery plugin is developed by adelegard. For more Advanced Usages, please check the demo page or visit the official website.