41Mag - Tutoriel : Des notifications au chargement de la page ou au clic comme Growl sous Mac OSx en jQuery

Tutoriel : Des notifications au chargement de la page ou au clic comme Growl sous Mac OSx en jQuery

Dans ce tutoriel, nous allons vous détaillé comment afficher des notifications au chargement de la page ou au clic comme Growl sous Mac OSx en jQuery.

Le but de ce TP sera d’afficher des messages de notifications, petite fenêtre indépendante, au chargement de la page. Ces notifications pourront également s’afficher au clic. Pour mettre ce systeme en place nous utiliserons les bibliothèque jQuery et modern UIKit. Ainsi, nous pourrons parametrer la notification : disparition automatique, temps d’affichage, disparition au clic … Et enfin, en annexe, nous coderons en javascript pour qu’une fenêtre de notification nous affiche le nombre de fois ou nous avons consulté la page (utilisation des cookies).

Nous vous détaillerons pas à pas les différentes étapes de création. Bien qu’elle ne soit pas obligatoire, une connaissance minimum en HTML5 est souhaitée pour la compréhension. En savoir plus sur  : le HTML5, tutoriel complet.

Le résultat final

Introduction

Le tutoriel se déroulera dans l’ordre suivant :

  1. Création d’une page web
  2. Relier les bibliothèque jQuery et Modern UIKit
  3. Le script jQuery pour afficher les notifications
    • Au chargement de la page
    • Au clic
  4. Ajuster le CSS
  5. Annexe : Compter le nombre de fois qu’un visiteur consulte la page en javaScript

Création d’une page web simple

Pour commencer, nous allons créer le corps de notre page web en HTML5 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Demo : Notification au chargement de la page et au click come Growl sous Mac OSx</title>
 
</head>
<body>
 
        <h1>Demo : Notification au chargement de la page et au click<br /> comme Growl sous Mac OSx</h1>
 
	<article>
	Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto Caesare, quem videri decuerat, ad praetorium cum pompa sollemni perrexit morbosque diu causatus nec regiam introiit nec processit in publicum, sed abditus multa in eius moliebatur exitium addens quaedam relationibus supervacua, quas subinde dimittebat ad principem.<br />Eodem tempore etiam Hymetii praeclarae indolis viri negotium est actitatum, cuius hunc novimus esse te.<br />Eodem tempore etiam Hymetii praeibus victus inopitegre sine ulla restituit mora.ublicum, sed abditus multa in eius moliebatur exitium addens quaedam relationibus supervacua, quas subinde dimittebat ad principem<
	</article>
 
 
<footer>
	<p>Copyright - <a href="http://www.41mag.fr">41Mag</a></p>
</footer>
 
</body>
</html>

Le code ci-dessus étant suffisamment simple à comprendre, nous n’apporterons aucune précision supplémentaire.

Relier les bibliothèque jQuery et Modern UIKit

Relier la bibliothèque jQuery

Nous utiliserons la bibliothèque jQuery pour réaliser l’animation de nos notifications. Commencez par télécharger la dernière version de jQuery et reliez-le à votre document en ajoutant la ligne de code ci-dessous entre les balises <head> et </head> :

1
2
<!-- jQuery  -->
<script src="js/jquery-1.4.3.min.js"></script>

Relier la bibliothèque Modern UIKit

Modern UIKit est une petite collection de composants JavaScript et jQuery pour le web moderne. Elle va nous permettre de réaliser très rapidement nos messages de notifications. Il ne nous restera quasiment plus qu’a ajuster le CSS. Si vous ne parvenez pas à mettre la main sur cette bibliothèque et sa feuille de style, Télécharger les fichiers de démo des Notifications. Les deux fichiers sont à l’intérieur (script et CSS).

Reliez la biliotheque Modern UIKit et sa feuille de style à votre document en ajoutant la ligne de code ci-dessous entre les balises <head> et </head> :

1
2
3
<!-- Modern UIKit  -->
<script src="UIKit.js"></script>
<link rel="stylesheet" href="UIKit.css" />

Le script jQuery pour afficher les notifications

Au chargement de la page

Nous allons maintenant réaliser le script jQuery qui nous permettra d’afficher nos notifications au chargement de la page. En reprenant la documentation de Modern UIKit, nous allons relier et transmettre les informations suivantes :

1
ui.notify('Titre du message', 'Corps du message')

Ce qui donne :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script language="Javascript">
$(document).ready(function () {
 
	setTimeout(function(){
      ui.notify('Notification 01', 'Cette premiere notification s\'affichera quelques secondes puis disparaitra.')
        .effect('slide');
 
      setTimeout(function(){
        ui.notify('Notification 02', 'Cette deuxieme notification s\'affichera plus longtemps que la premiere.')
          .closable()
          .hide(8000)
          .effect('slide');
 
        setTimeout(function(){
          ui.notify('Bienvenue sur le 41Mag', 'C\'est votre '+lit_cook('visite')+' visite(s) sur notre demo de notification like Growl')
            .sticky()
            .effect('slide');
        }, 200);
      }, 200);
    }, 200);
 
 
});
</script>

Pour la deuxième notification, nous lui avons ajouter l’attribut .hide() ayant pour valeur 8000. Cette valeur s’exprime en miliseconde et indique la durée d’affichage de notre notification avant que celle-ci ne disparaisse automatiquement (Ligne 11).

Pour la troisième et dernière notification, nous lui avons ajouter l’attribut .sticky() (ligne 16). Il détermine la façon dont la notification disparaitra. En l’occurrence, dans ce troisième exemple, la notification ne disparaitra qu’apres avoir été fermé manuellement par votre visiteur (croix de fermeture en haut à droite de la notification).

Déclechement des notifications au clic

Pour cette exemple, les notifications ne devront s’afficher qu’après un clic du visiteur sur un lien les declanchant.

Nous allons donc créer une fonction jQuery qui affichera les notifications lorsqu’un visiteur aura cliquez sur un lien. Pour identifier ce lien, nous lui ajouterons l’attribut ID avec la valeur notify. Commencez par coder le lien en HTML5 :

1
2
<p>Notification au click qui ne dure que quelques secondes : <a href="#" id="notify">Cliquez ici</a></p>
<p>Notification au click qui a besoin d'etre fermer pour disparaitre : <a href="#" id="notify2">Cliquez ici</a></p>

Nous avons créer deux liens car, comme pour le déclenchement des notifications au chargement de la page (chapitre précédent), nous leurs appliqueront différents effets : Une première notification qui ne durera que quelques secondes avant de disparaitre, puis une deuxième qui ne disparaitra qu’apres fermeture par votre visiteur.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
$(document).ready(function (e) {
 
	$('#notify').click(function(e){
 	ui.notify('Notification au click', 'Cette notification ne restera afficher qu\'une poignee de secondes ...')
    .effect('slide');
	});
 
	$('#notify2').click(function(e){
 	ui.notify('Notification au click', 'Cette notification ne restera afficher qu\'une poignee de secondes ...')
	.sticky()
    .effect('slide');
	});
});
</script>

Pour le deuxième lien, nous lui avons ajouter l’attribut .sticky() (ligne 11). Il détermine la façon dont la notification disparaitra. Ici, la notification ne disparaitra qu’apres avoir été fermé manuellement par votre visiteur (croix de fermeture en haut à droite de la notification).

Ajuster le CSS de Modern UIKit

Avec Modern UIKit, le style est déjà pré-reglé mais vous aurez surement besoin de l’ajuster à vos projets. Dans notre exemple, nous lui avons une bordure que nous avons arrondi. Nous avons également changé la couleur d’arrière plan et la police de caractères.

Ouvrez la feuille de style de Modern UIKit et repérer l’élément .notification. Il ne vous reste plus qu’à lui ajouter vos styles …

1
2
3
4
5
6
7
8
9
10
.notification {
  position: relative;
  max-width: 250px;
  min-width: 250px;
  border: 1px solid #eee;
  background: #e9e9e9;
  border:2px solid #ccc;
  border-radius:4px;
  z-index: 100;
}

Annexe : Un compteur du nombre de fois qu’un visiteur consulte la page s’affiche dans les notifications en javaScript

Ce dernier chapitre est un exemple des possibilité que nous offrent ces notifications. Nous avons choisis d’afficher le nombre de fois qu’un visiteur consulte la démo du tutoriel. Nous utiliserons le javaScript pour la gestion des cookies dans le script suivant :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script>
 function cre_cook0(nom,contenu) {
      document.cookie = nom + "=" + escape(contenu)
      }
 
   function cre_cook(nom,contenu,jours) {
      var expireDate = new Date();
      expireDate.setTime(expireDate.getTime() + jours*24*3600*1000);
      document.cookie = nom + "=" + escape(contenu)
         + ";expires=" + expireDate.toGMTString();
      }
 
   function lit_cook(nom) {
      var deb,fin
      deb = document.cookie.indexOf(nom + "=")
      if (deb >= 0) {
         deb += nom.length + 1
         fin = document.cookie.indexOf(";",deb)
         if (fin < 0) fin = document.cookie.length
         return unescape(document.cookie.substring(deb,fin))
         }
      return ""
      }
 
    function tue_cook(nom) { cre_cook(nom,"",-1) }
 
	function incremCook(nom) {
	  recupCook = lit_cook(nom)
	  recupCook = parseInt(recupCook) + 1;
	  cre_cook('visite', recupCook, '90')
	  }
 
    // Est-ce qu'il y a un cookie qui existe ?
	c=lit_cook('visite')
        if(c=="") cre_cook('visite','1', '90')
	else incremCook('visite')
 
</script>

Il ne nous reste plus qu’a afficher le nombre de visite dans une notification :

1
ui.notify('Bienvenue sur le 41Mag', 'C\'est votre '+lit_cook('visite')+' visite(s) sur notre demo de notification like Growl')

Pour tous problèmes ou questions sur ce tutoriel, veuillez utiliser les commentaires.

Article du même thême : ..

  • MP

    Ne marche pas sous IE, la croix de fermeture n’apparait pas.

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.