QFocuser – AJAX widgets mit der Tastatur ansteuern

Das Navigieren durch Applikationen mittles der Tastatur ist ein wichtiger Bestandteil in allen Bereichen der useability und accessibility.
Daniel Steigerwald hat sich der Problematik angenommen, welche entsteht sobald mehr als ein AJAX widget auf einer Seite vorhanden sind und eine kleine eigenständige Bibliothek namens QFocuser geschrieben.

Momentan liegt QFocuser in der Version 0.95 vor und läuft auf IE6/7, FF2/3, Safari, Webkit, Opera und Chorme.

Die wichtigsten Features von QFocuser im Überlick:

  • erlaubt es dem Widget key events abzufangen wenn es den focus bekommt
  • Der Fokus kann für jedes Element aktiviert werden
  • löst focus und blur events aus (so das z.b. eine Tabellenzeile nicht länger gehighlighted bleibt wenn man ausserhalb der Tabelle klickt)
  • Ermöglicht es das Widget über Tab anzusteuern

Eine Demo des ganzen findet man hier.

Beispielcode:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
  var focuser = new QFocuser(widgetContainer, {
                onFocus: function(focusedEl) { .. add highlighted class or whatever }
                onBlur: function(focusedEl) { .. remove highlighted class or whatever }
        });
        // attach your own keys listeners
        $(focuser.getKeyListener()).addEvent('keydown', e.g. handleArrows);
        // when your widget decided to set the focus (and then receive key events)
        focuser.focus(tableRowForExample);

zu finden ist das gesamte Projekt bei Google Code.

http://www.mysrc.de/wp-content/plugins/sociofluid/images/twitter_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/google_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/stumbleupon_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/delicious_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/digg_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/reddit_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/dzone_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/blinklist_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/blogmarks_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/furl_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/newsvine_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/technorati_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/magnolia_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/myspace_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/facebook_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/yahoobuzz_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/sphinn_48.png

Ähnliche Artikel

Kommentare