dzLib.js
 

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);
}