Checkbox Navigator

Description:
Library to add gmail-style keyboard control to your list of checkboxes. The library is designed to easily add to an existing page (as long as the page has checkboxes with the same name).

Download: code, view-source.
Targetted: all
Tested on: OS X: Safari 1.3, 2.0, win32: ie6, ff1.0.7

Live Demo

Select: All, None, Toggle, nl-domains

Global Google site

Dutch Google site

Google UK

Global Google personalized

Dutch Google personalized

Dutch Yahoo site

 

Shortcuts: x  -  toggle   j  -  down   k  -  up   h  -  begin   l  -  end   o  -  show value

Features

The most important features includes:

• Works (almost) like gmail's page-scope, VIM-like, checkbox navigator
• Act's like a plug-in on an existing page. Just add code provided in the sample chapter above
• Also add's shift+mouse-click behaviour (select range)
• Extends this behaviour to the keyboard (try capital X)
• Checkbox state is not persisted (feature)
• The scroll into view behavious is also a bit different, and works also in Safari.
• A flexible select function is provided
• Oh yes, the chevron is positioned static, also unlike gmail, so you don't have resizing/flow problems.

Usage

 
function Checkbox_OnToggle(chk) {
  chk.parentNode.style.background=chk.checked?'yellow':'';
}
function Global_OnKeyPress(chk,e)
{
  if(String.fromCharCode(e.charCode||e.keyCode)=="o") 
    alert("Opening "+chk.value);
}
/*Sample code*/
window.onload=function() {
  chknav.init('CheckboxName',Checkbox_OnToggle,Global_OnKeyPress);
}
  

 
function Checkbox_OnToggle(chk) {
  chk.parentNode.style.background=chk.checked?'yellow':'';
}
function Global_OnKeyPress(chk,e)
{
  if(String.fromCharCode(e.charCode||e.keyCode)=="o") 
    alert("Opening "+chk.value);
}
/*Sample code*/
window.onload=function() {
  chknav.init('CheckboxName',Checkbox_OnToggle,Global_OnKeyPress);
}