Callbacks sind jedem jQuery Anweder bekannt. Von onClick bis zu onResize bindet der Webentwickler jede Menge Logik an festgelegte Events. Meiner Meinung nach eine angenehme Art zu programmieren und gut nachvollziehbar, da der Code gut lesbar bleibt, sofern man nicht übertreibt.
Wenn man selbst Applikationen programmiert die auf Javascript basieren und später noch diverse Erweiterungen ermöglichen sollen, dann macht es durchaus Sinn eigene Callbacks anzubieten. Sei es in einer jQuery Extension oder einer eigenen Applikation.
jQuery 1.5 ist schon eine Weile draußen und hat ein neues tolles Konzept mitgebracht das ich unbedingt vorstellen möchte, denn damit schreibt man bessere Scripte, die übersichtlicher sind und zuverlässiger funktionieren. Es heißt: Deferred und ist eigentlich sehr leicht zu verstehen.
Mit jQuery.Deferred lassen sich Objekte erzeugen, die beim erreichen eins Zustandes bescheid geben, damit andere Objekte darauf reagieren können. Klingt verworren ist aber ganz einfach, zum Beispiel sollen die Bilder angezeigt werden wenn sie fertig geladen sind.
jQuery ist ein großartiges Javascript Framework. Mit einer einzigen Zeile kann man ein komplettes Tab Widget bauen.
In meinem aktuellen Projekt kann der Benutzer unter einer großen Auswahl Elementen wählen. Jedes Element gehört in eine Kategorie. Also wäre es doch nett oben eine Kategorie anzuklicken und anschließend nur die Einträge dieser Kategorie zu sehen.
Nichts leichter als das! Es gibt natürlich großartige und weniger gute Plugins zu dem Thema, aber es ist in einer Zeile selbst geschrieben. Macht Spaß und verdeutlicht die Verkettung in jQuery.
Ich mag Projekte bei denen jQuery Plugins rausspringen. Aktuell haben wir ein super Projekt welches in Cake realisiert wird und natürlich jQuery im Frontend benutzt. Wäre nicht unendliche Arbeit damit verbunden, würde noch viel mehr für den Blog rum kommen.
Eins gibt es heute: movingLabels! Der Name sagt alles, mit diesem Plugin kann man nach belieben seine Labeltags rumwirbeln lassen, sobald das zugehörige Formularfeld den Focus erhält. Am besten direkt die Demo ansehen, downloaden und den erklärenden Artikel lesen.
Wenn jQuery auf einer Seite eingebunden ist (z.B. durch die coole Extension Kiwi Slider) dann beißt sich das Javascriptframework mit anderen wie MooTools oder Prototype. Insgesamt sollte man bevorzugt ein Framework einsetzen, wenn man unbedingt beide braucht, dann lohnt sich die Suche nach dem NoConflict Mode von jQuery.
Jeder Webentwickler weiß, dass kein Benutzer mehr auf das Neuladen einer Seite warten will. Vorallem nicht, wenn es in Webapplikationen darum geht Elemente hinzuzufügen, zu bearbeiten oder zu entfernen.
Zum Beispiel in einem Tool welches umfangreiche Exportmöglichkeiten besitzt und gerade von einer jungen, dynamischen Agentur entwickelt wird. In dem Programm legt man ein Exportscript an und kann diesem verschiedene Exportdateien zuweisen die beim durchlaufen dynamisch erstellt werden.
Diese einfache 1:n Beziehung ist mit Cake schnell gebacken, mit ein paar Zeilen erweitert und läuft. Allerdings verteilt auf mehreren Seiten. Zum Glück gibt uns Cake einfache Möglichkeiten an die Hand um das zu verhindern.
In diesem Artikel will ich aufschreiben wie man praktisch jedes Cake Projekt zusammen mit dem Lieblings-Javascriptframework jQuery in eine coole Web 2.0 Anwendung verwandeln kann.
Die praktische Auswahl von Daten über eine Selectbox ist immer wieder ein Thema. Vorallem bei den ganzen neuen Beta-Ajax-Web-Applications kommen sie einem immer wieder unter.
Das Problem mit den Dingern, ist die dynamische Veränderung. Ein einfaches $("select").find("option:first").remove(); funktioniert zwar zum entfernen, aber das hinzufügen von Options ist schon schwieriger (-böser Blick zum Internet Explorer-). Und wenn die Selectbox sich dann an einer weiteren orientieren soll, dann wirds haarig.
Die Lösung ist das Klonen und verstecken der "originalen" Box. Aus dem Klon kann man dann die überflüssigen Auswahlmöglichkeiten entfernen.
Und jetzt folgt der Artikel wie man das effizient anstellen könnte. Natürlich Hand in Hand mit jQuery.
Wenn man für ein beliebiges Model Posts speichern und eingeben kann, vielleicht weil man dieser Anleitung gefolgt ist, dann ist das schon ein schöner Fortschritt. Allerdings passieren immer wieder Tippfehler, und ähnlich klingende Begriffe finden sich in der Tagcloud.
Da hilft nur eins: während der Eingabe dem Benutzer direkt passende Tags vorschlagen. Eine automatische Vervollständigung wie beim Mailen in den großen sozialen Netzwerken oder beim suchen bei Google.
Zum Glück haben sehr schlaue Leute schon diverse Plugins erstellt, welche einen JSON String oder eine simple Textliste verarbeiten können. Zum Beispiel Autobox2. Gleich mal die Demo angucken, runterladen und dann ins eigene Projekt integrieren.
Es gibt kaum noch ein Menü, welches den Nutzer nicht mit einem Mouseover-Status über seine aktuelle Position informiert. Soweit so gut. Meistens sieht es so aus: Der Nutzer klickt auf den Menüpunkt, der Mouseover-Status verschwindet, die Seite verschwindet, die Seite baut sich wieder auf und der eben geklickte Menüpunkt ist dauerhaft hervorgehoben.
Ganz normal. Aber: Mit ein bisschen jQuery lässt sich der Mouseover-Status schon bei einem Klick festsetzen. Das sieht gut aus und wirkt fast wie ein dynamisches nachladen der Seite.
Ansehen kann man sich diesen Effekt zum Beispiel hier im Hauptmenü oder auf der Seite von Isabel von Roon. Wie der Effekt eingebaut wird, was find(), filter() und siblings() bedeutet und wie man den aktiven Menüpunkt hervorhebt wird in diesem Artikel besprochen.
Ein aktuelles Projekt interagiert auf sehr starke Art und Weise mit dem Benutzer. Das bedeutet neben einer anpassbaren Oberfläche wird der Benutzer ständig über den Status diverser Objekte auf dem laufenden gehalten. Dabei können sich verschiedene Objekte untereinander beeinflussen.
jQuery bietet ja ein tolles Ajaxkonstrukt an mit dem es kein Problem ist Daten vom Server zu holen. Aber auf die Dauer wird es doch etwas nervig immer wieder zu tippen.
Und weil "objektorientiertes Javascript" und selber entwickeln so viel Spaß macht, habe ich mir eine alternative Lösung einfallen lassen: Im Projekt werden an geeigneter Stelle Elemente erzeugt, die alle benötigten Informationen enthalten.
Diese werden in einem Updater registriert, welcher sich um die regelmäßige Abfrage kümmert. Das war die Theorie und jetzt kommt die Praxis.