dzLib.js
 

Checkbox Navigator

jsEssentials
dateLib
 
jsStrings
 
Controls
 
Tools
 
Navigate
 

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