MyNotifications

Plugin Jquery de notification visuel d'événements.

Démonstration

Démonstration en ligne

Require

• Jquery 1.6.4+
• Le plug in (plugin.mynotifications.js)
• Eventuellement une feuille de style
• Navigateur moderne

Pour inclure Jquery le plus simple est d'utiliser Google Librairies et de copier/coller ces lignes dans votre header

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Objectifs

• Simple d'utilisation
• Indépendant d'un balisage particulier
• Compatible navigateurs modernes Opera, Firefox, Chrome, IE8+

Il sert à afficher dans le navigateur des messages pour l'utilisateur. Nous avons le même fonctionnement avec nos différents OS. Ainsi que sur un réseau social très connu.

Principe

Le plugin recherche un container dans le DOM de la page courante. Si il n'est pas présent il est ajouté. Les messages seront contenus dans une liste non ordonnée ajoutée automatiquement. Chaque item de cette liste sera une notification pour l'utilisateur, de durée d'affichage, d'apparence configurable. Les items peuvent être supprimés lors d'un clic sur ceux ci, automatiquement ou au clic sur un bouton de fermeture.

Une notification est un objet, elle sera entreprosée dans l'objet myNotification qui est un wrapper.

Container

Le container est une simple div avec un id html unique. Il sera le dernier noeud de body

<div id="notifications"></div>

Liste

Est dans le container, toutes les notifications seront ajoutées dans ce noeud.

<ul id="list"></ul>

Notification

Est un item de liste avec un id unique, un style notification, et une classe de spécialisation ici warning

<li id="notification-2" class="notification warning">
    <h6>warning<a class="close" href="#" onclick="return false;">x</a></h6>
    <p>Notification body's</p>
</li>

Constructeur

L'objet MyNotifications peut s'instancier de deux manières.

L'instanciation par défauts

// Constructeur par défauts
var myplugin = new $.myNotifications();

Lors de l'instanciation de l'objet le debug est activé, le container principal se nomme container, le selecteur CSS est un #, son id CSS complet est donc #container, les notifications s'affichent pour une durée de 3000 ms. Le prefix des id CSS est message. les notifications se ferment lors d'un click elles et elles possédent également un bouton de fermeture.

Les class CSS par défaut des notifications est :

• Pour les erreurs : my-notifications-error, la forme compléte est .my-notifications-error
• Pour les avertissements : my-notifications-warning, la forme compléte est .my-notifications-warning
• Pour les informations : my-notifications-info, la forme compléte est .my-notifications-info
• Pour les validations : my-notifications-okay, la forme compléte est .my-notifications-okay
• Du bouton de fermeture des notifications : my-notifications-close, la forme compléte est .my-notifications-close

L'instanciation avec paramètres

// Constructeur avec paramètres (tableau)
var myplugin = new $.myNotifications({
                                      'delay':-1,
                                      'containerId': 'truc-a-dire'
                                    });

Même chose que l'exemple précédént mais les notifications s'affichent perpetuellement, et le container principal se nomme désormais truc-a-dire

Plugin

Attributs

Arguments	Values	Description
`debug`	*True*	Affiche le déroulement du process dans la console de debug.
	False	Silencieux
`Container name`	string	Nom du container principal
`containerSelectorType`	string	Un selecteur CSS, `#`, `.`
`containerSelector`	string	Selecteur CSS
`listName`	string	Selecteur type
`listSelectorType`	string	Un selecteur CSS, `#`, `.`
`itemDisplayDelay`	int	Durée d'affichage des notifications en ms.Un entier négatif donne un affichage perpetuel
`itemDisplayDelay`	int	Nombre ajouts de notifications total dans la liste
`itemName`	string	Préfixe des notifications
`itemCount`	int	Nombre de notifications présentes dans le DOM
`itemCloseByClick`	*True*	Les notifications se ferment lors d'un click.
	False	Les notifications ne se ferment pas lors d'un click.
`itemCloseByButton`	*True*	Bouton de fermeture ajouté à chaques notifications.
	False	Pas de bouton
`itemClassError`	string	Class CSS des notifications d erreurs
`itemClassWarning`	string	Class CSS des notifications avertissement
`itemClassInfo`	string	Class CSS des notifications d information
`itemClassOkay`	string	Class CSS des notifications validation
`itemClassClose`	string	Class CSS du bouton fermeture de notification

Méthodes privées

• init() : Construit les attributs manquants de l'objet, s'assure de la présence dans le DOM du container
• buildContainerSelector() : Construit le selecteur CSS du container principal. eg : #container
• buildChildsAttributs() : Mets à jour l'index des notifications. Elles conservent comme ceci un nom unique
• containerIsSet() : Le container est il présent
• buildContainer() : Si le container n'est pas présent, on l'ajoute au DOM
• listenerClose() : Ecouteur d'évenement sur les notifications

Méthodes publics

Le plugin posséde une méthode principale :

• msg('title', 'text') : title est le type de notifications info | warning | error | okay Si title n'est pas un des 4 choix précédents, la notification sera de type custom, ayant pour titre de fenêtre title et comme texte text.

Alias

Les méthodes suivantes sont simplement des alias de msg() le paramétre de title est déjà assigné.

• msgError('text')
• msgWarning('text')
• msgOkay('text')
• msgInfo('text')

Dépôt Gihub

Fork me i'm famous

git clone git://github.com/inwebo/MyNotifications-Jquery-plugin.git