Kategorien
Webdesign

Trotz Facebook Widgets eine valide Seite

An Facebook Widgets führt heutzutage fast kein Weg vorbei. Spätestens wenn man mit seiner Seite bei Facebook vertreten ist, werden Facebook Widgets auf der eigenen Website eingebunden. Hier ein kurzer Tipp, wie das am besten funktioniert.

Die Widgets sind schnell implementiert – mit einer Zeile HTML – wie Facebook wirbt: doch auf die einfache Implentierung folgt meist auch der Schrecken: Der einst valide Code enthält nun Fehler. Dabei ist es auch egal, ob das Widget per iFrame oder XFBML eingebunden wird. Dieses Problem lässt sich aber sehr einfach beheben, indem man das Widget einfach per Javascript nachlädt wenn die Seite (DOM) schon geladen ist. Dadurch bekommt der Validator seinen korrekten Code und das Widget erscheint wie gewohnt auf der Seite.

Der entsprechende Javascript Code ist schnell geschrieben; ich stelle hier die Codezeilen mit jQuery sowie in reinem JavaScript vor, falls noch kein JavaScript Framework auf der Seite eingebunden ist. Die Funktionsweise ist denkbar einfach, der FBML-Code wird einfach nachträglich in das Objekt mit der ID fb_like-box eingefügt.

Diese DOM Manipulation ist natürlich auch mit anderen Frameworks realisierbar.

jQuery

jQuery("#fb_like-box").append(' <fb:like-box profile_id="185550966885"></fb:like-box> ');

JavaScript

document.getElementById("fb_like-box").innerHTML = ' <fb:like-box profile_id="185550966885"></fb:like-box> ';

Die Codezeilen fügen jeweils das Facebook Widget in das Objekt mit der ID fb_like-box ein. Im Normalfall ist das Objekt ein DIV und muss vorhanden sein;-). Der XFBML-Code muss natürlich durch den entsprechenden Code des Widgets ersetzt werden. Ich habe hier den Demo-Code der Seite Lactose Free Milk verwendet, da dieser momentan in der Like Box Demo von Facebook erscheint.

Dieser Workaround zum Verstecken des nicht validen Codes vor dem Validator sollte natürlich nur angewandt werden, wenn man wie hier keinen Einfluss auf den Code hat.

(mm), ™

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Illustrator Inspiration Tutorials

Inkscape – eine mögliche Alternative zu Illustrator

Vektorgrafiken sind eine tolle Sache. Sie lassen sich ohne Qualitätsverlust beliebig skalieren und ermöglichen so eine größere Flexibilität gegenüber Rastergrafiken. Diese Flexibilität zahlt sich schon bei einem einfachen Button aus, jedoch rechnet sich der Preis für die Software der zwei Platzhirsche Illustrator und CorelDRAW für einfache Buttons und dergleichen nicht. Als Alternative zu den beiden genannten Programmen hat sich Inkscape entwickelt. Es ist kostenlos, Open-Source und kann in vielen Bereichen mit Illustrator und Co. mithalten.

Grundlegendes

Systemvoraussetzungen

Inkscape wird für die Plattformen Windows, Linux und MacOS X entwickelt. Laut FAQ soll es aber auch auf FreeBSD und anderen Linux-ähnlichen Betriebssystemen laufen. Eine eindeutige Aussage zu den System Voraussetzungen von Inkscape konnte ich nirgends finden, aus Erfahrung kann ich jedoch sagen, dass es selbst unter WindowsXP mit einem Pentium-4-Prozessor und 1GB RAM läuft. Natürlich nehmen größere beziehungsweise komplexere Grafiken bei diesem System entsprechend Zeit in Anspruch. Auf aktuellen Systemen dürfte Inkscape problemlos funktionieren.

Unterstützte Dateiformate
Inkscape unterstützt direkt nur die Formate SVG und SVGZ, es können aber PostScript und EPS sowie die meisten Rastergrafik-Formate (JPG, PNG, GIF usw.) importiert werden. Laut FAQ soll es abhängig von der Installation auch möglich sein, Adobe-Illustrator (*.ai) zu öffnen, dies ist mir aber bisher nicht gelungen.
Nominell kann Inkscape Dateien in den Formaten SVG, SVGZ, Postscript (*.ps), Encapsulated Postscript (*.eps), Encapsulated Postscript Interchange (*.epsi), Adobe Illustrator (*.ai), LaTeX (*.tex) und POVRay (*.pov) speichern. Tätsächlich sind es jedoch wohl einige mehr, wie die Abbildung zeigt.

Dateiformate in die Inkscape Speichern kann
Diese Dateiformate bietet Inkscape zum Speichern von Dokumenten.

Installation

Der Download dürfte ja kein Problem darstellen, Inkscape wird auf diversen Seiten und Portalen zum Download angeboten – zum Beispiel auf sourceforge. Die aktuelle Version ist derzeit 0.47.

Vorsicht: Eins sollte allerdings beachtet werden, Inkscape ist umsonst und es müssen weder E-Mail-Adresse noch sonstige Daten angegeben werden, um es herunterzuladen. Falls dies doch der Fall ist, handelt es sich mit Sicherheit um einen unseriösen Anbieter der ein ABO verkaufen will. Aber ich denke auch das sollte bekannt sein.

Die Installation unter Windows gestaltet sich dank eines Installers, der in gewohnter Form durch die Installation führt, denkbar einfach.

Erste Schritte

Nach dem Start von Inkscape öffnet sich gleich die Arbeitsfläche mit einem Dokument im A4 Format. Die Arbeitsfläche dürfte denjenigen die schon Erfahrungen mit Zeichenprogrammen haben nicht allzu kompliziert erscheinen. Fährt man mit dem Mauszeiger über eine Schaltfläche und verweilt kurz, dann wird ein Tooltip eingeblendet, der die jeweilige Funktion, meiner Meinung nach, sehr verständlich erklärt.

Die Arbeitsfläche von Inkscape
Die Arbeitsfläche von Inkscape

Doch, anstatt die wichtigsten Funktionen und ersten Hürden „trocken“ zu erklären, erstelle ich lieber eine einfache Zeichnung.

Anmerkung: Die aufgezeigten Vorgehensweisen sind vielleicht nicht die besten, und viele Funktionen lassen sich natürlich auch über andere Wege erreichen, aber so geht es eben auch ;-).

Als erstes bietet es sich an den Zoomfaktor anzupassen, der entsprechende Faktor hängt natürlich vom jeweiligen Dokument ab, bei dieser Beispielzeichnung spielt er zum Beispiel überhaupt keine Rolle, gewohnheitsmäßig setzte ich ihn mal auf 100%. Das geht ganz einfach rechts unten, entweder durch direkte Eingabe oder mit den Pfeiltasten.

Zoomfaktor anpassen
Zoomfaktor anpassen

Zeichnen

Nun zeichnen wir ein einfaches Rechteck, indem wir auf das „Rechteck und Quadrate erstellen“-Werkzeug klicken. Doch bevor wir jetzt aus Gewohnheit einfach ein Rechteck aufziehen, schauen wir in die Statusleiste unter der Farbpalette , dort werden Informationen zu dem gewählten Werkzeug angezeigt. Das macht es auch Unerfahrenen Benutzern einfacher.

Ein Blick in die Statusleiste lohnt immer
Ein Blick in die Statusleiste lohnt immer

Achtung: Die angezeigten Informationen ändern sich, wenn zum Beispiel ein Rechteck aufgezogen wird.

In diesen Informationen offenbart uns Inkscape auch schon den ersten Unterschied zu anderen Programmen, ein Quadrat wird nicht mit shift erzeugt, sondern mit strg. Und wenn wir strg gedrückt halten und wieder einen Blick auf die Statuszeile werfen, dann sehen wir das Inkscape es nicht nur ermöglicht, Quadrate zu ziehen, sondern auch Rechtecke, die einem Seitenverhältnis entsprechen. Das Gleiche gilt natürlich auch für andere Formen.

Quadrate Zeichnen
Quadrate Zeichnen
Ein einfaches Rechteck zeichen
Ein einfaches Rechteck zeichen
Ein Rechteck in einem bestimmten Verhältnis Zeichnen
Ein Rechteck in einem bestimmten Verhältnis Zeichnen

Farben

In meiner Installation hat das gezeichnete Rechteck eine blaue Füllung und einen schwarzen Rahmen. Klickt man jetzt auf eine der Farben in der Farbpalette unten, so ändert sich die Füllung in die entsprechende Farbe. Auch hier lohnt wieder ein Blick auf die Statusleiste, in der wir neben dem HEX Code der Farbe auch sehen, dass sich mit Shift+Klick die Konturfarbe ändert.

Farben ändern über die Farbpalette
Farben ändern über die Farbpalette

Sollte sich die Farbe des Objektes wiedererwartend nicht ändern, gibt es zwei Möglichkeiten. Entweder Sie haben das Objekt nicht ausgewählt (gestrichelte Linie um das Objekt) oder die Füllung ist transparent.

So sieht ein Ausgewähltes Objekt aus
So sieht ein Ausgewähltes Objekt aus

Das hört sich jetzt vielleicht komisch an, aber genau das ist eine der größten Hürden für Inkscape-Neulinge. Denn meist besteht das erste gezeichnete Objekt aus einem schwarzen Rahmen und die Füllung ist Transparent. Nur dass fällt einem auf den ersten Blick nicht auf, man nimmt an, die Füllung ist weiß und lässt sich komischerweise nicht ändern oder die Farbpalette ist nutzlos.
Diese Hürde lässt sich allerdings schnell überwinden in dem man einen Rechtsklick auf das Objekt macht und im Kontextmenü „Füllung und Kontur“ anklickt. Daraufhin öffnet sich ein Dialog, in dem man weitere Einstellungen vornehmen kann, unter anderem auch den Alphawert, steht dieser auf 0, so ist die Füllung/ Kontur transparent.

Wenn ein Objekt keine Farbe annehmen will, unbedingt die Transparenz überpfüfen
Wenn ein Objekt keine Farbe annehmen will, unbedingt die Transparenz überpfüfen

Schatten

Schatten lassen sich in Inkscape leider nicht so elegant, wie in zum Beispiel Illustrator erzeugen. Hier muss ein zweites Objekt erzeugt (Kopieren) und hinter das Objekt, das den Schatten haben soll, gelegt werden. Die Reihenfolge der Objekte lässt sich über den Menüpunkt „Objekt“ ändern.

Die Reihenfolge von Objekten lässt sich ganz einfach anpassen
Die Reihenfolge von Objekten lässt sich ganz einfach anpassen

Je nach dem, was für ein Schatten gewünscht ist, kann die Unschärfe des „Schatten-Objektes“ erhöht werden, um den Schatten „weicher“ zu machen. Den Unschärfewert eines Objektes kann in dem Dialog „Füllung und Kontur“ anpassen.

Mit dem Unschärferegler lassen sich weiche Schatten erstellen
Mit dem Unschärferegler lassen sich weiche Schatten erstellen

Auswählen und Gruppieren

Da wir soeben einen Schatten erstellt haben, ist es sinnig, diesen auch gleich an das Objekt zu binden. Dies erfolgt durch Gruppieren der beiden Objekte. Um zwei oder mehrere Objekte zu gruppieren, müssen diese ausgewählt werden, dies kann man auf zwei Arten machen, entweder man klickt alle Objekte mit gedrückter Shift-Taste an oder man zieht ein Auswahlrechteckt mit gedrückter Maustaste um die Objekte.

Hier gibt es auch wieder einen kleinen aber feinen Unterschied zu anderen Programmen, ausgewählt werden nämlich nur die Objekte die komplett im Auswahlrechteck liegen. Objekte, die nur teilweise darin liegen, bleiben von der Auswahl ausgeschlossen. Dies mag für Umsteiger erst einmal nervig sein, kann sich aber auch sehr schnell als durchaus nützlich erweisen.

So wird das Objekt nicht ausgewählt
So wird das Objekt nicht ausgewählt
Nur wenn das Objekt komplett in dem Auswahlrahmen liegt wird es ausgewählt
Nur wenn das Objekt komplett in dem Auswahlrahmen liegt wird es ausgewählt

Nachdem die gewünschten Objekte nun ausgewählt sind, können diese über den Menüpunkt „Objekt-> Gruppieren“ gruppiert werden. Diese Gruppierung kann natürlich jederzeit wieder aufgehoben werden.

Mehrere Objekte können Gruppiert werden
Mehrere Objekte können Gruppiert werden

Tipp: Für alle, die es nicht schon in der Statusleiste entdeckt haben, wenn man zweimal auf ein Objekt klickt, ändern sich die Pfeile und man kann das Objekt drehen.

Klickt man zweimal auf ein Objekt, lässt sich dieses Drehen
Klickt man zweimal auf ein Objekt, lässt sich dieses Drehen

Text

Einen Text zu erstellen, dürfet keine großen Schwierigkeiten bereiten, deshalb halte ich mich hier kurz, wir benötigen den Text eigentlich nur für den nächsten Punkt (Ausrichten).
Mit dem Werkzeug „Textobjekte erstellen und bearbeiten“ in der linken Leiste wird ein Text erstellt. Einfach klicken und losschreiben. Nun wird oben eine Leiste angezeigt, in der Schriftgröße, Schriftart und so weiter eingestellt werden kann. Die Einstellmöglichkeiten sind leider etwas sporadisch.

Text kann an belibigen Stelle eingefügt werden
Text kann an belibigen Stelle eingefügt werden

Ausrichten

Wir haben jetzt ein Rechteck und einen Text, ein gängiger Anwendungsfall hier wäre den Text mittig auf dem Rechteck auszurichten. Dazu holen wir uns aus dem Menüpunkt „Objek“ den Dialog „Ausrichten und Abstände ausgleichen“. Durch einen Klick wird dieser Dialog jetzt in der rechten Spalte über dem Dialog „Füllung und Kontur“ angezeigt.

Dialog zum Ausrichten von Objekten anzeigen
Dialog zum Ausrichten von Objekten anzeigen

Um die Objekte auszurichten, müssen sie wieder, wie gewohnt, markiert werden, danach sollte man immer noch einen Blick auf das Dropdownmenü „Relativ zu:“  werfen, hier kann festgelegt werden, zu was die Auswahl ausgerichtet werden soll. Wir wollen hier die Objekte relativ zueinander ausrichten, also wählen wir „Auswahl“. Durch einen Klick auf die Symbole „Objekte horizontal zentrieren“ und „Objekte horizontal ausrichten“ wird der Text nun mittig auf dem Rechteck ausgerichtet.

Über das DropDown Menü kann ausgewählt werden wie die Objekte ausgerichtet werden sollen
Über das DropDown Menü kann ausgewählt werden wie die Objekte ausgerichtet werden sollen
Durch einen Klick auf die Symbole werden die Objekte entsprechend ausgerichtet
Durch einen Klick auf die Symbole werden die Objekte entsprechend ausgerichtet

Anmerkung: Der Text sitzt natürlich nicht exakt mittig auf dem blauen Rechteck, da er mittig zu der Gruppe, bestehend aus blauem Rechteck und Schatten ausgerichtet wurde. Wenn der Text nur zum blauen Rechteck ausgerichtet werden soll, dann muss die Gruppierung aufgehoben und der Schatten von der Auswahl ausgeschlossen werden.

Export Speichern

Nachdem wir nun eine einfache Zeichnung erstellt haben, man könnte es als Button bezeichnen, wollen wir diesen natürlich speichern. Ich spare mir hier das Speichern zu erläutern diese dürfte jedem bekannt sein.
Über „Datei->Bitmap exportieren“ öffnet sich eine Dialogbox, die auf den ersten Blick sehr verwirrend aussieht, aber über sie lässt sich unsere Zeichnung sehr komfortabel als .png speichern. Es lassen sich neben Dateiname und Speicherort auch die gewünschte Bitmap-Größe und der Bereich des Dokuments auswählen, der exportiert werden soll. Dies mag dem einen oder anderen jetzt ziemlich sinnlos vorkommen, aber wenn man zum Beispiel mehrere Buttons in einem Dokument erstellt, dann kann dieser Exportdialog die Speicherarbeit ziemlich erleichtern.

Der Bitmap Exportieren Dialog kann auf den Ersten Bilick verwirren
Der Bitmap Exportieren Dialog kann auf den Ersten Bilick verwirren

Aber zurück zu unserer Zeichnung, wir gehen davon aus, dass es ein Button werden soll, also brauchen wir keine Grafik im A4 Format. Deshalb wählen wir die Objekte die wir speichern wollen aus, dazu muss der Dialog nicht geschlossen werden, einfach auf die Seite ziehen und die Objekte wie gewohnt auswählen. Daraufhin wird der Button „Auswahl“ im Dialog aktiv und die Werte passen sich entsprechend der Auswahl an. In unserem Beispiel reicht es jetzt, auf Exportieren zu klicken und der Button wird als transparentes PNG gespeichert.

Werden bestimmte Objekte ausgwählt, ändern sich die Werte im Dialog entsprechend
Werden bestimmte Objekte ausgwählt, ändern sich die Werte im Dialog entsprechend

Tipp: In Inkscape sollte oft zwischengespeichert werden, da es durchaus vorkommen kann, dass das Programm aus heiterem Himmel abstürzt.

Weiterführende Links und Fazit

Zum Schluss meiner Einführung möchte ich noch auf die offizielle Inkscape Seite verweisen, auf ihr finden sich unter anderem Benutzergalerien und Tutorials, die für viele hilfreich sein werden. Besonders möchte ich hier die Open Clip Art Library hervorheben, in ihr finden sich tausende Vektorgrafiken die als SVG oder PNG Datei heruntergeladen werden können. Für diejenigen, die nun Interessiert an Inkscape sind, aber lieber aus Büchern lernen, sind auf der Seite unter dem Menüpunkt „Dokumentation“ auch deutsche und englische Bücher gelistet.

Abschließend lässt sich sagen, Nutzer von Illustrator werden sicher nicht auf den Komfort und die gewohnten Techniken verzichten wollen, wobei sich dies in zukünftigen Versionen von Inkscape natürlich ändern kann, aber für Einsteiger oder Anwender, die die Möglichkeiten von Illustrator sowieso nicht ausnutzen, stellt Inkscape eine gute Alternative dar.

Ich hoffe, ich konnte einen kurzen Einblick in Inkscape geben, die vorgestellten Funktionen sind natürlich bei weitem nicht alles, was Inkscape zu bieten hat, deshalb würde ich jedem der Vektorgrafiken erstellen will/muss, empfehlen es zu testen. Kommentare mit nützlichen Ressourcen und weiteren Tutorials zu Inkscape sowie konstruktive Kritik zu diesem Post sind willkommen.

(mm), ™

Kategorien
Webdesign

Eigene jQuery Plugins entwickeln – erste Schritte

Mittlerweile stehen auf der offiziellen jQuery Seite unzählige Plugins zum Download bereit. Es existieren unzählige Lösungen für gängige Probleme, manchmal ist aber dann doch nicht die benötigte Funktion vorhanden. Oder sie ist nicht so umgesetzt wie man es erwartet. Das ist aber kein all zu großes Problem, jQuery macht es uns nämlich sehr einfach, eigene Plugins zu entwickeln.

Natürlich sollte man generell das Rad nicht immer neu erfinden. Für die ersten Schritte mit jQuery, zur Weiterbildung oder für private Projekte macht es durchaus Sinn, bereits existierende Funktionsweisen einmal selbst als Plugin umzusetzen. Soll das entwickelte Plugin allerdings veröffentlicht werden, sollte man abwägen ob ein weiteres Plugin mit identischer Funktion wirklich für andere nützlich ist.

Ein einfaches Plugin

Das Plugin das wir in diesem Artikel entwickeln, ist recht einfach, es soll ein DIV entfernen können. Wenn man mit der Maus über ein DIV fährt dann wird ein Button zum Schließen/ Entfernen des DIVs eingeblendet. Wird der Button angeklickt, soll das DIV verschwinden.

Durch einen Klick auf den Button verschwindet das DIV samt enthaltener Grafik
Durch einen Klick auf den Button verschwindet das DIV samt enthaltener Grafik.

Über Sinn und Nützlichkeit kann man sich streiten – als Beispiel für die Entwicklung eines Plugin sollte dieses Beispiel allemal reichen.

Zuerst sollten Sie sich einen passenden Namen für das Plugin überlegen; dieser kann natürlich jederzeit geändert werden. Da das Plugin beziehungsweise die Datei den Namen enthalten sollte, bietet es sich an, diesen schon vor der eigentlichen Entwicklung fix zu machen. Dazu aber später mehr.

Der Quellcode

Hier nun der komplette Quellcode des Plugins, den ich anschließend Zeile für Zeile kommentiere. Kurze Empfehlung vorab: Auf das Dollarzeichen als Alias für Plugins sollten Sie verzichten. Warum ich das Dollarzeichen dennoch benutze, bzw. nutzen kann erkläre ich im Ersten Absatz der Zeilenweisen Erklärung.

(function($) {
$.fn.close = function() {
return this.each(function(){
var sCloseImage = '<img class="close" src="close.png" alt="close" />';
$(this).append(sCloseImage);
$(this).hover(function(){
var offset = $(this).offset();
var iWidth = $(this).outerWidth();
var sTop = offset.top + 5 ;
var sLeft = offset.left + iWidth - 30;
$(".close",this).show().offset({top: sTop , left: sLeft}).click(function(){
$(this).parent().remove();
});
},function(){
$(".close",this).last().hide();
});
});
};
})(jQuery);
(function($) {

Um den Nutzern unseres Plugins die Verwendung von noConflict() und uns in diesem Fall doch die Verwendung des Dollarzeichens als Alias zu ermöglichen, erzeugen wir einfach einen neuen Alias, und zwar das Dollarzeichen. Das Dollarzeichen sollte nicht verwendet werden, da auch andere Framewoks ausser jQuery dieses als Alias verwenden, deshalb kann es hier zu Koflikten kommen. Ich verwende hier das Dollarzeichen nicht wie gewohnt sondern ersetze es durch einen neuen Alias, hier das Dollarzeichen, ich könnte es auch durch einen beliebigen anderen Alias ersetzen.
Nähere Informationen zu dieser Technik und anderen möglichen Techniken um dieses Kopatibilitätsproblem zu vermeiden findet man auf der jQuery Seite.

$.fn.close = function() {

Hier startet nun unser eigentliches Plugin. Das Plugin hat den Namen „close“ und ist eine Methode die das Objekt jQuery.fn erweitert.

return this.each(function(){

Plugins sollten immer ein Objekt vom Typ jQuery zurückgeben. Mit „this“ greifen wir innerhalb des Plugins auf das Übergebenen Objekt zu.
Da wir ja nicht wissen wie viele DIVs wir Übergeben bekommen führen wir mit der each() Methode den nachfolgenden Code für jedes DIV aus.
Hier startet nun auch die Eigentliche Funktion des Plugins.

var sCloseImage = '<img class="close" src="close.png" alt="close" />';

Hier habe ich einfach den HTML-Code für den Button in eine Variable geschrieben.

$(this).append(sCloseImage);

Das Bild wird dem DIV hinzugefügt.

$(this).hover(function(){
var offset = $(this).offset();

Der Variablen wir die Positon des DIVs zugewiesen.

var iWidth = $(this).outerWidth();

Die Breite des DIVs

var sTop = offset.top + 5 ;

Zum Abstand von oben wird 5 addiert um einen Abstand zum DIV zu erzeugen.

var sLeft = offset.left + iWidth - 30;

Dem Abstand vom linken Rand wird die Breite des DIVs addiert und 30 (25px Grafikbreite + 5px für den Abstand) abgezogen, so dass der Button „auf“ dem DIV liegt.

Wird der Mauszeiger über das entsprechende DIV geführt, werden für jedes DIV die Variablen entsprechend gefüllt. Das muss bei jedem Überfahren gemacht werden, da sich die DIVs ja verschieben können, speziell wenn eines entfernt wurde.

$(".close",this).show().offset({top: sTop , left: sLeft}).click(function(){
$(this).parent().remove();
});

Die Elemente mit der Klasse .close in diesem DIV werden angezeigt mit der show() Mehtode und und ausgerichtet mit offset(). Durch einen Klick auf den Button wird das Eltern-Objekt dieses Buttons entfernt, also das Objekt in dem der Button liegt.

},function(){
$(".close",this).hide();
});

In der Callbackfunktion der hover()-Methode wird das Objekt mit der Klasse .close in diesem DIV ausgeblendet. Sprich: Wenn die Maus nicht mehr auf dem DIV ist, wird der Button wieder ausgeblendet.

});
};
})(jQuery);

Hier wird der Alias dem jQuery-Objekt zugewiesen.

Regeln für die Plugin Entwicklung

Einige Regeln, die bei der Plugin-Entwicklung beachtet werden sollten, habe ich bereits erwähnt. Ich fasse sie hier jedoch noch einmal die, meiner Meinung nach, wichtigsten kurz zusammen.

  • Niemals sollte NUR das Dollarzeichen verwendet werden. (Ausser es wird wie in unserem Fall als neuer Alias gesetz.)
  • Die Datei sollte so benannt werden: jquery.NAME_DES_PLUGINS.js (hier: jquery.close.js)
  • Alle Methoden und Funktionen sollten mit einem Semikolon (;) beendet werden, ansonsten treten Probleme beim Komprimieren des Codes auf.
  • Das Plugin sollte ein jQuery-Objekt zurückgeben.
  • Es sollte die each() Methode verwendet werden, schließlich kann man nicht immer wissen, wie viele Elemente man übergeben bekommt.

Weitere und ausführlichere Informationen finden Sie in der jQuery-Dokumentation.

jQuery Plugin verwenden

Das Plugin müssen Sie jetzt nur noch einbinden, danach können Sie es wie jede andere Methode verwenden.

<!-- jQuery enbinden von Google-->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    // jQuery laden
    google.load("jquery", "1.4.2");
  </script>

Natürlich benötigen das jQuery Framework.

<script type="text/javascript" src="jquery.close.js"></script>

Das Plugin wird eingebunden

$(document).ready(function() {
$("div").first().close();
$("#firstDiv").close();
$(".secondDiv").close();
$(".thirdDiv").close();

Es kann wie gewohnt verwendet warden.

$("ul").close();
$("p").close();
});

Und da wir es nicht explizit auf DIVs beschränkt haben, funktioniert es natürlich auch mit anderen DOM-Elementen.

Das Plugin schliesst auch Listen
Das Plugin schließt auch Listen

Wozu soll das gut sein?

Wie bereits gesagt, ging es nicht um das, was Sie mit dem hier entwickelten Plugin anschließend tun können, sondern um ein erstes Beispiel, wie Sie eigene Plugins entwickeln können. Ich hoffe, dass ich die grundsätzlichen Regeln zur Entwicklung eines Plugins leicht verständlich beschrieben habe und dass der Beitrag Ihnen hilft, jQuery für Ihre Projekte sinnvoll einzusetzen. Konstruktive Kommentare und Anregungen für weitergehende Tutorials zur Plugin-Entwicklung beziehungsweise Fragen zu konkreten Problemen sind sehr willkommen.

Demo

Durch einen Klick auf die Grafik öffnet sich das Demo
Durch einen Klick auf die Grafik öffnet sich die Demo
Kategorien
Webdesign

jQuery-Plugin Color Animations – Menüs mit wechselnden Farben animieren

Roll-over-Effekte für Menüs haben eine lange Tradition und bieten gute Möglichkeiten, die Navigation interessanter und übersichtlicher zu gestalten. Sicher haben Sie schon Menüs gesehen, deren Text oder Hintergrundfarbe sich bei Mouseover ändert und beim Verlassen der Maus langsam wieder verblasst, so dass eine Art von Slide-Show- oder Animations-Effekt entsteht. Solche Menüs wurden meist mit Flash realisiert. Da im Zuge der Barrierefreiheit zunehmend auf Flash verzichtet wird, sehe ich diese Animationen bei Menüs in letzter Zeit immer weniger. Im Fall der in Flash umgesetzten Varianten ist dies für mich kein großer Verlust, da ich Flash hier für falsch eingesetzt ansehe. Dieser Effekt lässt sich nämlich sehr einfach mit jQuery und dem Color Animations Plugin realisieren.


Ein Klick aufs Bild öffnet eine Seite mit Demos.

Das Color Animations Plugin

Die .animate() Methode von jQuery ist eine tolle Sache die viele Möglichkeiten bietet, nur leider gehört die Animation von Farben standardmäßig nicht dazu, doch durch das Einbinden des Color Animations plugin von John Resig ist auch das möglich.

Alternativ kann auch jQuery UI Effects eingebunden werden, um Farben zu animieren. Wenn also schon jQuery UI Effects eingebunden sind, kann auf das Color Animations Plugin verzichtet werden.

Vorüberlegungen

Das Menü soll:

  • Farben animieren können, Schrift- und/ oder Hintergrundfarben
  • Ohne Java Script funktionsfähig bleiben
    • Realisiert durch ein CSS Fallback
  • Auch per Tastatur bedient werden können und funktionieren
    • Realisiert durch focus events
  • Die Aktuelle Seite auf „active“ setzen und nicht animieren

Um die Animation auch per Tastaturbedienung zu ermöglichen, verwende ich hier die focus Evente .focusin() und .focusout(). Diese Funktionen stehen in jQuery ab der Version 1.4 zur Verfügung, daher ist die Mindestanforderung auch jQuery 1.4.

HTML und CSS

Die Demo präsentiert vertikale und horizontale Menüs in verschiedenen Ausführungen –  mit aktivem Element und ohne, mit und ohne Hintergrund. Bei der Variante ohne Hintergrund wechselt die Textfarbe.


Menü mit Hintergrund

Grundstruktur

Das Menü besteht aus einer unsortierten Liste und einfachen Textlinks, die aktive Seite wird durch die Klasse „active“ hervorgehoben und von der Animation ausgeschlossen.
Durch die Klasse „jMenue“ greifen wir in jQuery auf die Links zu, die Klasse „jMenueNoJs“ dient dem CSS Fallback und die Klasse „horizontalMenue“ wird im Beispiel benötigt, da vertikale und horizontale Menüs auf einer Seite dargestellt werden.

CSS

Die Komplette CSS-Datei möchte ich hier nicht erläutern, das würde sicher die meisten langweilen, deshalb beschränke ich mich auf die, meiner Meinung nach, wichtigsten Stellen und Eigenschaften.

.jMenue{
cursor: pointer;
list-style-type: none;
padding:0;
}

Je nach dem wie das Menü gestylt wird, können Leerräume zwischen den einzelnen Links entstehen. Wenn der Mauszeiger nun in diesem Leerraum ist, wird natürlich nicht die linktypische Hand angezeigt. Dies kann zu einem „Flackern“ des Mauszeigers führen, deshalb weisen wir dem Mauszeiger im kompletten Menübereich die linktypische Hand zu.
<

>
.jMenue .active{
color: #000;
}

Dem aktiven Menüpunkt, sofern er vorhanden ist, wir die Farbe zugewiesen, zu der bei Mouseover gewechselt wird, hier Schwarz (#000).

.jMenue :focus{
outline: none;
}

Da wir den Focus-Zustand eines Links explizit visuell erkennbar machen, können wir auf den standardmäßigen Rahmen verzichten.

.jMenueNoJs a:hover,
.jMenueNoJs a:focus{
color:#000;
}

Wenn Java Script nicht aktiviert ist, wird die Linkfarbe bei Hover und Focus per CSS gewechselt. Diese Klassen werden mittels jQuery entfernt, dazu aber später mehr.

Der jQuery Part

$('ul').removeClass('jMenueBGNoJs .jMenueNoJs');

Diese Zeile ist der CSS Fallback, funktioniert ganz einfach: Wenn JavaScript aktiviert ist, werden die CSS-Klassen .jMenueBGNoJs und .jMenueNoJs mit der .removeClass() Methode entfernt. Wenn nicht, bleiben die Klassen bestehen und sorgen für den Farbwechsel.

Textfarbe animieren

$(".jMenue a").not(".active, .jMenueBG a").each(function(){
$(this).bind({
mouseenter: function(){
$(this).stop().animate({ color: '#000' }, 'fast');
},
mouseleave: function(){
$(this).stop(false,true).animate({ color: '#427BB5' }, 'slow');
},
focusin: function(){
$(this).stop().animate({ color: '#000' }, 'fast');
},
focusout: function(){
$(this).stop(false,true).animate({ color: '#427BB5' }, 'slow');
}
})
});
$(".jMenue a").not(".active, .jMenueBG a").each(function(){

Alle Links der Klasse ,jMenue werden selektiert. Mit der .not() Methode werden die Klasse .active und die Links der Klasse . jMenueBG von dieser Selektion ausgeschlossen.
Die Links der Klasse .jMenueBG müssen hier nur ausgeschlossen werden, wenn wie in der Demo Menüs mit Text und Hintergrundanimation auf einer Seite eingebunden sind.
Mit der .each()-Methode werden nun für jedes Element der Selektion nacheinander die Anweisungen in der geschweiften Klammer ausgeführt.

$(this).bind({


Menü ohne Hintergrund – hier wird die Farben der Textlinks gewechselt.

Auf das jeweilige Element wird mit $(this) zugegriffen. Da wir die jQuery-Version 1.4 verwenden, können wir mit der .bind() Methode mehrere Eventhandler an ein Element binden. Die folgenden Events werden nun, durch ein Komma getrennt, an das jeweilige Element gebunden.
mouseenter: function(){
Dieser Event wird ausgelöst sobald sich der Mauszeiger über einem Link befindet.

$(this).stop().animate({ color: '#000' }, 'fast');
},

Wir greifen wieder mit $(this) auf das jeweilige Element zu. Falls noch eine Animation für dieses Element läuft wird diese mit der .stop() Methode angehalten. Anschließend wird die aktuelle Farbe des Linktextes zu schwarz (#000) animiert. Als Dauer für die Animation wird hier „fast“ verwendet, was einer Zeit von 200 Millisekunden entspricht.
mouseleave: function(){
Dieser Event wird ausgelöst sobald der Mauszeiger den Link verlässt.

$(this).stop(false,true).animate({ color: '#427BB5' }, 'slow');
},

Hier wird durch die Angabe von “true” als zweiter Parameter der .stop() Methode eine eventuell noch laufende Animation sofort auf den Endzustand der Animation gesetzt. Dadurch wird sichergestellt dass die Animation von Schwarz nach Blau statt findet und nicht von einem Grau nach Blau. Als Dauer für die Animation wird hier „slow“ verwendet, was einer Zeit von 600 Millisekunden entspricht.

focusin: function(){
$(this).stop().animate({ color: '#000' }, 'fast');
},
focusout: function(){
$(this).stop(false,true).animate({ color: '#427BB5' }, 'slow');
}
})
});

Dasselbe wird auch für die Events „focusin“ und „focusout“ ausgefürt, um den Effekt eben auch per Tastatur zu ermöglichen.

Hintergrundfarbe animieren

Der Code zum Animieren der Hintergrundfarbe unterscheidet sich nur wenig, deshalb gehe ich hier nur auf die kleinen Unterschiede ein.

$(".jMenueBG a").not(".active").each(function(){

Da wir hier die Klasse .jMenueBG verwenden, müssen wir auch nur die Klasse .active() von der Animation ausschließen.

>$(this).bind({
mouseenter: function(){
$(this).stop().animate({ backgroundColor: '#000' }, 'fast');
},

Anstatt „color“ wird hier „backgroundColor“ animiert. Hier müssen Sie auf die Schreibweise achten: “background-color” funktioniert nicht.

mouseleave: function(){
$(this).stop(false,true).animate({ backgroundColor: '#427BB5' }, 'slow');
},
focusin: function(){
$(this).stop().animate({ backgroundColor: '#000' }, 'fast');
},
focusout: function(){
$(this).stop(false,true).animate({ backgroundColor: '#427BB5' }, 'slow');
}
})
});

Active Link

Das Menü ohne aktiven Link zu verwenden ist recht simpel, dafür wird einfach die Klasse .active nicht gesetzt. Wenn diese nicht existiert, kann sie natürlich auch aus der .not()-Methode entfernt werden – oder Sie verzichten komplett auf diese Methode.

Fazit

Die verwendeten Farben und Animationsgeschwindigkeiten sind natürlich Geschmackssache – sie dienen nur als Beispiel. Farbe und Geschwindigkeit können Sie ganz einfach an die eigenen Bedürfnissen anpassen. Ebenso können Sie nicht nur Links animieren, sondern die vorgestellten Funktionen auf DIV-Container oder Tabellen anwenden. Der Kreativität sind kaum Grenzen gesetzt.

(mm),

Kategorien
Design HTML/CSS

CSS-Kurzschreibweisen inklusive Cheatsheets

Schnell können CSS-Dateien ziemlich unübersichtlich werden, es wird hier und da nur eine Kleinigkeit geändert und schon hat man den Überblick verloren. So wird beispielsweise mehrmals die Eigenschaft margin-top zugewiesen und der Wert dadurch einfach überschrieben. Das verursacht oft überflüssigen und nutzlosen Code, der sich selbst mit firebug oder ähnlichen Tools nur noch schwer warten lässt.

Mehrmals zugewiesene Eigenschaften werden einfach überschrieben, dies kann sehr praktisch sein, aber auch die Suche nach der Eigenschaft, die die gewünschte Darstellung nun “wirklich“ bewirkt, deutlich eschweren. Da CSS-Dateien mit über 1000 Zeilen und etlichen Hacks keine Seltenheit sind, lässt sich eine gewisse Unübersichtlichkeit natürlich nicht immer vermeiden, jedoch kann der Code durch Kurzschreibweisen deutlich optimiert werden. Die Vorteile liegen auf der Hand:

  • übersichtlicher
  • einfacher zu warten
  • Doppelzuweisungen können einfacher/schneller erkannt und vermieden werden
  • geringere Dateigröße.

Bei den heutzutage üblichen Bandbreiten sieht vielleicht nicht jeder einen Sinn in der Einsparung von einigen Bytes an einer CSS-Datei, aber spätestens nach dem bekannt wurde, dass die Ladezeit zu einem Ranking-Faktor für google werden soll, macht jede Einsparung Sinn.

Für Kurzschreibweisen sind nicht immer alle Werte notwendig, werden Sie nicht gesetzt, so wird ein Standardwert zugewiesen.

screen

Ich habe zwei Cheatsheets erstellt, die hoffentlich für den einen oder anderen hilfreich sind. Eine ausführliche Version mit allen genannten Schreibweisen (ohne Farben) und eine „CheatCard“, die einfach nur die Kurzschreibweisen enthält.

Border

Eine der gängigsten Kurzschreibweisen ist die Eigenschaft border. Mit ihr lassen sich border-width, border-style und border-color auf einmal zuweisen.

Eigenschaften:

border-width: 1px;
border-style: solid;
border-color: #FF0000;

Kurzschreibweise:

border: 1px solid #FF0000;

Standardwerte:

border-width: medium;
border-style: none;
border-color: #000000; /*Browser abhängig, meist schwarz*/

margin

Für margin lassen sich alle vier Werte top, right, bottom und left nacheinander zuweisen. Die Werte werden in der Reihenfolge 1. oben, 2. rechts, 3. unten und 4. links interpretiert.

Eigenschaften:

margin-top: 1px;
margin-bottom: 2px;
margin-right: 3px;
margin-left: 4px;

Kurzschreibweisen:

1px nach oben, 3px nach rechts, 2px nach unten, 4px nach links

margin: 1px 3px 2px 4px;

1px nach oben, 3px nach links und rechts, 2px nach unten

margin: 1px 3px 2px;

1px nach unten und oben, 3px nach links und rechts

margin: 1px 3px;

1px nach oben, unten, rechts und links

margin: 1px;

Standardwerte

0

Padding

Für padding verhält sich das ebenso.

Eigenschaften:

padding-top: 1px;
padding-bottom: 2px;
padding-right: 3px;
padding-left: 4px;

Kurzschreibweisen:

1px nach oben, 3px nach rechts, 2px nach unten, 4px nach links

padding: 1px 3px 2px 4px;

1px nach oben, 3px nach links und rechts, 2px nach unten

padding: 1px 3px 2px;

1px nach unten und oben, 3px nach links und rechts

padding: 1px 3px;

1px nach oben, unten, rechts und links

padding: 1px;

Standardwerte:

0

Background

Dass sich über background die Hintergundfarbe und das Hintergrundbild festlegen lässt, ist sicher jedem bekannt, aber dass ist noch lange nicht alles. Backgound-Attachement ist vielleicht nicht jedem geläufig, es legt fest, ob das Hintergrundbild seinen festen Platz behält oder mit-scrollt.

Eigenschaften:

background-color: #FF0000;
background-image: url(../img/background.png);
background-attachment: fixed;
background-repeat: repeat-x;
background-position: center;

Kurzschreibweise:

background:#FF0000 url(../img/background.png) fixed repeat-x center;

Standardwerte:

background-color: transparent;
background-image: none;
background-repeat: repeat;
background-position: top left; /*0% 0% */
background-attachment: scroll;

font

Mit font lässt sich sicher am meisten einsparen, jedoch wirkt es auch am unübersichtlichsten, auf den ersten Blick, wie ich zumindest finde. Auf den zweiten Blick jedoch offenbart es Schrift-Eigenschaften die oft überhaupt nicht berücksichtigt werden, wie zum Beispiel die Zeilenhöhe (line-height).

Eigenschaften:

font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 2em;
line-height: 1em;
font-family: Arial Sans-serif;

Kurzschreibweise:

font: italic small-caps bold 2em/1em Arial Sans-serif;

Standardwerte:

font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: medium;
line-height: normal;
font-family: ; /*Browser abhängig*/

list-style

Bisher waren die Kurzschreibweisen relativ weit verbreitet und auch bekannt, aber auch listen lassen sich kürzer stylen.

Eigenschaften:

list-style-type: square;
list-style-position: inside;
list-style-image: url(../img/list-style.png);

Kurzschreibweise:

list-style: square inside url(../img/list-style.png);

Standardwerte:

list-style-type: disc;
list-style-position: outside;
list-style-image: none;

Der direkte Vergleich

Um den Unterschied zu verdeutlichen, habe ich zwei CSS-Dateien angelegt,  jeweils in Kurzschreibweise und Normalschreibweise.

Zeichen Zeilen Bytes
Css_long.css 692 42 774
Css_short.css 323 23 367

Alle Werte mit Leerzeichen und Umbrüchen
Gezählt mit notepad++

Hexadezimalfarben

Zum Schluss möchte ich noch auf die Kurzschreibweise für Hexadezimalfarben eingehen, die natürlich die Kurzschreibweisen für background und border ideal ergänzen. Als kleine Einführung, eine “Hexadezimalfarbe” besteht aus 6 Zeichen, jeweils zwei für die Grundfarben Rot, Grün und Blau.

color: #RRGGBB;

Sind nun, wie in diesem Beispiel zwei Zeichen einer Grundfarbe gleich, so kann diese ein zu einem Zeichen zusammengefasst werden.

color: #RGB;

Diese Möglichkeit der Farbangabe muss allerdings nicht immer die kürzeste sein, so ist zum Beispiel der Farbname „red“ um eine Stelle kürzer als die kurze Hexadezimal-Variante, da bei ihr noch eine Raute vorangestellt werden muss.
Welche Variante für die jeweilige Farbe die beste/kürzeste ist, muss deshalb individuell entschieden werden.
Farbtabellen gibt es im Web zur Genüge in allen Variationen, deshalb möchte ich hier nur ein paar Beispiele nennen:

Schwarz #000000 #000 black
Weiß #FFFFFF #FFF white
Rot #FF0000 #F00 red
Blau #0000FF #00F blue
Grün #00FF00 #0F0 green
(Limone) Grün #00FF00 #0F0 lime
Gelb #FFFF00 #FF0 yellow

(tm), (mm), (sl)

Kategorien
JavaScript & jQuery Programmierung

Animiertes Scrollen mit jQuery

Sie klicken auf einen Link und anstatt einfach zum entsprechenden Anker zu springen, wird sanft zum gewünschten Anker gescrollt. Ich sehe diesen Effekt in letzter Zeit immer öfter und war erstaunt, wie einfach er mit jQuery umgesetzt werden kann. Selbst die Erhaltung der „richtigen“ URL (www.url.de#anker) stellt keine Probleme dar. Demo im neuen Fenster

jQuery Code

$(document).ready(function() {
	$('a[href*=#]').bind("click", function(event) {
		event.preventDefault();
		var ziel = $(this).attr("href");

		$('html,body').animate({
			scrollTop: $(ziel).offset().top
		}, 2000 , function (){location.hash = ziel;});
});
return false;
});

Erkläuterung

$(document).ready(function() {

Der Effekt soll natürlich erst angewendet werden, wenn die Seite fertig geladen ist.

$('a[href*=#]').bind("click", function(event) {

Mit a[href*=#] wählen wir alle Links aus, deren Ziel mit einer Raute beginnt, also alle Anker-Links. Mit der bind() Funktion binden wir den folgenden Code an das Klick-Ereignis der Links, so dass er nach dem Klick ausgeführt wird.

event.preventDefault();

Der Code wird jetzt zwar erst nach dem Klick ausgeführt, jedoch versucht der Browser immer noch zuerst zum Anker zu springen, was zu einem Flackern vor dem Scrollen führt. Dieses Standardverhalten wird durch die preventDefault() Methode unterbunden. Beispiel zum Flackern

var ziel = $(this).attr("href");

Um gleich einfacher auf das Link-Ziel zugreifen zu können, wird dieses in die Variable „ziel“ geschrieben.

$('html,body').animate({

Nun wählen wir den Bereich aus, den wir animieren wollen, die komplette Seite, als html. Da der Browser Safari den html-selektor nicht erkennt, muss noch „body“ angehängt werden. Die Seite wird nun mit der animate() Funktion animiert.

scrollTop: $(ziel).offset().top

Die scrollTop() Funktion scrollt zu dem Wert, der ihr übergeben wird. scrollTop(400) würde die Seite beispielsweise um 400 Pixel nach unten scrollen. Die genaue Position des Ankers, zu dem wir scrollen wollen, bekommen wir mit der offset() Funktion. Mit ihr kann die genaue Position eines Elementes von links und von oben im Dokument ermittelt werden. Da wir hier nur den Abstand von oben benötigen, nutzen wir „offset().top“.

}, 2000 , function (){location.hash = ziel;});
});
return false;
});

Die Zahl nach der Klammer gibt die Dauer der Animation in Millisekunden an (duration). Jetzt kommt die meiner Meinung nach wichtigste Funktion ins Spiel. Die Callback-Funktion der Animation wird ausgeführt, sobald die Animation vollständig beendet ist, also wenn die Seite zum gewünschten Anker gescrollt ist. Diese Funktion brauchen wir, da wir ja das Standardverhalten des Links unterdrückt haben, also den Sprung zum Anker und die Anpassung der URL. Mit location.hash setzen wir eine neue Textmarke und passen so die URL an. Ohne diese Funktion würde der Anker beim Klick nicht an die URL angehängt.

Beispiel

Ausgangs URL
www.url.de

Nach Sprung zu einem Anker OHNE location.hash
www.url.de

Nach Sprung zu einem Anker MIT location.hash
www.url.de#anker

Fazit

Es darf über die Notwendigkeit dieses Kniffs gestritten werden, ich persönlich halte ihn für einen ansprechenden und interessanten Effekt, der in vielen Seiten gut zur Wirkung kommt und dem Benutzer vielleicht auch besser verdeutlicht, wo er denn nach einem Klick landet. ™

Ergänzung für Opera

Da ich durch den Kommentar von NightWalker auf das Fehlverhalten in Opera hingewiesen wurde ist hier nun der für Opera optimierte Code.

$(document).ready(function() {
	$('a[href*=#]').bind("click", function(event) {
		event.preventDefault();
		var ziel = $(this).attr("href");
                
                if ($.browser.opera) {
                    var target = 'html';
                }else{
                    var target = 'html,body';
                }

		$(target).animate({
			scrollTop: $(ziel).offset().top
		}, 2000 , function (){location.hash = ziel;});
});
return false;
});

Opera Demo im neuen Fenster

Kategorien
Webdesign

jQueryUI – beeindruckende Interaktionen, Widgets und Effekte

Basierend auf dem JavaScript-Framework jQuery stellt jQueryUI beeindruckende Interaktionen, Widgets, Effekte sowie einen „Themeroller“ bereit. Einige der Interaktionen und Widgets sind alte Bekannte aus Betriebssystemen und Desktop-Programmen. Mit dem Themeroller kann auf einfache Weise eine CSS-Datei erzeugt werden, um die einzelnen Komponenten zu formatieren. Um die Dateigröße gering zu halten, können die Komponenten im Download-Bereich einzeln ausgewählt werden.

Ich möchte einen kurzen Überblick der Grundfunktionen geben und nicht jede Funktion mit all ihren Möglichkeiten detailliert beschreiben. Für Interaktionen, Widgets und Effekte sind Beispiele auf der jQueryUI Seite verlinkt, diese bieten auf der rechten Seite die Auswahl von weiteren Beispielen.

jQueryUI - Beispiel Auswahl
jQueryUI - Beispiel Auswahl

Interaktionen

Die folgenden Interaktionen werden bereitgestellt.

  • Dragable
  • Dropable
  • Resizable
  • Selectable
  • Sortable
  • Dragable

    Alle DOM-Elemente können mit gedrückter Maustaste verschoben werden.

    Beispiele zu Dragable

  • Dropable

    Alle DOM-Elemente können mit gedrückter Maustaste verschoben werden und auf einem anderen „fallen“ gelassen werden. (Drag and Drop – Ziehen und Fallenlassen)

    Beispiele zu Dropable

  • Resizable

    Die Größe aller DOM-Elemente kann verändert warden. Mit gedrückter Maustaste kann der rechte oder untere Rand sowie die rechte untere Ecke gezogen oder geschoben werden.

    Beispiele zu Resizable

  • Selectable

    Jedes DOM-Element oder eine Gruppe von DOM-Elementen kann durch einen Mausklick ausgewählt werden. Durch Gedrückthalten der STRG (CTRL) Taste können mehrere Elemente ausgewählt werden.

    Beispiele zu Selectable

  • Sortable

    Eine Gruppe von DOM-Elementen kann sortiert werden. So kann ein Eintrag in einer Liste per Drag and Drop an eine andere Stelle der Liste gezogen werden und die Liste passt sich dementsprechend an.

    Beispiele zu Sortable

Widgets

Die folgenden Widgets werden bereitgestellt.

  • Accordion
  • Datepicker
  • Dialog
  • Progressbar
  • Slider
  • Tabs
  • Accordion

    Eine Datenstruktur aus Überschriften und Inhaltsbereichen wird so dargestellt, dass für alle Überschriften aber jeweils nur ein Inhaltsbereich einer Überschrift angezeigt wird. Durch Mouseover oder Klick auf eine Überschrift wird der entsprechende Inhaltsbereich eingeblendet und der zuvor angezeigte Inhaltsbereich wieder ausgeblendet.

    Beispiele zu Accordeon

  • Datepicker

    Durch einen Klick in ein Input-Formularfeld öffnet sich ein Interaktiver Kalender, mit dem sich auf einfache Weise ein Datum auswählen und in das Feld einfügen lässt.

    Beispiele zu Datepicker

  • Dialog

    Es werden Dialogfenster erzeugt, wie sie aus Betriebssystemen oder Desktop-Anwendungen bekannt sind.

    Beispiele zu Dialog

  • Progressbar

    Ein Fortschritts- oder Ladebalken zur Anzeige des aktuellen Fortschrittes in Prozent. Dieser Ladebalken kann/sollte nur verwendet werden, wenn das Ereignis 100% erreichen kann, das heißt er sollte nicht vollständig gefüllt/geladen sein und sich dann wieder von neuem Füllen/Laden.

    Beispiele zu Progressbar

  • Slider

    Dieses Widget erzeugt einen Schiebe-Regler, mit dem Werte oder Wertbereich mittels Maus und Pfeiltasten ausgewählt werden können.

    Beispiele zu Slider

  • Tabs

    Aus Links werden Tabs ,auch Registerkarten oder Karteireiter genannt generiert, mittels derer zwischen logisch gegliederter Inhaltsbereiche gewechselt werden kann.

    Beispiele zu Tabs

Effekte

Die folgenden Effekte werden bereitgestellt.

  • Add Class
  • Remove Class
  • Animate
  • Effect
  • Hide
  • Show
  • Switch Class
  • Toggle
  • Toggle Class
  • Add Class

    Einem Element wird eine neue Klasse zugewiesen. Soweit nichts Besonderes, jedoch werden die Eigenschaften der neuen Klasse nicht einfach angezeigt, sondern animiert.

    Beispiele zu Add Class

  • Remove Class

    Die Klasse eines Elementes wird entfernt. Auch hier geschieht das animiert.

    Beispiele zu Remove Class

  • Animate

    Mit diesem Effekt lassen sich die Eigenschaften von Elementen wie Farbe oder Größe animieren.

    Beispiele zu Animate

  • Effect

    Verschiedene Effekte wie „Explodieren“ oder „Hüpfen“ können auf Elemente angwandt werden. Die zur Verfügung stehenden Effekte können alle im Beispiel getestet werden.

    Beispiele zu Effect

  • Hide

    Elemente können über verschiedene Effekte ausgeblendet werden. Die zur Verfügung stehenden Effekte können alle im Beispiel getestet werden.

    Beispiele zu Hide

  • Show

    Elemente können über verschiedene Effekte eingeblendet werden. Die zur Verfügung stehenden Effekte können alle im Beispiel getestet werden.

    Beispiele zu Show

  • Switch Class

    Zwei Klassen können als Argumente übergeben werden, die Funktion tauscht dann die erste übergebene Klasse gegen die zweite.

    Beispiele zu Switch Class

  • Toggle

    Elemente können über verschiedene Effekte eingeblendet und wieder ausgeblendet werden. Die zur Verfügung stehenden Effekte können alle im Beispiel getestet werden.

    Beispiele zu Toggle

  • Toggle Class

    Dieser Funktion wird eine Klasse übergeben, die dem jeweiligen Element hinzugefügt wird, wenn das Element diese Klasse noch nicht hat, und entfernt die Klasse, wenn das Element diese Klasse hat.

    Beispiele zu Toggle Class

ThemeRoller

Die jQueryUI-Elemente werden mittels CSS formatiert. Um die Formatierung zu erleichtern, bietet jQueryUI den ThemeRoller an, eine Web-Oberfläche, mit der man sich auf einfache Weise ein eigenes Theme zusammenstellen und die entsprechende CSS-Datei einfach herunterladen kann. Alle Komponenten werden dargestellt und können über eine Auswahl auf der linken Seite angepasst werden, die Änderungen werden sofort übernommen, somit kann das Ergebnis sofort kontrolliert werden. Zusätzlich können noch fertige Themes aus einer Galerie heruntergeladen und bearbeitet werden.

Download

Im Downloadbereich können die gewünschten Komponenten einzeln ausgewählt werden, einige Komponenten setzen andere voraus, auf eventuelle Konflikte weist ein Dialog hin.

jQueryUI - fehler
jQueryUI - fehler

Des weiteren kann noch das gewünschte Theme sowohl die Version ausgewählt werden. Die aktuelle Dateigröße wird ebenfalls angezeigt.

Fazit

Zusammenfassend lässt sich sagen, dass jQueryUI viele Interessante und oft benötigte Komponenten in einem ansprechenden Design bereitstellt. Meine persönliche Lieblingskomponente ist das „Datepicker Widget“, da sich mit ihm auf wirklich einfache Weise die Benutzerfreundlichkeit eines Formulars steigern lässt.

Ich möchte noch einmal darauf hinweisen, dass es sich hier lediglich um eine Übersicht handelt und nicht jede Komponente im Detail beschrieben ist. ™

Kategorien
JavaScript & jQuery Programmierung

jQuery (und andere Frameworks) direkt via Google Code einbinden

Jedem der jQuery schon einmal benutzt hat ist die lokale Einbindung mittels <script type=“text/javascript“ src=“js/jquery-1.3.2.js“></script> bekannt. Es gibt allerdings eine Möglichkeit das Framework zu nutzen ohne es lokal zu speichern. Google Code stellt mit den Google AJAX Libraries API das jQuery Framework in der aktueller Version, sowie ältere Ausgaben zum direkten Einbinden bereit. Das spart Traffic und verringert die Ladezeit. jQuery kann auf zwei Arten eingebunden werden.

Einbinden mit direktem Link

Diese Art der Einbindung stellt sich als vertraut dar. In dem Aufruf

<script type="text/javascript" src=" "></script>

wird als Quelle (src=) nicht wie gewohnt der Pfad zum lokalen Speicherort von jQuery angegeben, sondern die URL von Google.

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

Somit sieht der komplette Aufruf wie folgt aus:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Live Demo im neuen Fenster

Durch den direkten Link ist nur eine Anfrage an den Server notwendig um jQuery einzubinden, somit ist diese Methode (in meinen Tests) schneller als die unten vorgestellte Methode mit google.load().  Auf diese weiße lassen sich natürlich auch andere Versionen von jQuery einbinden. Google stellt momentan (Stand 22.06.09) folgende Versionen bereit:

Version 1.2.3
http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js
Version 1.2.6
http://ajax.googleapis.com/ajax/libs/jquery/1.3.6/jquery.min.js
Version 1.3.0
http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js
Version 1.3.1
http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js
Version 1.3.2
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

Einbinden mit google.load()

Die andere Möglichkeit ist die Einbindung mittels google.load(). Hier wird zuerst durch den folgenden Befehl die AJAX Libraries API von Google eingebunden um die google-load() Funktion nutzen zu können.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Nun kann jQuery folgendermaßen eingebunden werden.

<script type="text/javascript">
// jQuery laden
google.load("jquery", "1.3.2");
</script>

Live Demo im neuen Fenster

Da hier zuerst die AJAX Libraries API von Google geladen wird sind zwei Anfragen an den Server notwendig, was diese Methode etwas langsamer macht als einen direkten Link.  Durch den direkten Link ist nur eine Anfrage an den Server notwendig um jQuery einzubinden, somit ist diese Methode (in meinen Tests) schneller als die unten vorgestellte Methode mit google.load(). Auch hier stehen natürlich die folgenden Versionen zur Verfügung.

Version 1.2.3
google.load(„jquery“, „1.2.3“);
Version 1.2.6
google.load(„jquery“, „1.2.6“);
Version 1.3.0
google.load(„jquery“, „1.3.0“);
Version 1.3.1
google.load(„jquery“, „1.3.1“);
Version 1.3.2
google.load(„jquery“, „1.3.2“);

Diese Methode bietet sich vor allem an wenn mehrere Frameworks eingebunden werden sollen. Die google.load() Funktionen können einfach nacheinander ausgeführt werden. Beispiel:

<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.2");
google.load("mootools", "1.2.3");
</script>

Versionsauswahl

Bisher war die Rede davon die gewünschte Version durch die komplette Versionsnummer auszuwählen, Google bietet jedoch noch andere Möglichkeiten. Wird anstatt der Vollständigen Nummer „1.2.3“ nur „1.2“ angegeben wählt Google die die neuste verfügbare Version dieses Zweiges(1.2) aus, hier also „1.2.6“. Somit bewirkt die Angabe von „1“ dass hier die Version „1.3.2“ eingebunden wird. Diese Versionssemantik funktioniert bei beiden Arten der Einbindung.

Google stellt nicht nur jQuery zur Verfügung

jQuery ist jedoch nicht das einzige Framework, dass sich von Google einbinden lässt. Google stellt momentan(Stand 22.06.09) folgenden Frameworks zur Verfügung:

  • jQuery
  • jQuery UI
  • Prototype
  • script.aculo.us
  • MooTools
  • Dojo
  • SWFObject
  • Yahoo! User Interface Library (YUI)
  • Ext Core

Die Einbindung der verschiedenen Frameworks geschieht auf die gleiche Weise wie sie hier exemplarisch für jQuery beschrieben wurde. (sl)

Kategorien
Webdesign

Baumnavigation mit jQuery

Die Baumnavigation ist jedem aus unzähligen Programmen bekannt, in denen sie hauptsächlich zur Dateiverwaltung verwendet wird. Im Web wird sie eher selten verwendet und dann meist mit PHP erzeugt, was bei langen Ladezeiten die Navigation spröde macht. Es geht aber auch anders, mit Hilfe von jQuery lässt sich einfach eine ansprechende Baumnavigation erstellen, die auch bei deaktiviertem JavaScript funktionsfähig bleibt. Live Demo im neuen Fenster

Die Baumstruktur

Die Baumansicht in Konqueror
Eine Baumansicht in Konqueror

Ein Baum ist, grob gesagt, eine Liste, in der jeder Eintrag beliebig viele Unterpunkte haben kann, die meist durch Klicken des Eintrages auf- oder zugeklappt werden. Somit liegt es nahe eine Baumnavigation im Web als unsortierte Liste zu strukturieren.

<ul id=“baum“
	<li><span class="ausklappen">Ebene 1 Punkt 1</span>
		<ul>
			<li><span class="ausklappen">Ebene 2 Punkt 1</span>
				<ul>
					<li><a href="#">Ebene 3 Punkt 1</a></li>
					<li><a href="#">Ebene 3 Punkt 2</a></li>
					<li><a href="#">Ebene 3 Punkt 3</a></li>
				</ul>
			</li>
			<li><a href="#">Ebene 2 Punkt 3</a></li>
			<li><a href="#">Ebene 2 Punkt 4</a></li>
		</ul>
	</li>
	<li><span class="ausklappen">Ebene 1 Punkt 2</span>
		<ul>
			<li><a href="#">Ebene 2 Punkt 1</a></li>
			<li><a href="#">Ebene 2 Punkt 2</a></li>
			<li><a href="#">Ebene 2 Punkt 3</a></li>
		</ul>
	</li>
	<li><a href="#">Ebene 1 Punkt 3</a></li>
	<li><a href="#">Ebene 1 Punkt 4</a></li>
</ul>

Ich habe hier 3 Ebenen angelegt, mehrere Ebenen sind natürlich nach dem gleichen Schema ergänzungsfähig.

Um den Baum mit CSS eindeutig ansprechen zu können,, bekommt er die id=“baum“. Die Ebenen, die Unterpunkte enthalten und ausgeklappt werden können, sind durch einen span-Tag gekennzeichnet.

    <span class="ausklappen"></span>

So erhalten wir eine Baumansicht im „Ausgeklappten Zustand“ auch für Nutzer mit deaktiviertem JavaScript.

Baum als Unsortierte Liste ohne Formatierung
Baum als unsortierte Liste ohne Formatierung

Einsatz von JQuery

Bevor wir jQuery einsetzen können, müssen wir es  herunterladen. Die aktuelle Version gibt es bei Google Code. Wir erhalten derzeit die Datei jquery-1.3.2.min.js, die hier in den Ordner /js des Arbeitsverzeichnisses kopiert wird. Eingebunden wird jQuery nun durch folgenden Befehl im head-Bereich eingebunden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Baumnavigation mit jQuery</title>
	<!-- Hier der Befehl zum einbinden von jQuery -->
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
</head>
<body>

Nun steht uns jQuery zur Verfügung und wir beginnen mit unserer Baum-Funktion.

Die Baum-Funktion

Wir erstellen die Datei „Baumnavigation.js“, speichern sie im Ordner /js ab und binden sie mit folgendem Befehl im head-Bereich ein.

<script type="text/javascript" src="js/BaumNavigation.js"></script>

Die Datei BaumNavigation.js sieht so aus:

$(function() {
	$('span.ausklappen').next().hide();
	$("span.ausklappen").before("<span>+ </span>");
	$("span.ausklappen").css("cursor", "pointer");
	$("span.ausklappen").click(function() {
		$(this).next().slideToggle("slow");
		if ($(this).prev(this).text() == "+ " )
			$(this).prev(this).replaceWith("<span>- </span>");
		else if ($(this).prev(this).text() == "- " )
			$(this).prev(this).replaceWith("<span>+ </span>");
	});
});
$('span.ausklappen').next().hide();

In dieser Zeile wird der Span-Tag ausgewählt, den wir den aufklappbaren Ebenen zugewiesen haben, ausgewählt, mit .next() das nächste Element im DOM und mit .hide() diese versteckt. Somit werden nur noch die 1. Ebenen angezeigt.

$("span.ausklappen").before("<span>+ </span>");

Hier wird wieder der Span-Tag ausgewählt und mit .prepend(„+ “) ein Plus Zeichen INNERHALB dieses Tags eingefügt. Hier kann auch eine Grafik eingefügt werden.

$("span.ausklappen").css("cursor", "pointer");

Um die ausklappbaren Ebenen als solche besser erkennbar zu machen, wird wie oben der Span-Tag ausgewählt und für diesen mit .css(„cursor“,“pointer“) der Mauszeiger auf die gewohnte Hand mit zeigendem Finger wie bei einem Link umgestellt, sobald man mit der Maus darüberfährt.

$("span.ausklappen").click(function() {

Nun kommen wir zur Ausklappfunktion, die mit .click(function(), wie sich vermuten lässt, ausgeführt wird, wenn man auf den Span-Tag klickt.

$(this).next().slideToggle("slow");

Innerhalb dieser Funktion greifen wir mit $(this) auf den Span-Tag mit der Klasse „aufklappen“ zu. Mit next() wählen wir das nächste Element im DOM aus, da dieses angezeigt oder ausgeblendet werden soll. Die slideToggle()-Funktion lässt nun die Unterpunkte langsam nach unten „gleitend“ erscheinen. Mit dem Wert „slow“ wird die Geschwindigkeit dieses Effekte festgelegt. Mögliche Werte hier sind „slow“, „normal“, oder „fast“, sowie eine Angabe in Millisekunden (Bsp.: 1000 ).

if ($(this).prev(this).text() == "+ " )
			$(this).prev(this).replaceWith("<span>- </span>");
		else if ($(this).prev(this).text() == "- " )
			$(this).prev(this).replaceWith("<span>+ </span>");

Mit $(this) wird auf den Span-Tag zugegriffen, .prev(this) wählt von den Tag vor diesem Span-Tag aus, also hier den Span-Tag mit dem Plus-Zeichen und mit .text() greifen wir auf den Text innerhalb dieses Tags zu.
Wenn dieser Text „+ “ ist, so wird mit

$(this).prev(this).replaceWith("<span>- </span>");

der gesamte Tag ersetzt.

Durch das Entfallen der .text()-Funktion wird hier auf den gesamten Tag samt Inhalt zugegriffen und durch einen neuen Tag ersetzt, so wird aus dem Plus ein Minuszeichen. Der Rest der Schleife ist, denke ich, selbsterklärend, wenn der Text „+“ ist, dann ersetze ihn durch „–“,  wenn der Text „–“ ist, ersetze ihn durch „+“.

Das war schon alles, um den Baum zu „animieren“. Nur die Darstellung ist nicht wirklich ansprechend, deshalb erweitern wir das Beispiel noch um ein bisschen CSS.

Baumansicht mit jQuery im Ausgeklappten Zustand ohne CSS Formatierung
Baumansicht mit jQuery im ausgeklappten Zustand ohne CSS-Formatierung

CSS

#baum
{
margin:0 0 0 0;
list-style-type:none;
padding:0 0 1em 0;
width:25em;
font: .9em/1.5em Arial, Tahoma, Verdana, sans-serif;
}
#baum  li
{
margin:0.5em 0.5em 0.5em 0.5em;
list-style-type:none;
background:#F0F0F0;
padding:0.1em;
}
#baum  li li
{
margin:0.5em 0.5em 0.5em 1.5em;
background:#FFFFFF;
}
#baum  li li li
{
background:#F0F0F0;
}
#baum a
{
text-decoration:none;
}

Über die ID „baum“ können wir nun per CSS einfach auf den Baum zugreifen und die einzelnen Elemente gestalten. Auf diese Weise erhalten wir eine einfache Baumnavigation die beliebig formatiert und gestaltet werden kann und die auch ohne JavaScript und CSS  funktionsfähig bleibt. ™

Baumnavigation mit CSS und jQuery teilweise ausgeklappt
Baumnavigation mit CSS und jQuery teilweise ausgeklappt

Vollständig ausgeklappter Baum
Baumnavigation mit CSS und jQuery teilweise ausgeklappt

Material zum Download