Schlagwörter

, , , ,

Ich möchte einfach mal meine Top 10 der jQuery-Plugins vorstellen. Ich habe im Moment aber (noch) nicht alle im Einsatz.

Wichtig ist für mich vor allen Dingen, dass meine Seiten, wenn ich Plugins eingebaut habe, auch ohne diese noch problemlos funktionieren und nutzbar sind, also wirklich nur einen Mehrwert bieten, aber nicht ‚lebensnotwendig‘ sind.

1. Tablesorter

Tablesorter ist ein Plugin, das eine Tabelle zur Laufzeit sortierbar macht, das heißt ohne diese z.B. mittels PHP neu generieren und sortieren zu müssen.

Außerdem ist es möglich, der Tabelle ‚Zebrastreifen‘ zur besseren Lesbarkeit zu verpassen.

Alles in allem eines meiner Lieblingsplugins, da es überaus nützlich ist und nicht nur Spielerei.

Probleme gibt es bei unserem Datumsformat, da TT.MM.JJJJ nicht vernünftig sortiert werden kann (logischerweise nach Tag als erstes), da wäre vermutlich JJJJ-MM-TT als Datumsformat sinnvoller.

Ohne Javascript wird die Tabelle als ’normale Tabelle‘ angezeigt.

Einsatzbeispiele bei mir:
http://www.angelofdark.de/link.php
http://www.samael-web.de/tour.php
http://freewarstyles.angelofdark.de/download.php

Quelle:
http://plugins.jquery.com/project/tablesorter

2. Treeview

Treeview kann dazu verwendet werden, bei sehr langen Listen die Unterlisten quasi ‚einzuklappen‘ wie bei einem Verzeichnisbaum. Dadurch werden solche Listen sehr viel übersichtlicher und der Besucher kann selbst entscheiden, welche Unterliste er braucht und deshalb aufklappen möchte.
Weiterhin können auch alle Unterlisten gleichzeitig auf- und zugeklappt werden.
Ist Javascript deaktiviert, wird die Liste ganz normal aufgeklappt angezeigt.

Einsatzbeispiel bei mir:
http://www.angelofdark.de/sitemap.php
http://www.samael-web.de/bio.php

Quelle:
http://plugins.jquery.com/project/treeview

3. Dynacloud

Mit Dynacloud lassen sich Tagwolken erstellen. Das Plugin liest einen angegebenen Bereich auf der Seite aus und generiert daraus eine Tagwolke.

Leider hat es noch ein paar kleine Macken, die neueste Version kommt zwar mittlerweile mit Umlauten zurecht, hat aber dafür wieder Probleme,  z.B. Tabellenzellen als Wortbegrenzung anzuerkennen. Klickt man auf ein Wort, wird dessen Vorkommen im Text markiert.
Bei deaktiviertem Javascript bleibt die Tagwolke leer, was auch nicht soo schlimm ist.

…habe ich im Moment nicht mehr im Einsatz…

Quelle:
http://plugins.jquery.com/project/dynacloud

4. Heatcolor

Dieses Plugin ist eigentlich nur Spielerei, wie ich finde, aber es ist schööön😉 Mit Heatcolor lassen sich z.B. Tabellen regenbogenfarbig einfärben (oder auch anders).
Ohne JS bleibt die Tabelle halt unbunt.

Einsatzbeispiel bei mir:
http://www.angelofdark.de/link.php

Quelle:
http://plugins.jquery.com/project/HeatColor

5. Colorbox

Colorbox ist ein Lightbox-Plugin. Und das erste, wo ich überhaupt keine Probleme beim Einbau hatte und was sofort funktionierte *g*
Ohne JS werden die Grafiken normal geöffnet.

Update: übrigens lassen sich mit dieser Lightbox nicht nur Bilder gut anzeigen, sondern es werden auch andere Medientypen unterstützt, zum Beispiel Flash-Videos. So lassen sich auch Videos von Youtube sehr schön auf der eigenen Webseite abspielen, ohne dass man hunderte eingebettete Videos hätte – denn es genügt ja ein Link.

Einsatzbeispiel bei mir:
http://www.samael-web.de/pics_190408.php

Außerdem verwende ich die 2. Version der Colorbox für die Youtube-Videos auf meiner Samael-Seite, Beispiel hier:

http://www.samael-web.de/videos.php

Quelle:
http://plugins.jquery.com/project/ColorBox

6. (mb)MaskedGallery

(mb)MaskedGallery generiert aus Bildern eine extrem schicke ‚Diashow‘. Der Rahmen ist ein teiltransparentes PNG. Das sind dann schonmal so Sachen, wofür man früher unbedingt Flash brauchte, allerdings ist es ein wenig rechenintensiv. Und für den IE6 muss mal wieder gebastelt werden wegen transparentes PNG^^

Aber besonders der Modus ‚random‘, wo eine Bildershow selbstständig durchläuft, hat es mir angetan. Es kann aber auch manuell weitergeschaltet werden.
Außerdem gefiel mir nicht wirklich, dass bei ausgeschaltetem Javascript alle Bilder angezeigt werden, die dann eventuell das Layout sprengen.

Also habe ich etwas rumgetrickst und bei ausgeschaltetem Javascript wird eben gar nichts angezeigt, ist zumindest da, wo ich es eingebaut hatte, nicht essentiell wichtig.

Im Moment habe ich allerdings kein Beispiel im Netz stehen, mal sehen…habe es für meine Belegarbeit an der BA benutzt, das Ergebnis war echt klasse😉

Quelle:
http://plugins.jquery.com/project/mbmaskedgallery

7. Rating

Ein Star-Rating-Plugin für jQuery, das aus Radiobuttons ein Sterne-Bewertungssystem macht. Einfach und schick.
Ohne JS sind da die Radiobuttons.

Habe es allerdings noch nicht im Einsatz, dazu muss ich erstmal meine neue Galerie fertigprogrammiert haben. (Großklappe, erstma überhaupt anfangen -.-)

Quelle:
http://plugins.jquery.com/project/star-rating

8. Expander

Expander habe ich auch noch nicht im Einsatz, allerdings ist es auch ganz hübsch. Könnte man gut verwenden, um überlange Texte gekürzt darzustellen.
Ohne JS ist der gesamte Text sichtbar.

Quelle:
http://plugins.jquery.com/project/expander

9. Stepcarousel

Ist eine Art Bildergalerie, wo die Bilder sich im Kreis bewegen und je nach Mausposition in unterschiedlichen Geschwindigkeiten und Richtungen.

Allerdings leider seeeehr rechenintensiv. Mein Schlepptop kriegt da immer Asthmaanfälle von…

Ohne Javascript werden alle Bilder angezeigt.

Einsatzbeispiel bei mir:
http://www.art-of-designs.de

Quelle:

http://plugins.jquery.com/project/stepcarouselviewer

10. pngfix

Passt gut zur mbMaskedGallery, ist ein Plugin, das die Probleme des IE6 mit transparenten PNGs fixt.

Quelle:
http://plugins.jquery.com/project/pngFix

Update:

11. bxCarousel

Damit kann man eine unsortierte Liste in eine Art ‚Slideshow‘ verwandeln, z.B. um in Bildergalerien Platz zu sparen und die großen Bilder in einer Lightbox aus der Slideshow heraus aufzurufen.

Ich verwende es auf meiner Samael-Seite im Downloadbereich als Navigation, die Bilder im oberen Bereich sind mit Ankern versehen und wenn man draufklickt, springt man zum entsprechenden Teil der Seite.

Ohne Javascript wird die unsortierte Liste angezeigt (bei mir per display:inline nebeneinander).

Einsatzbeispiel:

http://www.samael-web.de/downloads.php

Quelle:

http://plugins.jquery.com/project/bxcarousel