https://github.com/inwebo/notifications

Simple and easy to configure notification jquery plugin
https://github.com/inwebo/notifications

Last synced: about 2 months ago
JSON representation

Simple and easy to configure notification jquery plugin

• Host: GitHub
• URL: https://github.com/inwebo/notifications
• Owner: inwebo
• Created: 2012-05-13T15:33:42.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2015-01-19T14:34:44.000Z (almost 10 years ago)
• Last Synced: 2023-03-14T00:35:20.917Z (almost 2 years ago)
• Language: JavaScript
• Size: 914 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.markdown

Awesome Lists containing this project

README

        
# MyNotifications

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

## Démonstration

[Démonstration en ligne](http://www.inwebo.net/demo/plugin.mynotifications)

## 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

    

## 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

    


### Liste

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

    


#### Notification

Est un item de liste avec un *id* unique, un style *notification*, et une classe de 

spécialisation ici *warning*

    


        
warningx



        
Notification body's

    


### 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