Overhang.js - Un plugin jQuery per messaggi di notifica a discesa

Quanto sono noiosi i caselle di avviso JS predefinite? Si sentono come una reliquia di un'epoca passata dello sviluppo del web.

Al giorno d'oggi, possiamo fare messaggi di notifica non invadenti che condividono le stesse informazioni ma non interrompere l'esperienza dell'utente. E questo è esattamente ciò che puoi fare con overhang.js.

Questo plugin gratuito per jQuery può aggiungi barre di notifica personalizzate che scende dalla parte superiore dello schermo. Sono posizionato tramite CSS e animato con JavaScript, in modo che possano scendere da un punto fisso in alto indipendentemente dalla lunghezza della pagina.

Puoi creare messaggi in questo modo chiusura automatica dopo un certo tempo, o altri quello richiede l'input dell'utente.

I messaggi possono relay di successo, fallimento, errore o semplici notifiche con informazioni sull'utente o sulla pagina. I messaggi possono anche hanno i loro pulsanti Sì / No porre domande agli utenti come un avviso di prompt di JavaScript.

C'è anche un'opzione per creare prompt discesa con un campo di input. Questo sarebbe perfetto per un modulo di iscrizione via email.

Overhang.js supporta tutti i principali browser supportati da jQuery ed è anche powered by jQuery UI per le caratteristiche animate.

Insieme alle librerie dell'interfaccia utente jQuery e jQuery, dovrai anche includere un file CSS personalizzato con il plugin. Puoi sempre unire questo con il foglio di stile del tuo sito web per ridurre le richieste HTTP.

Ogni chiamata fatta al sporgenza() metodo può prendere qualsiasi numero di parametri. Questi sono chiamato “opzioni” e ti danno il pieno controllo su ogni casella di notifica.

Puoi cambiare il velocità di animazione, durata, facilitando, e dimensione della scatola / colore, insieme ad altre caratteristiche del design.

Ecco un sample snippet dimostrando come crea una finestra di conferma:

 // Qualche conferma $ ("body"). Overhang (type: "confirm", yesMessage: "Yes please!", NoMessage: "No grazie."); 

Puoi vedere questo è abbastanza semplice ed esso non richiede molto codice jQuery.

A scarica una copia del plug-in, è possibile visitare il repository su GitHub in cui è anche possibile sfogliare direttamente i file sorgente. Oppure, se vuoi vedere più esempi dal vivo vai al sito web di Overhang.js.