fraNNNta-Design

Bine a-ti venit pe fraNNNta-Design
fraNNNta-Design

Cel mai frumos forum romanesc


Plugin notificari

Justice
Justice
Rank: fondator

Este acum: OnlineOffline
Respect : 100% Mesaje : 293
Inscris : 05/08/2015

biggri Plugin notificari

Mesaj Scris de Justice la data de Sam Feb 09, 2019 8:50 pm

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:
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).
mr.franta
mr.franta
Rank: fondator

Este acum: OnlineOffline
Respect : 100% Mesaje : 4044
Inscris : 18/06/2011

biggri Re: Plugin notificari

Mesaj Scris de mr.franta la data de Dum Feb 10, 2019 12:43 pm

Mulțumesc mult pentru cod

    Acum este: Dum Aug 25, 2019 5:22 pm