(klicken zum vergrößern)

Das jQuery funktional inzwischen ein ziemliches Schwergewicht ist, dürften alle mitbekommen haben. Es ist schon erstaunlich was man mit dem Framework auf einfache Art und Weise anstellen kann. Dies liegt vor allem auch an den vielen Plugins, die engagierte Entwickler ins Netz stellen.

Der Schwede Mikael Söderström schießt wie ich finde aktuell in der Plugin-Entwicklung den Vogel ab. Er hat, auf Basis des neuen Microoft'schen Office 2010-Designs, eine jQuery-Erweiterung geschrieben, die aus einer Bullet-List ein komplettes Office-Ribbon erzeugt, inkl. Theme-Wechsel, Flyout-Menüs und AccessKeys.

Absolut grandiose Arbeit und sehr praktisch für Web-Anwendungen.

• Demo:  http://dev.mikaelsoderstrom.se/scripts/jquery/ribbon/
• Projekt:  http://jqueryribbon.codeplex.com/

Nachtrag

Mikael hat auch bereits eine Vorschau von jQuery Ribbons 2.0 veröffentlicht, die das neue Office 2010-Feature Backstage implementiert.

• Link:  http://vinkr.net/ribbon2

in einem älteren Artikel (Formulare per ENTER-Taste versenden) habe ich beschrieben welche Möglichkeiten es gibt, die ENTER-Taste in einem Formular zu verwenden, um entweder vor dem Abschicken (Submit) des Formulars Validierungen durchzuführen, mit mehreren Schaltflächen zu hantieren oder sogar gänzlich auf Schaltflächen zu verzichten.

Nun fragte mich ein Leser nach den weiteren Möglichkeiten die ENTER-Taste in Textboxen zu verwenden. Es ging darum eine Textbox bereitzustellen, die beim Drücken der ENTER-Taste den Inhalt auswertet und im Falle einer Url diese aufruft und in allen anderen Fällen die Google-Suche bemüht.

Der von mir sehr geschätzte Dave Ward, hat mich vor Kurzem mit seinem Beitrag 3 reasons why you should let Google host jQuery for you auf einen (neuen?) Google-Service aufmerksam gemacht, den Benutzer der inzwischen recht zahlreichen Javascript-Frameworks unbedingt nutzen sollten. Die Rede ist von der Google AJAX Libraries API.

Mit diesem Service geht Google einen Schritt auf die wachsende AJAX-Entwicklergemeinschaft zu und erlaubt das notwendige Framework, in Form einer JS-Datei, statt vom eigenen Server von Googles Datacentern zu laden. Quasi erwünschtes Deep-Linking.

The AJAX Libraries API is a content distribution network and loading architecture for the most popular, open source JavaScript libraries.

Die wachsende Liste der Frameworks deckt aktuell mit jQuery, Prototype, script.aculo.us, Dojo, MooTools und YUI wohl einen großen Prozentsatz dessen ab, was im Web zur Zeit so eingesetzt wird.

So ziemlich jede Website besitzt in irgendeiner Art und Weise eine Möglichkeit über die der Benutzer Kontakt zum Betreiber aufnehmen kann. Sei dies über Kommentarfunktionen einzelner Blogeinträge oder ein Kontaktformular. Allen diesen Möglichkeiten gemein ist die Verwendung eines HTML-Formulars und in diesem eine Textbox (Textarea) in der der Benutzer seinen Senf eingeben kann.

Nun ist der aktuelle HTML-Standard schon uralt und ergo hat sich bezüglich der Funktionalität der Formular-Steuerelemente nichts getan. So ist es immer noch ein ziemlicher Krampf einen etwas längeren Text zum Beispiel in ein Kommentarfeld einzugeben, wenn der Webdesigner gerade mal 3 Zeilen sichtbar zur Verfügung stellt. Möchte man noch einmal nachschauen was man drei Sätze weiter oben geschrieben hat, fängt man an zu scrollen.

Der Safari-Browser "pimpt" diese Textareas zumindest so, dass der Benutzer sie sich etwas größer ziehen kann, aber befriedigend ist das nicht, zumal die meisten wohl mit dem IE oder Firefox unterwegs sind.

Der Kanadier Stéphane Caron hat sich des Themas auf eine sehr pfiffige und einfache Weise angenommen. Er hat auf Basis des Javascript-Frameworks jQuery das Plugin prettyComments entwickelt, dass, vom Webentwickler in die Seite eingebunden, automatisch die Höhe einer solchen Textbox um eine Zeile erweitert, sobald der Benutzer in der letzten Zeile angelangt ist.

Bei der Verwendung der sog. AJAX-Techik auf Web-Seiten geht es unter anderem darum, beim Laden einer Seite nicht bereits alle benötigten Daten zum Browser zu transportieren, sondern Teile der Seite erst auf Anforderung, als zum Beispiel durch den Klick des Benutzers auf einen Button, über Javascript-Code nachzuladen.

Ein besonders guter Helfer für den Entwickler der Seite ist dabei jQuery, das einige sehr effiziente Methoden bietet, Daten auf diese Art und Weise vom Web-Server zu holen. Was aber passiert damit? Die aktuelle Seite wird mit den Daten angereichert, das heißt, in den aktuellen HTML-Code werden die zusätzlichen Informationen injiziert. Ein Bespiel dafür:

function injectComments() {
    //JSON-Daten vom Server holen
    $.getJSON("getcomments.ashx", function(json){
        if (json != undefined) {

            //Datensätze durchlaufen und DIV-Elemente erzeugen
            $.each(json.rows, function(i,item) {
                $("#Result").append(
                    "<div class=\"row\">" + item.Comment + "</div>");
            }

        }
    });
}

jQuery wird hier angewiesen, Kommentardaten im JSON-Format von der Url getcomments.ashx abzuholen und die einzelnen Datensätze dann der Reihe nach in DIV-Elemente zu packen und an das HTML-Element Result anzuhängen.

So weit so gut. Nun ist aber die Struktur der zu erzeugenden DIV's in diesem Beispiel recht simpel, das heißt es ist durchaus vertretbar die "Vorlage", in die die eigentlichen Daten eingefügt werden, direkt im Code zu deklarieren. Was aber, wenn diese Vorlage wesentlich komplexer ist? Bei einer solchen Javascript-String-Verkettung geht da sehr schnell der Überblick verloren und der Code wird unwartbar.