JavaScript-Ereignisse über CSS definieren

13.05.2013

JavaScript-Ereignisse lassen sich im CSS definieren, wodurch die Erweiterung von CSS-only Varianten über JavaScript möglich ist.

Über CSS definiertes JavaScript-Ereignis

.listPictureGallery_var31  {-w-add-events:onclick=expandGalleryToFullSize;...

Über die Eigenschaft -w-add-events können JavaScript-Ereignisse über beliebige CSS-Selektoren definiert werden. Diese werden über die ui.js gesetzt und können genutzt werden, um CSS-Only Varianten zu erweitern.

Im obigen Beispiel wird das onclick-Event dem Element mit der Klasse listPictureGallery_var31 hinzugefügt, so dass sich die Vollbildansicht der Bildergalerie öffnet, sobald man diese anklickt.

Über das Ereignis aufgerufene Funktion

function expandGalleryToFullSize(element, event){
  ...
}

Die aufzurufende Funktion ist ohne Klammer anzugeben. Mehrere Ereignisse lassen sich über Komma getrennt definieren.

Beim Aufruf der im CSS definierten Funktion wird immer das Element, welches über den Selektor adressiert wurde, sowie das aktuelle Ereignis übergeben.

Um diese CSS-Events nutzen zu können, benötigen Sie neben der aktuellsten Weblication CMS Version auch die aktuellste Version der ui.js, welche Sie als Weblic installieren können.