jQuery Plugin For Traversing Between Elements with Custom Events - updown.js
| File Size: | 46.9 KB |
|---|---|
| Views Total: | 1189 |
| 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.
