jQueryAdmin - Lieblings jQuery Plugins einfach nutzen! Martin Freudenreich

Grundlegendes vorweg

Alles zum Thema jQueryAdmin gibt es, wie schon erwähnt auf den Seiten der Programmiererin Bianka Martinovic unterteilt in folgende Schwerpunkte:

Dieses Modul ist bis auf ein paar Kleinigkeiten "selbsterklärend" und nicht schwer zu bedienen. Auch User, die sich nicht zu sehr mit Javascript und jQuery selbst beschäftigen, aber einen netten Effekt oder eine Funktionalität für ihre Seiten brauchen, können schnell zum Ziel gelangen.
Profis dagegen können ebenso schnell alle Feinheiten ausnutzen und z.B. bestimmen wo und mit welchen Einstellungen Plugins ect. geladen und eingebunden werden.

Zum Ziel in 3 Schritten

Als Beispiel nehme ich das Corners Plugin, welches sehr beliebt ist um Runde Ecken einfach per JS zu erzeugen. Damit ich dieses jQuery Plugin mit dem jQueryAdmin nutzen kann braucht es nicht viel - also fangen wir gleich an.

Schritt 1 - Plugin besorgen

"Die 50 besten jQuery Plugins 2010" - "Die neuesten jQuery Plugins" - und wie sie alle heisen - so findet man in zahlreichen Blogs allerlei mehr oder weniger nützliche jQuery Plugins. Manche direkt nur als JS Datei, manche als .zip Datei mit einigen Beispielen. Wichtig ist für uns nur was zum reinen Betrieb des Plugins wirklich nötig ist. Also alle JS Dateien und zusätzlich (falls vorhanden) alle CSS und Bilddateien die benötigt werden. Zum Beispiel sind bei Lightboxscripten oft Bilder für Richtungspfeile, Buttons und andere Darstellungsrelevante Teile mit dabei.

Gut soweit - die aktuelle Corners Datei Version 2.09,
die ich in diesem Tutorial verwenden gibt es hier.

Schritt 2 - Preset zusammenstellen

Zu den Dateien des gewünschten jQuery Plugins brauchen wir für ein nutzbares Preset nur zwei Datein zusätzlich erstellen. Zum einen eine default.preset Datei in der wir die benötigten Scripte und CSS Dateien schreiben und auch die Einstellungen für das Plugin selbst eintragen können. Zum Anderen eine readme.html Datei für etwaige Hilfestellungen für andere, oder auch für sich selbst, diese readme.html ist im Backend des jQueryAdmin aufrufbar. Zum eigentlichen "Betrieb" des Plugins brauchen wir nur die default.preset Datei, auf die readme.html werde ich am Schluß noch besser eingehen.

Was kommt in die default.preset Datei eigentlich?

Die default.preset Datei ist kein großes Zauberwerk. Dort wird schlicht alles eingebunden, was zum Betrieb des Plugins erforderlich ist. Das sind zum einen CSS und JS Dateien, die geladen werden müssen und zum anderen jQuery Javascript Code für die Einstellungen des jeweiligen Plugins.

Ein einfaches Beispiel anhand unseres Corner Plugins:

Wir brauchen nur eine JS Datei, die wir eintragen müssen.

<script type="text/javascript" src="/modules/jqueryadmin/plugins/corners/jquery.corners.2.09.js"></script>

Dann wäre noch per Javascript die Optionen die wir nutzen wollen einzutragen. Hier können wir ein wenig bei den Corners Plugin Demos abspicken.

<script typ="text/Javascript">
$(document).ready(function() { 
$('.normal').corner();
$('.bevel').corner("bevel");
$('.notch').corner("notch");
$('.bite').corner("bite");
$('.cool').corner("cool");
$('.slide').corner("slide");
});
</script>

Falls noch bei dem ein oder anderen Plugin eine CSS Datei einzubinden ist einfach eintragen und auf die Pfade achten.
Mit WB_PATH, WB_URL und TEMPLATE_DIR (jeweils in {} Klammern) stehen dir alle Pfadmöglichkeiten zur Verfügung, die du schon aus den WebsiteBaker Templates kennst.

Tips und Tricks für die Feineinstellung

Manche Plugins brauchen Teile des Javascript codes, oder auch JS Dateien nicht im Head Bereich des Templates sondern vor Ende Body (</body>) also. Dies ist möglich gezielt zu steuern mit dem einfachen HTML Kommentar:

<!-- position: body -->

Auch schwören einige Webentwickler darauf aus Performancegründen JS vor Bodyende zu laden. Das könntest Du generell mit dem Aufruf des jQueryAdmin erledigen, aber beim Erstellen eines Plugins macht es am meisten Sinn dieses schon so zu gestalten, wie Du es auch einsetzen willst.

Alles fertig?

Nein - halt wir könnten uns selbst und anderen, die unser Plugin für den jQueryAdmin nutzen wollen noch das Leben leichter machen indem wir einfach eine kleine readme.html erstellen und ins Pluginverzeichnis legen. Dazu braucht es nicht viel, wir verlinken einfach zur Seite des jQuery Plugin Autors und erklären noch einmal in Kurzform wie das Plugin mit WebsiteBaker zu verwenden ist.

Eine Vorlage für die readme.html gibt es hier... (in .html umbenennen)

So wir haben nun unsere benötigten Scripte und Einstellungen zusammen und packen das ganze in eine Zip Datei.

Unsere default.preset sieht am Ende so aus:

<script type="text/javascript" src="/modules/jqueryadmin/plugins/jquery-corners-2-0-9/jquery.corners.2.0.9.js"></script>
<!--Corner Setup below-->
<script typ="text/Javascript">
$(document).ready(function() { 
$('.normal').corner();
$('.bevel').corner("bevel");
$('.notch').corner("notch");
$('.bite').corner("bite");
$('.cool').corner("cool");
$('.slide').corner("slide");
});
</script>

Und das fertige Plugin gibt es dann hier!

Schritt 3 - Anwenden

Richtig - so schnell geht das ganze im Backend des jQueryadmin Moduls einfach installieren...

3 Klicks und einsatzbereit

Und jetzt?

Tja das Corners Plugin macht nichts anderes als quadratischen Flächen (div Container) per CSS Klasse eine Runde Ecke zu verpassen. Also einfach mal gleich im WYSIWIG Editor in der Quelltextansicht einen div einfügen und mit einer unserer vorher gesetzten Klassen versehen.

<div class="normal" style="margin: 5px; padding: 5px; text-align: center; background-color: red; width: 300px;">
<h1>Round</h1>
<p>CSS&nbsp;Klasse normal</p>
</div>
<div class="bevel" style="margin: 5px; padding: 5px; text-align: center; background-color: red; width: 300px;">
<h1>Round</h1>
<p>CSS&nbsp;Klasse bevel</p>
</div>
<div class="cool" style="margin: 5px; padding: 5px; text-align: center; background-color: red; width: 300px;">
<h1>Round</h1>
<p>CSS&nbsp;Klasse cool</p>
</div>
<div class="notch" style="margin: 5px; padding: 5px; text-align: center; background-color: red; width: 300px;">
<h1>Round</h1>
<p>CSS&nbsp;Klasse notch</p>
</div>
<div class="bite" style="margin: 5px; padding: 5px; text-align: center; background-color: red; width: 300px;">
<h1>Round</h1>
<p>CSS&nbsp;Klasse bite</p>
</div>

Wenn Du alles richtig gemacht hast, siehst Du nun einige Variationen für schöne runde Ecken. Diese kannst Du auch für Dein Template zum ausschmücken verwenden, jedoch sind diese Ecken bei ausgeschaltetem Javascript nicht mehr zu sehen.

Mehr zur Anwendung mit WebsiteBaker

Es gibt einige Möglichkeiten jQueryAdmin zu verwenden, jede davon hat ihre Berechtigung je nach Einsatz des unseres Presets. Möchte ich ein Plugin auf allen Seiten, oder nur auf einer Verwenden, oder nur auf bestimmten verschiedenen Seiten, alles ist möglich.

Mehr dazu auf den Seiten der Programmiererin Bianka Martinovic zur Verwendung des jQueryAdmins.

Fazit - genial einfach!

Absolut jeder kann ein im Internet gefundenes jQuery Plugin einfach in WebsiteBaker einbinden und sehr flexibel nutzen. Das System ist erweiterbar und auch durch Module und Templates nutzbar, z.B. kannst Du ein Preset im Templateordner ablegen, dieses wird automatisch gefunden und mit dem Dropletaufruf [[jQueryInclude]] eingebunden.
Genauso könnten Modulentwickler einfach ihre jQuerydateien per Preset laden lassen und das spezielle Modulpreset mitliefern, dadurch würden zusätzliche Komponenten wie z.B. die jQuery UI , oder auch schlicht der aktuelle jQuery Core nicht mehr doppelt benötigt und vorallem geladen. Ein weiterer Vorteil für Entwickler und einfache Anwender jQueryadmin prüft ob Scripte doppelt geladen würden und verhindert dies, so wird viel Kopfzerbrechen verhindert, bei Verwendung verschiedener Templates, oder schlicht beim testen mit jQuery Plugins.

Ich wünsche allen viel Spaß beim ausprobieren - nochmal an dieser Stelle - unser Beispielpreset mit dem Corners Plugin gibt es hier zum runterladen.

Ich lade alle dazu ein vielleicht auch ein "Lieblingsplugin" als Preset beizusteuern. Denn nur wenn mehr als einer teilt haben alle gemeinsam mehr davon!

Link zum Thema im WebsiteBaker Forum

Zurück zur Übersicht