wir beschreiben die Methode mit PHP um die jQuery-Bibliothek und den Code auszuführen. Der Vorteil besteht darin, dass wenn andere Komponenten und Erweiterungen die selbe Methode nutzen, die Bibliothek und der Code nur einmal eingebunden wird.

Wir öffnen die index.php aus dem Template-Verzeichnis. Sie sollten etwas wie folgt vorfinden:

<?php
// No direct access.
defined('_JEXEC') or die;
 

Wir werden nun eine Instanz von JDocument erstellen. Dieses Objekt enthält unter anderem die Header und den Inhalt und wird später zum Rendern herangeholt, Dann nutzen wir die vorgesehenen Methoden zum Hinzufügen der Bibliothek und des Code zum Initialisieren. Wir fügen hinter den oben genannten Code nun folgendes ein:

// Listing 1
// Instanz von JDocument erzeugen
$doc = JFactory::getDocument();
// jQuery Bibliothek vom Google-CDN hinzuf&uuml;gen
$doc->addScript('http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
// jQuery Code zum Initialisieren
$doc->addScriptDeclaration('jQuery.noConflict();');

Selbstverständlich könnten wir hier auch eine lokale Ressource angeben. Der Vorteil bei der CDN-Variante liegt darin, dass durch die Verwendung dieser Quelle auch auf anderen Seiten, die Bibliothek meist schon im Cache des Browsers bereit liegt. Außerdem erspart es dem eigenen Server etwas Bandbreite. Der Nachteil wird dann klar, wenn die Ressource mal nicht verfügbar ist. Dann funktioniert der auf jQuery angewiesene Code nicht mehr. In der Zeile 6 fügen wir den Code zum Initialiseren von jQuery im "noConflict"-Modus. Wenn unsere Änderung amTemplate gespeichert wird bzw. auf den Server hochgeladen wird sollten wir beim nächsten Laden der Seite im HTML-Header folgendes wiederfinden:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
<script type="text/javascript">
jQuery.noConflict();
</script>

jQuery steht somit bereit. Wichtig ist jedoch zu wissen, dass wir auf jQuery Objekte nicht über den Namespace $, sondern über jQuery zugreifen. Um nun eigene Funktionen mit jQuery zu erstellen, erweitern wir das Listing 1 nun noch wie folgt:

// Listing 2
// Instanz von JDocument erzeugen
$doc = JFactory::getDocument();
// jQuery Bibliothek vom Google-CDN hinzuf&uuml;gen
$doc->addScript('http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
// Hinzuf&uuml;gen unser eigenen Javascript-Datei mit unseren Funktionen
$doc->addScript('/templates/meintemplate/js/meinjs.js');
// jQuery Code zum Initialisieren
$doc->addScriptDeclaration('jQuery.noConflict();jQuery(document).ready(function(){initMyJS();});');

Durch diese Erweiterung des Codes binden wir nun eine eigene Jacascriptdatei aus unserem Template ein. Die Erweiterung des Codes zum Initialisiere sorgt dafür, dass sobald das Laden der Seite vollständig erfolgt ist, die Funktion initMyJS aus unserer eingebundenen Javascript-Datei ausgeführt wird. Dieses Vorgehen ist notwendig, da wir sonst auf das Problem stoßen, dass unser Code ins leere läuft, weil Javascript schon ausgeführt wird, bevor die Seite vollständig geladen wird.

Wir hoffen dieses Tutorial hat Ihnen gefallen. Sollte das so sein, freuen wir uns, wenn Sie diesen Artikel auf Facebook, Google oder Twitter weiterempfehlen. Nutzen Sie dazu einfach die Buttons am Ende dieser Seite.

Kommentare (0)

There are no comments posted here yet

Einen Kommentar verfassen

Posting comment as a guest.
Anhänge (0 / 3)
Share Your Location