La ce foloseste acest cod?
Codul poate fi folosit pentru a afisa utilizatorului o notificare atunci cand acesta intra pe forum, dau click pe un element de pe pagina sau orice alta actiune.
Cum se instaleaza codul pe un forum?
In template-ul overall_header, imediat dupa:
se adauga urmatorul cod:
Daca aveti Font Awesome deja instalat pe forum, puteti adauga doar:
Cum se foloseste?
Pentru a folosi codul aveti minim nevoie de cunostinte HTML, de preferat si JS.
Creati un cod JS, cu plasamentul in functie de paginile pe care doriti sa apara notificarea.
Daca doriti ca utilizatorul sa primeasca o notificare atunci cand pagina se incarca, puteti folosi acest cod:
Pe al doilea rand puteti modifica:
"title", pentru a schimba titlul notificarii
"continut", pentru a schimba continutul notificarii
"icon", care este numele unui icon font awesome
2000, cate milisecunde se afiseaza notificarea
1, care poate fi inlocuit cu 0 daca nu doriti inchiderea automata a notificarii.
O alta utilizare este afisarea unei notificari la apasarea unui buton, care se realizeaza cu un cod asemanator acestuia:
Modificarile sunt aceleasi ca la primul exemplu, doar ca ".elem" trebuie inlocuit cu selectorul respectivului buton/element.
Alte detalii(+informatii pentru developeri)
De unul singur, codul nu este foarte util, dar poate fi integrat in altele mai complexe. Voi face in viitor tutoriale legate de acest cod.
Pentru cei ce doresc sa modifice codul, puteti gasi o versiune neminificata aici:https://raw.githubusercontent.com/Wolfuryo/JNotif/master/notif.js
Dupa ce instalati acest cod, puteti folosi pe forum functiile query(care inlocuieste document.querySelector), _query(care inlocuieste document.querySelectorAll) si listen(care inlocuiesti addEventListener).
Codul poate fi folosit pentru a afisa utilizatorului o notificare atunci cand acesta intra pe forum, dau click pe un element de pe pagina sau orice alta actiune.
Cum se instaleaza codul pe un forum?
In template-ul overall_header, imediat dupa:
Cod:
{CSS}se adauga urmatorul cod:
Cod:
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></link>
<script src="https://cdn.jsdelivr.net/gh/Wolfuryo/JNotif@master/notif.min.js"></script>Daca aveti Font Awesome deja instalat pe forum, puteti adauga doar:
Cod:
<script src="https://cdn.jsdelivr.net/gh/Wolfuryo/JNotif@master/notif.min.js"></script>Cum se foloseste?
Pentru a folosi codul aveti minim nevoie de cunostinte HTML, de preferat si JS.
Creati un cod JS, cu plasamentul in functie de paginile pe care doriti sa apara notificarea.
Daca doriti ca utilizatorul sa primeasca o notificare atunci cand pagina se incarca, puteti folosi acest cod:
Cod:
listen(document, "DOMContentLoaded", function(){
notif.create("title", "continut", "icon", 10000, 1);
})Pe al doilea rand puteti modifica:
"title", pentru a schimba titlul notificarii
"continut", pentru a schimba continutul notificarii
"icon", care este numele unui icon font awesome
2000, cate milisecunde se afiseaza notificarea
1, care poate fi inlocuit cu 0 daca nu doriti inchiderea automata a notificarii.
O alta utilizare este afisarea unei notificari la apasarea unui buton, care se realizeaza cu un cod asemanator acestuia:
Cod:
listen(document, "DOMContentLoaded", function(){
listen(query(".elem"), "click", function(){
notif.create("title", "continut", "icon", 10000, 1);
})
})Modificarile sunt aceleasi ca la primul exemplu, doar ca ".elem" trebuie inlocuit cu selectorul respectivului buton/element.
Alte detalii(+informatii pentru developeri)
De unul singur, codul nu este foarte util, dar poate fi integrat in altele mai complexe. Voi face in viitor tutoriale legate de acest cod.
Pentru cei ce doresc sa modifice codul, puteti gasi o versiune neminificata aici:https://raw.githubusercontent.com/Wolfuryo/JNotif/master/notif.js
Dupa ce instalati acest cod, puteti folosi pe forum functiile query(care inlocuieste document.querySelector), _query(care inlocuieste document.querySelectorAll) si listen(care inlocuiesti addEventListener).