Data Hv Fn
Example 1:
Trigger on "click".
Code:
<p id="scrollA" class="swatch3-bg">Trigger on "click".</p>
<a class="button" href="#" data-vfn="e:click,f:scrollTo,a:spring,s:#scrollA">scrollTo</a>Example 2:
Trigger on "click".
Code:
<p id="triggerA" class="active swatch3-bg">Trigger on "click".</p>
<a class="button" href="#" data-vfn="e:click,f:toggleClass,a:swatch3-bg,s:#triggerA">toggleClass</a>Example 3:
Trigger on "mouseover".
Code:
<p id="triggerB" class="active swatch3-bg">Trigger on "mouseover".</p>
<a class="button" href="#" data-vfn="e:mouseover,f:toggleClass,a:swatch3-bg,s:#triggerB">toggleClass</a>Example 3 (b):
Trigger on "mouseover" | Trigger on "mouseout"
Code:
<p id="triggerB" class="active swatch3-bg">Trigger on "mouseover" | Trigger on "mouseout"</p>
<a class="button" href="#" data-vfn="e:mouseover,f:removeClass,a:swatch3-bg,s:#triggerB2;e:mouseout,f:addClass,a:swatch3-bg,s:#triggerB2">toggleClass</a>Example 4:
Trigger on "click".
Code:
<p id="triggerC" class="active swatch3-bg">Trigger on "click".</p>
<a id="triggerAdd" href="#" data-vfn="e:click,f:addClass,a:swatch3-bg,s:#triggerC">addClass</a>
<a href="#" data-vfn="e:click,f:removeClass,a:swatch3-bg,s:#triggerC;e:click,f:removeClass,a:active,s:#triggerAdd">removeClass</a>
