Mynotifications

Soyez le premier à donner votre avis sur cette source.

Vue 5 595 fois - Téléchargée 783 fois

Description

Plug in Jquery de notification visuel d'événements.
Nécessaire

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

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.
Container

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

<div id="container"></div>

Liste

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

<ul></ul>

Item

Est un item de liste avec un id unique et une classe CSS.

<li id="message-0" style="display: block;" class="my-notifications-error">
<h6>Error<a class="my-notifications-close" href="#" onclick="return false;">x</a></h6>
<p>Message d'erreur.</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': 'notifications'
});

Même chose que précedemment mais les notifications s'affichent perpetuellement, et le container principal se nomme désormais notifications

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')

Installation

Le plugin pour fonctionner nécessite :

Jquery 1.6.8+
Une feuille de style (non nécessaire)
Le plugin

Dépôt Gihub

Fork me i'm famous

https://github.com/inwebo/MyNotifications-Jquery-plugin/

WIKI

https://github.com/inwebo/MyNotifications-Jquery-plugin/wiki

Source / Exemple :


/**

  • My.Notifications
*
  • Plugin Jquery de notification visuel d'événements. Simple et configurable
*
  • LICENCE
*
  • Vous êtes libre de :
*
  • Partager : reproduire, distribuer et communiquer l'oeuvre
  • Remixer : adapter l'oeuvre
*
  • Selon les conditions suivantes :
*
  • Attribution : Vous devez attribuer l'oeuvre de la manière indiquée par
  • l'auteur de l'oeuvre ou le titulaire des droits (mais pas d'une manière
  • qui suggérerait qu'ils vous soutiennent ou approuvent votre utilisation
  • de l'oeuvre).
*
  • Pas d&#8217;Utilisation Commerciale : Vous n'avez pas le droit d'utiliser cette
  • oeuvre à des fins commerciales.
*
  • Partage à l'Identique : Si vous modifiez, transformez ou adaptez cette
  • oeuvre, vous n'avez le droit de distribuer votre création que sous une
  • licence identique ou similaire à celle-ci.
*
  • Remarque : A chaque réutilisation ou distribution de cette oeuvre, vous
  • devez faire apparaître clairement au public la licence selon laquelle elle
  • est mise à disposition. La meilleure manière de l'indiquer est un lien vers
  • cette page web.
* ;(function ($){ $.Notification = function (title, text, options) { var defaults = { debug:true, selectors: { i:"#notification-" }, id:-1, life:-1, closeSelf:true, closeButton:true, style: { main:"notification", error:"error", warning:"warning", info:"info", success:"success", custom:"custom", button:"close" } }; var plugin = this; plugin.settings = {}; var init = function() { plugin.settings = $.extend( {}, defaults, options ); plugin.settings.name = 'MyItems'; plugin.settings.version = '12-2012'; plugin.settings.id = plugin.settings.selectors.i + plugin.settings.id; plugin.settings.selectors.button = plugin.settings.id + " a." + plugin.settings.style.button; plugin.title = title; plugin.text = text; plugin.cache = { container : $("<li></li>").attr( 'id', plugin.settings.id.substring( 1, plugin.settings.id.length ) ).attr('class', plugin.settings.style.main), header : $("<h6></h6>").html( plugin.title ), body : $("<p></p>").html( plugin.text ), button : $("<a></a>").attr( 'class', plugin.settings.style.button ).attr('href', '#').attr('onClick', 'return false;').html('x') }; plugin.cache.object = _Factory(); }; var _Factory = function() { _Title(); return $( plugin.cache.container ).append( $( plugin.cache.header ) ).append( $( plugin.cache.body ) ) }; var _Title = function() { switch( plugin.title ) { case 'error' : plugin.cache.container.addClass( plugin.settings.style.error ); break; case 'warning' : plugin.cache.container.addClass( plugin.settings.style.warning ); break; case 'info' : plugin.cache.container.addClass( plugin.settings.style.info ); break; case 'success' : plugin.cache.container.addClass( plugin.settings.style.success ); break; default : plugin.cache.container.addClass( plugin.settings.style.custom ); break; } if( plugin.settings.closeButton === true ) { $( plugin.cache.header ).append( $( plugin.cache.button ) ); } }; plugin.Remove = function() { $( plugin.settings.id ).remove(); }; plugin.ToString = function() { return plugin.cache.object[0].outerHTML; }; plugin.To$ = function() { return plugin.cache.object; }; plugin.Handler = function() { // Self close by click if( plugin.settings.closeSelf === true ) { $( plugin.settings.id ).bind( 'click', function() { plugin.Remove(); } ); } // Close by button if( plugin.settings.closeButton === true ) { $( plugin.settings.selectors.button ).bind( 'click', function() { plugin.Remove(); }); } // Auto fade if(plugin.settings.life > 0) { $( plugin.settings.id ).delay( plugin.settings.life ).fadeOut( 'fast',function(){ plugin.Remove(); }); } }; init(); }; $.myNotifications = function( options, notificationDefaults ) { // Arguments var defaults = { // Affiche dans la console de firebug le déroulement du processus debug: true, // selecteurs CSS selectors : { // Container principal container : "#notifications", // Current list list: "#list" }, // Entier unique seed:-1 }; /*
  • Surcharge du constructeur par defaut d'une notification. Voir $.Notification
  • /
var notification = { debug:true, selectors: { i:"#notification-" }, id:-1, life:-1, closeSelf:true, closeButton:true, style: { main:"notification", error:"error", warning:"warning", info:"info", success:"success", custom:"custom", button:"close" } }; var plugin = this; plugin.settings = {}; /*
  • Constructeur de l'objet
  • /
var init = function() { // Construction des attributs plugin.settings = $.extend({}, defaults, options); plugin.notification = $.extend({}, notification, notificationDefaults); plugin.settings.name = 'MyNotifications'; plugin.settings.version = '11-2012'; plugin.settings.listItemSelector = plugin.settings.listSelectorType + plugin.settings.listName + ' li'; plugin.cache = { container:$( plugin.settings.selectors.container ), list:$(plugin.settings.selectors.list) }; ( !_DomReady() ) ? _DomBuild() : null; }; /*
  • Le container principal est il présent dans le DOM
*
  • @return true si il est déjà présent sinon false
*
  • /
var _DomReady = function() { if( plugin.cache.container.length === 0 ) { debug( 'Container ' + plugin.settings.selectors.container + ' doesn\'t exist' ); return false; } else { debug( 'Container ' + plugin.settings.selectors.container + ' found' ); return true; } }; /*
  • Le container principal n'est pas présent, on l'ajoute au DOM
  • Cela sera le dernier noeud enfant du noeud body
*
  • @return void
  • /
var _DomBuild = function() { var c = $( '<div></div>' ).attr( 'id' , plugin.settings.selectors.container.substring(1,plugin.settings.selectors.container.length) ); var l = $( '<ul></ul>' ).attr( 'id' , plugin.settings.selectors.list.substring(1,plugin.settings.selectors.list.length) ); $('body').append( c.append( l ) ); debug('Container id : '+ plugin.settings.selectors.container +' and list '+plugin.settings.selectors.list+' added to dom.'); }; /*
  • Ajout un objet jquery $.Notification dans la liste courante
  • Cela sera le dernier noeud enfant du noeud body
*
  • @param obj L'objet Jquery à ajouter
*
  • @return void
  • /
var _AddItem = function( obj ) { $( plugin.settings.selectors.list ).append( obj ); }; /*
  • Affiche une notification ayant comme titre title et avec comme
  • text text
*
  • @param title Un type prédéfini parmi okay | warning | error | info
  • peut être défini par l'utilisateur, la notifications
  • sera un message
*
  • @param text Le text à afficher
*
  • @param notificationDefaults object Objet de configuration de notifications
  • voir le constructeur $.Notification
*
  • @return void
*
  • /
plugin.Notification = function ( title, text, notificationDefaults ) { plugin.settings.seed++; var settings = $.extend({}, plugin.notification, notificationDefaults,{id:plugin.settings.seed}); var item = new $.Notification(title, text, settings); _AddItem( item.To$() ); $( plugin.settings.selectors.list ).append( item.To$() ); item.Handler(); }; /*
  • Alias de Notice('error', text)
  • /
plugin.E = function( text ) { plugin.Notification( 'error' , text); }; /*
  • Alias de Notice('warning', text)
  • /
plugin.W = function( text ) { plugin.Notification('warning' , text); }; /*
  • Alias de Notice('info', text)
  • /
plugin.I = function( text ) { plugin.Notification( 'info' , text); }; /*
  • Alias de Notice('success', text)
  • /
plugin.S = function( text ) { plugin.Notification( 'success' , text); }; /*
  • Debug
  • /
var debug = function( text ) { // Verifie que ce n'est pas internet explorer if( (window['console'] !== undefined) ){ console.info( text ); } }; // Construteur init(); } })(jQuery);

Conclusion :


La source est je pense assez clair et commentée. /!\ La documentation n'est plus à jour

Démonstration

http://www.inwebo.net/demo/plugin.mynotifications/

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

MacGaliver
Messages postés
146
Date d'inscription
vendredi 28 mai 2010
Statut
Membre
Dernière intervention
21 juillet 2013
3
Salut,

Info: Sous IE10 doit-être compatible.
Si vous êtes sous Windows 7, IE10 est disponible en version finale.
http://windows.microsoft.com/fr-fr/internet-explorer/downloads/ie-10/worldwide-languages

Eh, oui Microsoft se standardise (yé pas trop tôt).
rayman223
Messages postés
24
Date d'inscription
dimanche 9 décembre 2007
Statut
Membre
Dernière intervention
7 avril 2013

Très joli travail :)
rayman223
Messages postés
24
Date d'inscription
dimanche 9 décembre 2007
Statut
Membre
Dernière intervention
7 avril 2013

Très sympa comme source :)
Merci beaucoup :)
paustmart
Messages postés
19
Date d'inscription
dimanche 2 novembre 2003
Statut
Membre
Dernière intervention
26 novembre 2013

Excellent fonctionne correctement sous IE9, Maxthon à l'adresse indiquée http://www.inwebo.net/demo/plugin.mynotifications/
Neo_Ryu
Messages postés
21
Date d'inscription
mercredi 14 janvier 2004
Statut
Membre
Dernière intervention
6 juin 2011

Une source intéressante... ! =)

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.