Mailocator podporuje vlastní atributy pro přepínání tříd CSS na základě události vyvolané uživatelem, jako je kliknutí, dotyk nebo najetí kurzorem. Na pozadí je automaticky zajištěna kompatibilita mezi dotykovými a desktopovými zařízeními, nemusíte tak složitě obsluhovat sadu událostí.
Celý mechanismus spočívá v přidání třídy nebo odebrání .is-on pokud uživatel vyvolá požadovanou událost.
Tento mechanismus lze použít u rozbalovacích prvků, vyjíždějících infoboxů a v řadě dalších případů.
Tato funkce je dostupná od verze Mailocatoru 5.1.0
on-click : přepínání CSS po kliknutí
Tato událost přidá třídu is-on pokud na daném elementu není a pokud je, odebere ji.
Postup pro nastavení v Editoru:
vyberte prvek, který má reagovat na kliknutí nebo dotyk
v levém panelu vyberte Inspector
v sekci Attributes přidejte atribut on-click, jehož hodnotou bude adresa elementu (třídy, id, ...), ke kterému se po kliknutí přidá třída .is-on. V případě, že se přidá třída na stejný prvek, jako hodnotu uveďte 1.
Příklad kódu, který po kliknutí na DIV přidá nebo odebere třídu on-touch na hlavní element:
Nastavení přepínání v CSS pomocí definice třídy is-on
/* Make main content partially hidden */
ml-main { transform: translateX(90%) !important; }
/* Reveal main content if user click on element */
ml-main.is-on { transform: translateX(0) !important; }
Aktivace přepínání třídy pomocí atributu on-click:
<div on-click="ml-main">Click to make content visible</div> once-click : jednorázové přepnutí po prvním klknutí
Stejná událost jako on-click, která reaguje pouze na první klknutí, další jsou ignorována.
on-touch : změna CSS po najetí kurzorem nebo dotyku (hover)
Tato událost přidá třídu is-on na definovaný element.
vyberte prvek, který má reagovat na kliknutí nebo dotyk
v levém panelu vyberte Inspector
v sekci Attributes přidejte atribut on-touch, jehož hodnotou bude adresace elementu, kterému bude při této události přidána třída .is-on.
off-touch : změna CSS po opuštění kurzoru nebo uvolnění dotyku
Tato událost odebere třídu is-on z definovaného elementu.
postupujte stejně jako v předchozím korku
v sekci Attributes přidejte atribut off-touch, jehož hodnotou bude adresace elementu, kterému bude při této události odebrána třída .is-on.
Kombinace
Události lze kombinovat, například rozbalit obsah po najetí kurzorem, ale sbalení umožnit jen pomocí kliknutí.
Příklad kódu, který kombinuje dvě události:
<div on-touch="ml-main" on-click="ml-main">Click to make content visible</div> Událost on-touch přidá třídu .is-on.
Přepínací událost on-click třídu .is-on. odebere, protože existuje z předchozí události