Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

It is a jQuery plugin, provides an easy way to enable jk binding navigation on a page.

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 CHANGES.md
Octocat-spinner-32 COPYING
Octocat-spinner-32 Makefile
Octocat-spinner-32 README.md
Octocat-spinner-32 jknav.jquery.json
Octocat-spinner-32 jquery.hotkeys.js
Octocat-spinner-32 jquery.jknav.demo.html
Octocat-spinner-32 jquery.jknav.js
Octocat-spinner-32 jquery.jknav.min.js
README.md

jQuery jknav

jQuery jknav is a plugin, provides an easy way to enable jk binding navigation on a webpage.

Demonstration

See this page.

Requirements

  • jQuery

Installation

The basic install is easy, you only need these:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://livibetter.github.com/jquery-jknav/jquery.jknav.min.js"></script>

The link of jQuery jknav above is minified version, hosted on GitHub pages.

Add elements to navigation list first, then initialize jknav:

<script>
$('h2').jknav();
$.jknav.init();
</script>

Customization

$(selector).jknav()

$(selector).jknav(callback, name);

You can assign a callback function, which will be invoked after jknav navigates the page to the item.

name is the navigation list's name, you can have more than one list with different keys.

$.jknav.init()

$.jknav.init({
  up: 'k',
  down: 'j',
  name: 'default',
  easing: 'swing',
  speed: 'normal',
  circular: true,
  reevaluate: false
  });

You can change the default options:

  • up and down are the keys to trigger navigation.
  • name is the navigation list's name.
  • easing and speed are for navigation effect.
  • circular indicates if it's a circular navigation.
  • If reevaluate is true, then jknav uses current position to decide next item to navigate to; or based on the internal index variable.

$.jknav.up() and $.jknav.down()

Provide programmatic way to navigate. It accepts one parameter, the name of navigation set. If the parameter is missing, then it's the default set.

Copyright

This project is licensed under the MIT License, see COPYING.

Copyright (C) 2010-2013 Yu-Jie Lin
Copyright (C) 2014 Kyle J. Davis
Something went wrong with that request. Please try again.