j-Exec - Total.js

j-Exec je súčasťou client-side knižnice jComponent od Total.js. Viac informácií o tomto komponente môžete nájsť na webe componentator.com alebo v GitHub repozitári.

Tento komponent je singleton, čo znamená, že ho deklarujeme iba raz a následne ho môžeme používať v celom HTML dokumente. Po pridaní triedy exec, exec2 alebo exec3 nejakému elementu tento komponent zachytí event kliknutia (alebo dvojklik a klik pravým tlačidlom na myši, v závislosti od triedy) a vyvolá funkciu, ktorú definujeme.

Ako používať j-Exec

Ako prvé je potrebné vedieť ako pracovať s knižnicou jComponent. Podrobnejšie som sa tomu venoval v predchádzajúcom blogu, pre viac informácií si ho odporúčam prečítať.

Inicializácia

Použitie komponentu j-Exec je veľmi jednoduché, no pre lepšie pochopenie si to vysvetlíme na príklade.

Na začiatok je potrebné delkarovať komponent j-Exec. Dobrým návykom je deklarovať singleton komponenty hneď na začiatku svojho kódu (ja ich pridávam hneď ako prvé v HTML body elemente). Kód je tým čistejší a jednoduchší na debugovanie v prípade potreby.

<ui-component name="exec"></ui-component>

Po takomto pridaní komponentu j-Exec do vášho kódu ho môžete použiť koľkokrát potrebujete v rôznych elementoch.

Použitie

Na použitie komponentu j-Exec je potrebné pridať do elementu, na ktorom chceme event kliknutia zachytávať 2 veci. Prvou je trieda exec a druhou je atribút data-exec, kde je potrebné zadať funkciu, ktorú chceme vyvolať po zachytení eventu.

Príklad:

Tento príklad bude obsahovať kód s použitím pluginov, v prípade, že chcete získať viac informácií o pluginoch, prosím, prečítajte si môj predchádzajúci blog alebo dokumentáciu (prípadne príklad uvedení na webe componentator.com je bez použitia pluginov).

<ui-plugin path="example">
  <div class="exec" data-exec="?/click">Click</div>
</ui-plugin>

Po kliknutí na daný element (v tomto prípade element div s textom Click), bude vyvolaná funkcia click z nášho PLUGINu.

PLUGIN('example', function(exports) {
  exports.click = function(element, event) {
    console.log('Click');
  };
});

Jedná sa o JavaScript PLUGIN, v tomto prípade s jedinou funkciou click. Po vyvolaní tejto funkcie sa nám do konzoly vypíše slovo Click. Ako môžete vidieť v argumentoch funkcie, je taktiež možné zachytiť element, ktorý vyvolal danú funkciu a takisto aj event.

Dvojklik a klik pravým tlačidlom myši

Ak chcete zachytiť dvojklik alebo kliknutie pravým tlačidlom myši, môžete použiť rovnaký kód ako v príklade vyššie s dvoma malými zmenami. Tieto zmeny sa týkajú triedy a atribútu a ukážeme si ich v kóde.

Dvojklik

<ui-plugin path="example">
  <div class="exec2" data-exec2="?/click">Click</div>
</ui-plugin>

Klik pravým tlačidlom myši

<ui-plugin path="example">
  <div class="exec3" data-exec3="?/click">Click</div>
</ui-plugin>

Redirect - presmerovanie

j-Exec môže byť takisto použitý aj na presmerovanie na webe. Po kliknutí na zvolený element s triedou exec sa vyvolá metóda REDIRECT().

Príklad:

<ui-plugin path="example">
  <div class="exec" data-href="home">Click</div>
</ui-plugin>

Kliknutie na element div s textom Click vyvolá metódu REDIRECT('/home/'). Táto metóda vykoná presmerovanie na relatívnu cestu /home/. Ak chcete získať viac informácií o tejto metóde, prečítajte si prosím dokumentáciu.

Dvojklik a klik pravým tlačidlom myši

Dvojklik a klik pravým tlačidlom myši funguje na rovnakom princípe ako v predchádzajúcom prípade aj s presmerovaním. Je teda potrebné upraviť názov triedy a atribútu.

Dvojklik

<ui-plugin path="example">
  <div class="exec2" data-href2="home">Click</div>
</ui-plugin>

Klik pravým tlačidlom myši

<ui-plugin path="example">
  <div class="exec3" data-href3="home">Click</div>
</ui-plugin>

K dispozícií je aj video tutorial ku komponentu j-Exec v anglickom jazyku: