jQuery direkt über CSS ansteuern

25. Mär 2013

JavaScript bzw. beliebige jQuery-Plugins lassen sich nun direkt über CSS ansteuern, ohne dass Anpassungen in Templates notwendig sind.

jQuery kann nun direkt über CSS angesteuert werden, wodurch eine Anpassung im Template selbst nicht mehr notwendig ist.

Bereits die Möglichkeit, jQuery nur über eine zusätzliche Klasse im Template anzusprechen war für viele Web-Entwickler eine enorme Erleichterung. DOM-Manipulationen und CSS-Anpassungen können seither mit geringem Aufwand durchgeführt werden. Weblication geht nun noch einen Schritt weiter, indem Anpassungen vom Template vollständig ins CSS verlagert werden können. Durch diese neue Technik sind Projekte noch schneller anzupassen und bleiben einfacher zu warten.

Konventioneller Ansatz durch Anpassen des Templates

Beim konventionellen Ansatz werden die Klassen direkt im Template ergänzt. Über jQuery können dann alle Elemente, dieser Klasse behandelt werden.

Ursprüngliches XSLT-Template

<div class="box">
  ...

XSLT um die Klasse wglOverflowXTouch ergänzt

<div class="box wglOverflowXTouch">

Neuer Ansatz durch Anpassen des Templates

Durch die Möglichkeit, neue Klassen im CSS über -w-add-classes zu ergänzen, kann auf die Anpassung der Templates verzichtet werden. jQuery lässt sich so direkt über die CSS-Datei steuern. 

Ursprüngliches XSLT-Template

<div class="box">
  ...

CSS um die Klasse wglOverflowXTouch ergänzt

.box {-w-add-classes:wglOverflowXTouch}

Dynamische Ergänzung der Klassen über ui.js

Die ui.js kümmert sich selbständig darum, dass die im CSS über w-add-classes definierten Klassen im HTML ergänzt werden. Sobald Sie also jQuery-Plugins oder eigene Funktionen nach der ui.js einbinden, können diese auf die ergänzten Klassen reagieren.