|
Both Kibbles.Keys and Kibbles.Skipper are included in the featured kibbles download. If you plan on using both libraries, that's by far the easiest way to reference. Kibbles.KeysKibbles.Keys provides a small cross browser library for keyboard shortcuts. <script type='text/javascript'
src='http://kibbles.googlecode.com/files/kibbles-1.3.0.comp.js'></script>
<script type='text/javascript'>
function onLoad() {
kibbles.keys.listen();
kibbles.keys.addKeyPressListener(
"a", function() {
document.body.innerHTML = document.body.innerHTML + "a<br/>";
});
kibbles.keys.addKeyPressListener(
"u", function() {
window.location = 'http://code.google.com/p/kibbles/';
});
}
window.onload = onLoad;
</script>Kibbles.SkipperKibbles.Skipper provides a cross browser library for on page keyboard navigation. You can register an object as a 'stop', then using selected keys, navigate to each 'stop' in succession. <script type='text/javascript'
src='http://kibbles.googlecode.com/files/kibbles-1.3.0.comp.js'></script>
<script type='text/javascript'>
// updates the style on the stop and clears the style on the previous stop
function updateCursor(next, prev) {
// remove our cursor style from the previous stop
if (prev && prev.element) {
prev.element.style.border = '';
}
// add our cursor style to the current stop
if (next && next.element) {
next.element.style.border = '1px solid red';
}
}
function onLoad() {
kibbles.skipper.addStopListener(
kibbles.skipper.LISTENER_TYPE.PRE, updateCursor);
// Set the 'offset' option to return the a third way down the client area
// an option can be a static value, or a callback.
kibbles.skipper.setOption('offset', function() {
return document.documentElement.clientHeight / 3;
});
// Work your own magic to find a list of elements to use
// use as stops, then register them with skipper.
var nodes = document.getElementsByTagName("h1");
for (var i = 0; i < nodes.length; i++) {
kibbles.skipper.append(nodes.item(i));
}
// Finally register our keys.
kibbles.skipper.addFwdKey("j");
kibbles.skipper.addRevKey("k");
}
window.onload = onLoad;
</script>
|