jQuery neben Prototype in Zikula einsetzen

in  Basics , ,

jQuery neben Prototype in Zikula einsetzen

In Zikula 1.3.x sind jQuery und jQuery UI bereits enthalten. Allerdings verwenden viele Module noch Prototype, was dazu führt, dass beide Skripte parallel nebeneinander verwendet werden. Dieser Artikel zeigt auf, welche Konsequenzen dies für die Nutzung mit sich bringt und wie man jetzt schon ohne Probleme mit jQuery arbeiten kann.

Skripte via PageVar laden

Statt mit Pfaden und Dateinamen hantieren zu müssen, können oft benötigte Skripte in Zikula einfach mittels PageVars geladen werden. Um beispielsweise jQuery und jQuery UI in einem Rutsch einzubinden, genügt die folgende Zeile im Template:

1
{pageaddvar name='javascript' value='jquery,jqueryui'}

Der Kompatibilitätsmodus von jQuery

Da sowohl Prototype als auch jQuery das Dollarzeichen für Funktionen verwenden, gibt es Probleme, wenn beide Skripte gleichzeitig geladen werden. Daher wird in Zikula beim Laden von jQuery direkt der sogenannte “NoConflict-Modus” eingeschaltet. Dieser tut an sich nichts weiter außer die Selektionsfunktionalität, welche jQuery normalerweise mit dem Dollarzeichen verbindet, zusätzlich über das Alias jQuery bereitzustellen. Die beiden folgenden Beispielselektoren und Befehle sind daher als identisch zu betrachten:

1
2
3
4
<script>
    $('#mynavigation li a').attr('target', '_blank');
    jQuery('#mynavigation li a').attr('target', '_blank');
</script>

Wenn man das Alias statt dem Dollarzeichen verwendet, kann man bereits mit jQuery arbeiten, auch wenn Prototype zusätzlich geladen wurde. Allerdings gibt es noch eine andere Möglichkeit, die bevorzugt angewendet werden sollte.

Funktionen an jQuery binden

Es ist möglich, den JavaScript-Code von einer anonymen Funktion ummanteln zu lassen. Damit kann man definieren, dass das Dollarzeichen innerhalb dieser Funktion zu jQuery und nicht zu Prototype gehört. Ein schöner Nebeneffekt dieser Vorgehensweise ist, dass der Code so auch direkt weiter für Zikula 1.4.0 verwendet werden kann.

1
2
3
4
5
6
<script>
    (function($) {
        $('#myelement').hide();
        $('#mynavigation li a').attr('target', '_blank');
    })(jQuery)
</script>

Weitere Details dazu lassen sich im Core-Projekt auf GitHub nachlesen.

Weitere Beiträge in Kategorie Basics

CSS-Konzepte spielerisch lernen
- Die Cascading Style Sheets zum Gestalten von Internetseiten und Webanwendungen gibt es schon eine ganze Ewigkeit. Elementare Dinge ändern sich hier vergleichsweise selten. Mit der Umstellung von …
Twig: kleine Syntax-Anpassung mit deutlichem Einspareffekt
- Der folgende Tipp hilft dabei, den Code-Umfang häufiger Abfragen in Twig-Templates zu reduzieren. Dies verbessert die Lesbarkeit enorm und hilft dabei, die Logik in den Templates intuitiver zu …
Funktionale Programmierung in Twig: Collections deklarativ verarbeiten
- Seit kurzem haben neue Funktionen in die Template-Engine Twig Einzug gehalten. Diese verändern die Art und Weise, wie mit mehrwertigen Daten umgegangen wird, fundamental. Aus diesem Grund soll dieser …
Prägnante und strukturierte Stylesheets mit SCSS
- Auch wenn es für einige Leser ein alter Hut ist, so gibt es dennoch sicherlich andere, die noch keine Erfahrungen mit Less oder Sass haben. Daher sei einmal das sehr leicht zu erlernende SCSS (Sassy …
Kategorien in Zikula - weit mehr als nur Themen
- Der Zikula Core enthält eine zentrale Verwaltung für Kategorien, mit denen man vielfältige Lösungen umsetzen kann. Die häufigste Verwendung von Kategorien ist sicherlich eine thematische Zuordnung von …