Plugins einbinden

Diese Anleitung gilt sowohl für jQueryAdmin als auch für LibraryAdmin.

jQueryAdmin liefert Beispiel-Plugins mit, die es Ihnen erleichtern werden, beliebige jQuery-Plugins zu integrieren. Zudem finden Sie eine Reihe bereits vorbereiteter Plugins auf folgender Seite:

http://jquery.lepton-cms.org/

Wenn Sie Ihr Wunsch-Plugin auf obiger Seite nicht finden, können Sie es mit einigen wenigen Schritten auch leicht selbst einbinden. In diesem Fall wäre es schön, wenn Sie es anschließend der Allgemeinheit zur Verfügung stellen. Auf oben genannter Seite finden Sie einen Kontaktlink, über den Sie es einreichen können.

Wir integrieren hier beispielhaft prettyPhoto 2.5.6 (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/)

Plugin für die Nutzung vorbereiten

Folgende Schritte sind für die Integration notwendig:

  1. Laden Sie das Plugin von der Hersteller-Homepage herunter -> http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
  2. Legen Sie im jQueryAdmin Verzeichnis unterhalb von plugins ein neues Verzeichnis mit dem Namen des Plugins an:
    WB_PATH/modules/jqueryadmin/plugins/prettyPhoto-2.5.6
  3. Entpacken Sie das heruntergeladene Plugin in dieses neue Verzeichnis

Ihr Ergebnis sollte nun so aussehen:

Als nächstes schauen wir auf der Hersteller-Homepage nach, wie prettyPhoto verwendet wird -> http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation/

Folgender Code muß lt. Dokumentation in die entsprechende Seite eingebunden werden:

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

Dieser Code muß nun in eine Datei default.preset im Plugin-Verzeichnis geschrieben werden. Hierbei sind ein paar Punkte zu beachten:

  1. Damit die Scripten und das CSS beim Laden der Seite später auch gefunden werden, müssen wir die Pfade ein wenig anpassen.
  2. Außerdem steht in der Dokumentation, daß der untere Block vor </body> einzubinden ist. Dies können wir jQueryAdmin mitteilen, indem wir den HTML-Kommentar <!-- position: body --> verwenden.
  3. Außerdem entfernen wir noch die Einbindung des jQuery Cores, da jQueryAdmin das automatisch übernimmt.

Hier der komplette Inhalt der Datei default.preset:

<link rel="stylesheet" href="{WB_URL}/modules/jqueryadmin/plugins/prettyPhoto-2.5.6/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="{WB_URL}/modules/jqueryadmin/plugins/prettyPhoto-2.5.6/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<!-- position: body -->
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

Wichtig! Manche Plugins liefern den jQuery Core, also das jQuery Framework, selbst noch einmal mit. Sie erkennen es meistens an einer Datei jquery.js, eventuell mit einer Versionsnummer. Dieses Script darf auf keinen Fall in der default.preset eingebunden werden! jQueryAdmin stellt sicher, daß der jQuery Core an der richtigen Stelle eingebunden wird. Wenn Sie das in einem Plugin nochmal "manuell" tun, möglicherweise noch in einer anderen Version, wird Ihre Seite nicht funktionieren! ("Highlander-Prinzip" - es kann nur einen (Core) geben!)

Das vorbereitete Plugin benutzen

Wir haben nun alles vorbereitet, um das Plugin verwenden zu können. Um es zu testen, brauchen wir eine Seite mit Bildern. Diese erstellen wir wie gewohnt im WB Backend:

Hier können wir nun ein Bild hinzufügen. Praktischerweise wird und PrettyPhoto als Relationstyp angeboten, so daß wir diesen einfach auswählen können:


Dann müssen wir noch das Droplet einbinden, damit unser neues Plugin auch geladen wird:

[[jQueryInclude?plugin=prettyPhoto-2.5.6]]

Fertig! Wir können uns nun unsere frisch erstellte Seite anschauen. :o)

Fortgeschrittene Plugin-Optionen

Plugin-Optionen im jQueryAdmin Backend konfigurierbar machen

Ab Version 2.0 ist es möglich, die verfügbaren Plugin-Optionen über das jQueryAdmin Admin Tool direkt zu bearbeiten. Hierzu muß das Plugin entsprechend aufbereitet werden.

Der erste Schritt besteht in der Trennung zwischen den einzubindenden Dateien und dem eigentlichen Aufruf. Im Fall von prettyPhoto sieht das so aus:

Datei default.preset

<link rel="stylesheet" href="{WB_URL}/modules/jqueryadmin/plugins/prettyPhoto-2.5.6/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="{WB_URL}/modules/jqueryadmin/plugins/prettyPhoto-2.5.6/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

neue Datei loader.preset

<!-- position: body -->
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

Nun gibt es ja in unserem Aufruf gar keine Optionen. (Die letzte Klammer bei prettyPhoto() ist leer.) Auf der prettyPhoto-Homepage finden wir aber in der Dokumentation eine Liste von Einstellungen, mit denen man die Darstellung beeinflussen kann.

Wir kopieren diese Optionen in die Datei loader.preset, und zwar nach folgendem Muster:

    <Option>: <Wert>, //<Beschreibung>

Beispiel:

    opacity: 0.80, // Value between 0 and 1

Wenn das erledigt ist, ist noch ein letzter Schritt zu tun, damit jQueryAdmin diese Datei auswerten und die Optionen anpassen kann. Und zwar muß mit Hilfe eines regulären Ausdrucks angegeben werden, wie Anfang und Ende der Optionsliste erkannt werden können.

Glücklicherweise sind sich diese in der Regel so ähnlich, daß jQueryAdmin einen Standard-Ausdruck mitliefert. Daher genügt es meistens, eine leere Datei config.php in das Plugin-Verzeichnis zu legen. Diese signalisiert jQueryAdmin, daß es konfigurierbare Optionen gibt.

Wenn alles geklappt hat, erscheint nun im Backend ein "Rädchen" neben dem Plugin. Wenn man darauf klickt, geht ein Dialogfenster mit den Optionen auf.

Das Plugin anderen zur Verfügung stellen

Im Prinzip muß das Plugin-Verzeichnis nur zusammenge-zip-pt werden und kann dann sofort verwendet werden, da die einzige Besonderheit die Datei default.preset ist. Allerdings ist es wünschenswert, dem Benutzer einige Informationen zur Verfügung zu stellen, die er dann im jQueryAdmin Backend mit Klick auf die kleine Lampe angezeigt bekommt. Diese sind:

  • Link zur Homepage
  • Link zu einer Online-Demo
  • Link zur ausführlichen Dokumentation
  • Link zu den Lizenzbedingungen
  • Informationen zur Verwendung

Diese Informationen werden einfach in einer Datei readme.html untergebracht. (Template ) Für Übersetzungen in andere Sprachen hängt man dem Namen einfach das Sprachkürzel des Landes an, also etwa readme_de.html oder readme_no.html.

Sobald eine Datei readme.html im Plugin-Verzeichnis vorhanden ist, wird im jQueryAdmin Backend automatisch der Link mit der kleinen Lampe angezeigt. :o)

So. Nun einfach den Inhalt des Plugin-Verzeichnisses in eine ZIP-Datei zusammenpacken und schon kann es an andere Nutzer des jQueryAdmin Moduls weitergegeben werden! (Dabei das Verzeichnis selbst bitte nicht mit einpacken. Wenn also das Verzeichnis ./modules/jqueryadmin/plugins/prettyPhoto heißt, alles unterhalb dieses Verzeichnisses einpacken.)

Weitere Tutorials

Wenn Sie ein Tutorial geschrieben haben, lassen Sie es mich wissen!