-w-add-data

Nutzbar ab: Version 008.003.079.000
Mögliche Werte Beschreibung Einsatzgebiet

Setzen von HTML5 Data-Attributen direkt über CSS-Only.
Neben Klassen, können so noch weitere Werte zur Definition von Elementen gesetzt werden. Data-Attribute nutzt man vor allem als Schnittstellendaten für JavaScript Anwendungen, da diese nicht vordefiniert und somit frei nutzbar sind.
Mehrere Data-Attribute werden mit Komma getrennt (siehe Beispiel 2 unten).

Universell

Beispiele / Anwendungsfälle

Beispiel 1: Beispiel, um die Richtung bei Parallax-Scrolling über CSS-Only fix zu definieren

.elementBox_var85  {...;-w-add-data:direction=bottomright;...}

/*
HTML-Ergebnis:

<div data-direction="bottomright" ...
*/

Beispiel 2: Beispiel, um die Richtung bei Parallax-Scrolling zum Hintergrundbild über CSS-Only fix zu definieren

.elementBox_var85  {...;-w-add-data:parallaxbackgrounddirection=topright;...}

/*
HTML-Ergebnis:

<div data-parallaxbackgrounddirection="topright" ...
*/

Beispiel 3: Beispielhafte Definition eines jQuery-Überblendeffektes über CSS-Only

.divXY  {-w-add-data:effect=fadeIn,duration=0.3s}

/*
HTML-Ergebnis:

<div data-effect="fadeIn" data-duration="0.3s" ...
*/

Entwicklerbereich Weblication® CMS - © Scholl Communications AG