JQuery Script Sammlung

Ähnlich wie die Verwendung von Mootools in Joomla, verwendet beispielsweise Wordpress die Bibliothek JQuery. JQuery vereinfacht analog Mootools die Anwendung von JavaScript, was sich insbesondere auf die so beliebten Web 2.0 Effekte auswirkt (Info: wer sich für die genauen Unterschiede von Mootools und JQuery interessiert, der findet hier weitere Hintergründe).

Passend eingesetzt ergeben sich nicht nur auf modernen Seiten sehr nützliche und praktische Anwendungen, die dem Nutzer die Anwendung einer Seite (oder Webanwendung) erleichtert, die Bedienung vereinfacht oder die Usability erhöht.

Nachfolgend findet Ihr eine kleine Auswahl an JQuery Scripte und Tutorials, die sich gut an viele Designs anpassen lassen.

Sliding Panel

Das Script ist eigentlich für ein Login-Panel gedacht, das vom oberen Bildschirmrand ein- und ausfadet. Es kann leicht jede andere Art von Content aufnehmen und so ein netter Effekt auf der Seite werden.

Link: http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/

Mega Drop Down Menu

Ist ein sehr schön gemachtes Plugin für ein Drop Down Menü, das ohne Probleme bei entsprechender Gestaltung auch eine größere Anzahl an Links aufnehmen kann.

Link: http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/

JQuery lightBox Plugin

Ist eine Nachbildung des ursprünglichen Lightbox Scriptes als Plugin für JQuery. Immer wieder schön und eigentlich auf keiner Seite mehr wegzudenken (wer will große Bilder noch ein einem PopUp sehen?)

Link: http://leandrovieira.com/projects/jquery/lightbox/

Fancy Box

Ähnlich dem bereits vorgestellten lightBox Plugin, ist das Fancy Box Plugin dazu gedacht entsprechende Informationen in einer Modal-Box darzustellen. Im Gegensatz zum lightBox Plugin lassen sich aber mehr Inhalte darstellen (auch Videos, HTML etc.)

Link: http://fancybox.net/
Lizenz: MIT / GPL

Simple Tabs

Normale Tabs für die Website, in der sich beispielsweise Formulare oder Produktinformationen strukturiert darstellen lassen.

Link: http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/

Simple Page Peel Effekt

Der bekannte Page Peel Effekt als JQuery Plugin. Neben Werbung kann man natürlich auch andere Themen und Dinge in eigener Sache darstellen.

Link: http://www.sohtanaka.com/web-design/simple-page-peel-effect-with-jquery-css/

Image Rotator

Mit dem Image Rotator lassen sich, z. B. auf der Startseite verschiedene Artikel abwechselnd darstellen. Sehr schöner, moderner Effekt, wie ich finde…

Link: http://designm.ag/tutorials/image-rotator-css-jquery/

Facebook Style Autosuggest

Sehr nettes Script, bei dem ein Suchfeld das bekannte Style/Verhalten des Facebook Suchfeldes annimmt.

Link: http://web2ajax.fr/examples/facebook_searchengine/

Tipsy

Leichtgewichtiges und einfach anzuwendendes Plugin um Tooltips anzuzeigen. Die Tooltips sind (bei Verwendung des mitgelieferten CSS Styles), leicht transparent

Link: http://plugins.jquery.com/project/tipsy / http://onehackoranother.com/projects/jquery/tipsy/

Autobox2

Autobox2 ist ebenfalls ein Script mit entsprechendem Vorschlag zu den eingegebenen Begriffen. Unterschied ist allerdings die Historie, die entsprechend in schön designten Boxen fortgeschrieben wird.

Link: http://www.bigredswitch.com/blog/2008/12/autobox2/

JQuery Accordion Menu

Menu Plugin mit dem bekannten Accordion Effekt

Link: http://www.i-marco.nl/weblog/jquery-accordion-menu/

UI Tabs

Ein weiteres Plugin zur Darstellung der Tabs mit entsprechendem Content

Link: http://stilbuero.de/jquery/tabs_3/

Superfish Menu

Drop Down Menu mit Multi-Level Unterstützung (wird übrigens auch hier auf dem astBlog verwendet)

Link: http://users.tpg.com.au/j_birch/plugins/superfish/

idTabs

Plugin zur einfachen Darstellung von Tabs mit Hilfe von JQuery. Im Gegensatz zu anderen Tab Scripten gibt es hier eine Art Schnittstelle um eigene Darstellungen umzusetzen.

Link: http://www.sunsean.com/idTabs/

Multiple File Upload (inkl. Progress-Bar)

Ein Script das den gleichzeitigen Upload mehrerer Files erlaubt (verwendet das Flash basierte Upload Plugin!)

Link: http://webdeveloperplus.com/jquery/multiple-file-upload-with-progress-bar-using-jquery/

Lava Lamp Menu

Bei Mootools noch als Fancy Menu bekannt. Ein netter Menüeffekt, bei dem sich die Hoveroptik fließend der größe anpasst.

Link: http://www.queness.com/post/530/simple-lava-lamp-menu-tutorial-with-jquery

Kwicks for JQuery

Ein horizontales Menü, mit sliding Effekt

Link: http://aext.net/2009/08/kwicks-for-jquery-and-an-awesome-horizontal-animated-menu/

JQuery Link Nudging Plugin

Ein Plugin das die Links beim Überfahren entsprechend wegsliden lässt.

Link: http://davidwalsh.name/jquery-link-nudge

Scroll to Top

Mittlerweilen in Version 3.x vorliegendes Script um eine Seite per Klick wieder stylisch nach oben scrollen zu lassen (anstatt nach oben zu springen).

Link: http://blog.ph-creative.com/post/jQuery-Plugin-Scroll-to-Top-v3.aspx

Form Validation

Ein Plugin um die Formulareingaben per AJAX zu prüfen und entsprechende Hinweise auszugeben.

Link: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Das sollte es mal gewesen sein mit meiner kleinen Link-Sammlung. Viel Spaß damit, vielleicht könnt Ihr ja das eine oder andere verwenden.

Verwandte astBlog Beiträge:

• CSS-Frameworks
• Joomla 1.6 – Ein Ausblick
• Neue Version der SexyBookmarks
• Plugin Usage
• HTML 5 Cheat Sheet