Blog

Migliorare la visualizzazione delle notifiche nei progetti web

24 May 2014

alert()confirm() e prompt() sono a volte comodi da utilizzare ma decisamente brutti, grazie a queste librerie possiamo personalizzarne la visualizzazione e il comportamento.

L'utilizzo di dialog box può essere molto utile per guidare l'utente o per avvertirlo su eventi importanti, l'abuso però è molto fastidioso come ci insegnano le pubblicità in giro per il web...

Bootstrap Growl

http://bootstrap-growl.remabledesigns.com/
jQuery, Bootstrap
alert

Uno tra i più semplici, permette la visualizzazione di alert bootstrap in stile "Growl", personalizzazione minimale ma efficace e perfettamente integrata con bootstrap.
La documentazione è semplice e immediata.

BootboxJs

http://bootboxjs.com/
jQuery, Bootstrap
alert, confirm, prompt, custom

Questa libreria si appoggia direttamente a Bootstrap, sfrutta i dialog per la visualizzazione di alert, finestre di conferma e prompt.
Oltre a sostituire i vari dialog standard (alert, confirm, prompt) è possibile creare dialog personalizzati mantenendo la struttura dei "Modal" di bootstrap.
Documentazione in stile Bootstrap, molto completa e organizzata.

AlertifyJs

http://fabien-d.github.io/alertify.js/
jQuery, css theme (tema bootstrap già incluso)
alert, confirm, prompt

Ottima libreria per personalizzare la visualizzazione dei dialog standard javascript, essenziale nella configurazione con un theming basato esclusivamente su CSS.
E' già presente un tema "Bootstrap".
La libreria è così semplice che la documentazione è tutta basata su esempi.

NotifyJs

http://notifyjs.com/
jQuery (tema bootstrap già incluso)
alert

Questa libreria va oltre i semplici alert dialog, permette anche il posizionamento di notifiche sugli elementi della pagina, una sorta di tooltip.
L'implementazione è un po' macchinosa e il theming abbastanza complicato, è comunque già presente la visualizzazione stile "Bootstrap".
La documentazione è poco organica, mix di esempi e reference sparpagliati nella homepage.

pNotify

http://sciactive.github.io/pnotify/
jQuery, theme (bootstrap)
alert, confirm, prompt, notifiche desktop, custom

Tanta carne al fuoco per questa libreria che fa tutto il possibile per quanto riguarda le notifiche.
E' possibile realizzare qualunque tipo di notifica, dal semplice testo a form html con callbacks, il complesso sistema di posizionamento permette ogni sorta di visualizzazione, dal semplice dialog a top/bottom bar a posizionamenti relativi ad elementi della pagina, insomma una tra le pià complete (anche troppo) librerie.
E' piuttosto pesante ma è possibile includere nel proprio progetto solo gli elementi che ci interessano, da notare la bruttissima documentazione di difficile consultazione.