jQuery – Accessible-RIA – Widgets für jedermann

Heute morgen bin ich auf was nettes gestoßen das ich hier kurz erwähnen möchte.
jQuery – Accessible-RIA ist eine Sammlung von mehreren einfach zu implementierenden Widgets, welche alle 100% WAI WCAG 2.0 und WAI AIRA konform sind.
Besonders für Frontend Entwickler ist das ganze interessant. Macht es eine Seite doch für jedermann vollständig zugänglich.

Das ganze basiert auf jQuery UI und beinhaltete folgende Widgets:

• Lightbox (Demo)
• Formular (Demo)
• Tabs (Demo)
• sortierbare Tabellen (Demo)

Alle Infos zum Projekt, sowie Demos, Doku usw findet man im Wiki von github.

Bessere Textfelder – prettyComments jQuery Plugin

Ein nettes kleines Tool für eine bessere Usability bei Textfeldern bietet das prettyComments Plugin. Es lässt bei Eingabe über die Tastatur einfach des Textfeld mitwachsen und funktioniert in allen gängigen Browsern.

Das Einbinden ist denkbar einfach:

1
2
3
4
5
6
7
8
9
10

//einbinden der Bibliotheken
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/prettyComments.js" type="text/javascript"></script>
 
//Initialisiere Plugin nach dem der DOM-Baum vollständig geladen ist
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$('#textarea').prettyComments();
	});
</script>

Das Plugin hat folgende Attribute:

• animate: true/false
• animationSpeed: ‘slow’/'normal’/'fast’
• maxHeight: 500 (ab dieser Höhe erscheint Scrollbalken)

Ein Beispiel dazu:

1
2
3
4
5

<script type="text/javascript">
	$(document).ready(function(){
		$('#textarea1').prettyComments({animate: true, maxHeight:100});
	});
</script>

jQuery ifixpng – Plugin für Transparenz-Problem

Wer kennt das Problem nicht. Man will ein transparentes png einbinden und bekommt Probleme in den älteren Versionen des Internet Explorer.
Klar gibts dafür schon Lösungen wie den pngfix von TwinHelix etc.

Allerdings fand ich bisher keine so einfach und geschickt wie jQuery.ifixpng.
Das Plugin lässt sich allgemein auf alle Dateien eines Typs oder auch gezielt auf id´s angewendet werden.

Es gibt momenta noch zwei, drei Probleme die aber im Normalfall nicht ins Gewicht fallen.
Unter anderem müssen die Elemente auf die der Hack angewandt wird visible sein.
Background positionierung und repeating gehen leider auch nicht. Wird aber normal eh weniger ein Thema sein wenn man den Hack braucht.

Hier wie immer ein simples Beispiel:

1
2
3
4
5
6
7
8
9
10
11

// apply to all png images
$('img[@src$=.png]').ifixpng();
 
// apply to all png images and to div#logo
$('img[@src$=.png], div#logo').ifixpng();
 
// apply to div#logo, undo fix, then apply the fix again
$('img[@src$=.png], div#logo').ifixpng().iunfixpng().ifixpng();
 
// apply to div#logo2, modify css property and add click event
$('div#logo2').ifixpng().css({cursor:'pointer'}).click(function(){ alert('ifixpng is cool!'); });;

Alle weiteren Infos, sowie das Plugin zum Download findet Ihr auf der offiziellen Homepage.

jQuery Address – Deep linking mit jQuery

Denen unter euch die auch mit Flash, Flex oder Air arbeiten dürfte swfaddress von asual durchaus ein Begriff sein. Ermöglicht swfaddress doch das deeplinken innerhalb von Flash-Anwendungen.
Meiner Meinung nach war swfaddress in den letzten Jahren eine der besten Zusatzentwicklungen im Bereich Flash und hat sich, nicht zu letzt durch die leichte Implementierung, schnell durchgesetzt.

Die Jungs von asual haben jetzt ein weiteres Deeplinking-Plugin entwickelt. Diesmal für jQuery.
Mit dem Plugin ist es Möglicht jetzt auch direkt den Status einer Applikation oder einen speziellen Bereich der Website zu verlinken.

Das Plugin ermöglicht unter anderem:

• Bookmarken in die Favoriten oder einer Social-Website
• Versenden von Links via E-Mail oder Messenger
• Das auffinden von speziellem Inhalt mit den großen Suchmaschinen
• Verarbeiten der Browser-History und des Refresh-Buttons

Eine vom Plugin erzeugte URL könnte so aussehen:

http://www.domain.de/#/section/?id=1&name=jQuery

Eine Möglichkeit ist nun z.B. das verlinken in Tabs. Mit dem Plugin könnt Ihr nun z.B. direkt gezielt Bereiche einer Tab-Komponente ansteuern.
Ein Beispiel dafür findet Ihr hier.

Die Seite von asual zum Plugin findet ihr unter: http://www.asual.com/jquery/address/
Dort findet Ihr das Plugin zum Download sowie die API und Beispiele.

jQuery´d Bread Crumb – jBreadCrumb

Zwar nicht ganz neu, dafür wie ich finde immer noch beeindruckend. Und für die unter euch die es nicht kennen evtl. ein Highlight. jBreadCrumb – Das jQuery-Plugin zur modernen Darstellung von Breadcrumbs.

Das Plugin wurde für Breadcrumbs geschrieben welche mit extrem tief verschachtelten oder langen Seitennamen umgehen müssen und hat daher auch die Fähigkeit einzuklappen.
Das schöne ist das sich der Einklappeffekt anhand der Anzahl der Elemente oder der Länge einstellen lässt.

Das Plugin nutzt weiter noch das easing Plugin von jQuery zum ein- bzw. aufklappen der Inhalte.

Um das Plugin zu nutzen braucht Ihr nur etwas in der Art:

1
2
3

jQuery(document).ready(function(){
	jQuery("#breadCrumb").jBreadCrumb({easing:'swing'});
})

Eine Demo sowie die Dateien zum Download findet Ihr auf der offiziellen Seite.

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:

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.