Overhang.js - Un plugin jQuery pour les messages de notification par liste déroulante

Comment ennuyeux sont les Zones d'alerte JS par défaut? Ils se sentent comme un vestige d'une ère primitive du développement web.

De nos jours, on peut faire messages de notification discrets qui partagent les mêmes informations, mais n'interrompez pas l'expérience utilisateur. Et c'est exactement ce que vous pouvez faire avec overhang.js.

Ce plugin gratuit jQuery peut ajouter des barres de notification personnalisées cette liste déroulante du haut de l'écran. Ils sont positionné via CSS et animé avec JavaScript, afin qu'ils puissent descendre d'un point fixe au sommet indépendamment de la longueur de la page.

Vous pouvez construire des messages qui fermeture automatique après un certain temps, ou d'autres qui nécessite la saisie de l'utilisateur.

Les messages peuvent succès de relais, échec, erreur ou notifications simples avec des informations sur l'utilisateur ou la page. Les messages peuvent aussi ont leurs propres boutons oui / non poser des questions aux utilisateurs, comme une alerte JavaScript.

Il y a même une option pour créer des invites qui dérouler avec un champ de saisie. Ce serait parfait pour un formulaire d'inscription par e-mail.

Overhang.js supporte tous les principaux navigateurs supportés par jQuery et c'est aussi propulsé par jQuery UI pour les longs métrages animés.

Outre les bibliothèques d’interface utilisateur jQuery et jQuery, vous devez également: inclure un fichier CSS personnalisé avec le plugin. Tu peux toujours fusionner ceci avec la feuille de style de votre site web réduire les requêtes HTTP.

Chaque appel à la surplomb() méthode peut prendre n'importe quel nombre de paramètres. Ceux-ci sont appelé “options” et ils vous donnent un contrôle total sur chaque boîte de notification.

Vous pouvez changer le la vitesse d'animation, durée, assouplissement, et taille de la boîte / couleur, avec d'autres caractéristiques de conception.

Voici un échantillon extrait démontrer comment créer une boîte de confirmation:

 // Une certaine confirmation $ ("body"). Overhang (type: "confirm", yesMessage: "Yes please!", NoMessage: "No thanks."); 

Vous pouvez voir que c'est assez simple et cela ne nécessite pas beaucoup de code jQuery.

À télécharger une copie du plugin, vous pouvez visiter le dépôt sur GitHub où vous pouvez également parcourir directement les fichiers sources. Ou si tu veux voir plus d'exemples en direct rendez-vous sur le site Overhang.js.