Pop in avec JQuery

Auteur : Naymenton
Créé le : 29/08/2009
Vus : 1276 fois
Dernière modification le : 26/11/2009
License :

Tous d'abord et avant toute chose je vous propose d'aller télécharger JQuery, qui nous le verrons plus tard, pour ceux qui ne le savent pas encore, est un framwork javascript.

{Attention pour une raison encore inconnue ce script rencontre quelques problèmes sous IE}

Introduction : JQuery

jQuery est un framework Javascript libre qui porte sur l'interaction entre JavaScript (comprenant AJAX) et HTML, et a pour but de simplifier des commandes communes de Javascript.

Le framework contient notamment les fonctionnalités suivantes :

- Parcours et modification du DOM (y compris le support des CSS 1 à 3 et un support basique de XPath) ;
- Événements ;
- Effets et animations ;
- Manipulations des feuilles de style en cascade (ajout/suppression des classes, d'attributs…) ;
- AJAX ;
- Plugins ;
- Utilitaires (version du navigateur…).

Bref, c'est une vraie petite merveille, on peut d'ailleurs voir sur le site officiel (dont je vous invite à aller le visiter) que de nombreux sites de renommée telle que firefox, dell, wordpress, drupal, nbc, google et bien d'autre l'ont adopté !

Petit bonus, pour les anglophobes, un site très complet regroupant la docs de JQuery traduite en français : JQuery Jarodoxx

Sa force, le sélecteur JQuery

Nous ne verrons pas ici, tous les aspects fondamentaux de JQuery, néanmoins, il serait un vrai sacrilège de ne pas parler du sélecteur d'élements de JQuery, qui est, selon moi un atout majeur du framwork, en effet il permet de combiner la synthaxe du CSS et de Xpath, finit donc les onClik(), onLoad(), qui trainent de partout et encombrent vos pages xHtml, bienvenue dans la nouvelle génération ou la forme et séparée du fond.

Il se présente sous la forme jQuery.$();
Un exemple simple, dont nous aurons besoin dans notre, script : récupérer tous les évenements onClick(); sur les liens possédant un certain attribut, ici [rel="connexion"]

Code JAVASCRIPT :

 
// Sélectionne tous les liens possédants l'attribut "rel" de valeur "connexion"
// et retourne dans une alerte son attribut "href" lors de l'évènement onClik();
// @ex : <a href="azerty/img.jpg" alt="" rel="connexion">Click me ! </a>
// @ =>: [azerty/img.jpg]
$("a[rel='connexion']").click(function(){
       alert("Ce lien possède l'attribut rel de valeur connexion et pointe vers "+$(this).attr("href");
       return false; // Retourne false, ce qui empêche l'ouverture d'une nouvelle fenêtre
});

Pour de plus amples informations : Selecteur JQuery

L'objectif

Formulation du besoin

*Nous voulons pouvoir afficher une pop-in permettant la connexion à notre site, qui à
l'aide d'un script php vérifiera l'intégrité des données envoyées, renvoyant à
l'utilisateur un message en cas d'échec ou de succès, tous cela évidement de façons
discrète, et asynchrone.
*De plus, nous voulons tirer partit du framwork JQuery pimentant notre pop-in de divers
effets graphiques.
*Évidemment, nous ne voulons pas que notre script puisse entrer en conflit avec d'autres.

Formulation des solutions

*Nous utiliserons un "aplat" recouvrant la totalité de la page, où sera affiché par dessus notre fenêtre de connexion, qui à l'aide d'une requête de type ajax nous permettra de nous logger sur notre site.
*Et bien nous en tirerons partit. fume

*Pour cela, nous créerons un objet, ce qui assurera l'intégrité de nos variables.

Le code html et css

Partie Html

Il va de soi que le code Html, ne sera pas un code persistant, mais un code dynamique seulement affiché lors de l'appel de la pop-in.

Code HTML :

 
<div id="connexion_box"> <--! Div regroupant toute notre pop-in -->
		<div id="connexion_aplat"> <--! L'aplat qui recouvrera notre page -->  
		</div>
		<div id="connexion_conteneur"> <--! Le conteneur de notre pop-in, les divers éléments contenu a l'intérieur seront positionné relativement par rapport a lui -->
			<div id="connexion_relative"> 
				<div id="connexion_close"> <--! Une image pour fermer la pop-in -->
				</div>
				<div id="connexion_contenu"> <--! Notre formulaire ! -->
				</div>
			</div>
		</div>
</div>

Et il en vas de même de notre formulaire, qui sera ajouter avec un effet de dégrader dans la div "connexion_contenu"

Code HTML :

 
<fieldset><legend>Authentification</legend></fieldset>	
		<form action="'+coBox.lien+'" methode="post" id="connexion_form"> <--! coBox.lien, liens vers le script de traitement php -->
			<label>Pseudo :</label>
				<input type="text" name="pseudo" id="connexion_form" />
			<label>Password :</label>
				<input type="password" name="password" id="connexion_form" /><br />
			<input type="submit" value="connexion" id="connexion_button/>
		</form>
		<div id="connexion_loader"> <--! Notre Loader, seulement afficher lors du chargement de la requête ajax 
		</div>
</fieldset>

Partie Css

Et bien, tous est dans les commentaires du code

Code CSS :

 
/* Connexion box */
#connexion_box{}
#connexion_box #connexion_aplat{
/* Position fixe, englobant toute la page,
Avec un z-index (permettant de géré les fenêtres multi-dimensions) énorme, pour recouvrir,
tous le site {9998 pour l'aplat et 9999 pour le contenu de la pop-in},
avec un curseur de type pointeur, au click, fermeture.
*/
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index: 9998;
	cursor:pointer;
}
#connexion_box #connexion_conteneur{
/* Position absolute, z-index supérieur a celui de l'aplat,
Avec un z-index (permettant de géré les fenêtres multi-dimensions) énorme, pour recouvrir,
ça position sera géré dinaymiquement avec le javascript pour centrer la fenêtre.
*/
	position: absolute;
	background-image:url('http://uwht.u7n.org/images/interface/fond2.png');
	background-repeat: repeat-x;
	background-color: black;
	z-index: 9999;
}
#connexion_box #connexion_contenu{
/* Un padding pour le contenu, "affine" le design */
	padding: 5px;
	padding-top: 15px;
}
#connexion_box #connexion_relative {
/* Position relative, permet a #connexion_contenu et #connexion_close,
contenu a l'intérieur d'être positionné relativement par rapport a cette div.
*/
	position: relative;
	width: 100%;
	height: 100%;
}
#connexion_box #connexion_close {
/* En haut a droite, une croix pour fermer la fenêtre */
	position: absolute;
	top: -12px;
	right: -12px;
	height: 30px;
	width: 30px;
	background: transparent url(http://uwht.u7n.org/includes/close.png) ;
	cursor: pointer;
	z-index: 9999;
}
#connexion_box #connexion_loader {
/* En bas a droite, positionne le loader a droite du formulaire */
	position: absolute;
	bottom: 50px;
	right: 20px;
	background: url(http://uwht.u7n.org/includes/loader.gif) center center no-repeat;
	width: 30px;
	height: 30px;
	z-index: 999999;
}
/*Fin connexion box */

Notre Objet Javascript : CoBox

Bien, bien, nous y voila enfin, l'ont vas pouvoir créé notre objet ! yeah

Donc, pour ceux ou celles qui ne l'auraient pas compris, pour nous aujourd'hui se sera à l'objet coBox que nous aurons a faire.

Mais comment on déclare un objet avec JQuery, ces attributs, ces méthodes ? O_o

C'est asse simple à vrais dire, voyons un exemple pour mieux comprendre la chose :

Code JAVASCRIPT :

 
// Création d'un nouveau objet "Bidule"
// Ouverture grâce à l'accolade {
Bidule = {
	// Déclaration d'une 1er méthode, init();
	/////////////////
		init : function(){
			// Déclarations des 1er attributs;
			Bidule.name        = "azerty"; 
			Bidule.age         = 18; 
			Bidule.vie         = 500; 
 
 
                        // Declaration d'une nouvelle methode tuer();
                        this.tuer = function(){
                           Bidule.vie = 0; // Allocation d'une nouvelle valeur a 
                                          // la variable membre vie {ou attribut}
                               alert("Boummm !!! "+Bidule.name+" se revoit une bombe H en pleins dans la tete !!!, Erk a seulement "+Bidule.age+" le voila six pied sous terre =@, RIP");
                        }
                        // Declaration d'une nouvelle methode
                        this.JCpowa = function() {
                            Bidule.vie= 500000000;
                            alret("Waaaaaaaaaaaaaaaao, miracle \O/ "+Bidule.name+" à "+Bidule.vie+" de vie, il a ressuscité Oo");
                        }
              }// Fermeture de la fonction init
// On finit par fermer l'objet;
}
 
var MonObjet = new Bidule.init(); // Consturteur d'un objet bidule
 
MonObjet.tuer();
MonObjet.JCpowa();
 
// Et voila, telle dieu tout puissant vous venez de tuer avant de ressuscite ce pauvre
// objet x)

Maintenant que les objets JQuery ce sont mis a nue devant vous, on peut commencer a donner vie a coBox.
Pour cette première partie de code, on vas créer deux function (sous entendu méthodes), init() qui initialisera les variables (sous entendu attributs ou variable membres) principales dont aura besoin notre objet, telle que la hauteur, largeur de la fenêtre, la durée en ms des animation, opacité de l'aplat, le lien de redirection en cas de réussite de login.
Et une autre function déclenché lors de l'événement onClik() d'un lien portant l'attribut "rel" de valeur "connexion" (Et oui je vous l'avais bien dis

)
Cette function aura pour but de charger le contenu html de la box dans la page html grâce à append(), ainsi que d'afficher en "dégradé" l'aplat à l'aide de la function fadeTo(), de JQuery.

Code JAVASCRIPT :

 
coBox = {
	// Configure la boite;
	/////////////////
		init : function(){
			// Declarations des atribut par default;
			coBox.heightD     = 200; // Hauteur default;
			coBox.widthD      = 350; // Largeur default;
			coBox.dure        = 500; // Dure des animation par default (ms);
			coBox.opacity     = 0.7; // Opacite de l'aplat;
			coBox.redirection = "index.php" // Url de redirection apres login;
 
                        //function evenementielle
			$("a[rel='connexion']").click(function(){
				coBox.lien = $(this).attr("href"); // Lien vers le script php de connexion;
 
				//Code Html Box;
                                //append permet d'insérer a la fin de l'element seletionné,
                                //ici body
				$('body').append('<div id="connexion_box"><div id="connexion_aplat"></div><div id="connexion_conteneur"><div id="connexion_relative"><div id="connexion_close"></div><div id="connexion_contenu"></div><div id="connexion_loader"></div></div></div></div></div>');
                                // On commence par cacher tous le contenu de la box,
                                // Pour pouvoir l'affiche par la suite avec quelque effets
				$("#connexion_conteneur").hide();
                                // On lance une animation sur l'aplat,
                                // Le faisant passé de transparent, a l'opacite choisit,
                                // en coBox.dure choisit
				$("#connexion_aplat").css("opacity",0).fadeTo(coBox.dure, coBox.opacity);
				// function qui lancera l'animation lors de l'apparition
                                // des éléments de la box
                                coBox.anim();
 
 
				return false;
			});
	}
}

Peut être l'aurez vous compris, toute les fonctions évènementielles seront en "ecoute" englobé dans la function init().
L'une des question que l'on peut se poser c'est, pourquoi ?
La réponse est simple, coBox.init() sera la seul fonction chargé par le document, il donc naturelle qu'elle y regroupe tous les "écouteur" de notre objet.
Comment demandé au document de la chargé ?

Code JAVASCRIPT :

 
// Rien de plus simple
$(document).ready(function(){
	coBox.init();
});
coBox = {
	// Configure la boite;
	/////////////////
		init : function(){
			// Declarations des atribut par default;
			coBox.heightD     = 200; // Hauteur default;
			coBox.widthD      = 350; // Largeur default;
			coBox.dure        = 500; // Dure des animation par default (ms);
			coBox.opacity     = 0.7; // Opacite de l'aplat;
			coBox.redirection = "index.php" // Url de redirection apres login;
 
                        //function evenementielle
			$("a[rel='connexion']").click(function(){
				coBox.lien = $(this).attr("href"); // Lien vers le script php de connexion;
 
				//Code Html Box;
                                //append permet d'insérer a la fin de l'element seletionné,
                                //ici body
				$('body').append('<div id="connexion_box"><div id="connexion_aplat"></div><div id="connexion_conteneur"><div id="connexion_relative"><div id="connexion_close"></div><div id="connexion_contenu"></div><div id="connexion_loader"></div></div></div></div></div>');
                                // On commence par cacher tous le contenu de la box,
                                // Pour pouvoir l'affiche par la suite avec quelque effets
				$("#connexion_conteneur").hide();
                                // On lance une animation sur l'aplat,
                                // Le faisant passé de transparent, a l'opacite choisit,
                                // en coBox.dure choisit
				$("#connexion_aplat").css("opacity",0).fadeTo(coBox.dure, coBox.opacity);
				// function qui lancera l'animation lors de l'apparition
                                // des éléments de la box
                                coBox.anim();
 
			        //Verif !empty puis ajax;
				$("form").submit(coBox.vForm);
 
				// Loader Ajax;		
				$("#connexion_loader").ajaxStart(function(){ $(this).show(); });
				$("#connexion_loader").ajaxStop(function(){ $(this).hide(); });
                                //Function evenementiel
				// Fermeture de la box;
				$("#connexion_close").click(coBox.close);
				$("#connexion_aplat").click(coBox.close);
				return false;
			});
	}
}

Voila qui est dis, vous voyez ici la function init() finale de notre objet, regroupent tous ces écouteurs evenementielle, mais patience, nous les aborderons une par une en temps voulus, attaquons nous tous d'abord a la function d'animation de notre box.

Et une animation grâce à JQuery, une !

Avant toute chose, avant même de pouvoir affiché notre box, il nous faut obtenir quelque chose d'essentielle, la taille de l'ecran de l'utilisateur, qui couplé a un calcule mathématique des plus hardu nous permettra de centrer notre box (en modifiant ces propriétés css à l'aide du javascript évidement)
On vas donc créé deux petites functions, WindowH() et windowW() :

Code JAVASCRIPT :

 
// Recupere la hauteur de la fenetre;
		windowH : function(){
                        // On tente tous d'abord avec les propriétés habituel du js
			if (window.innerHeight) return window.innerHeight  ;
			// Pour plus de précaution, en cas d'échec on fait appele a JQuery
                        else{return $(window).height();}
		},
 
		// recupere la Largeur de la fenetre;
		windowW : function(){
			if (window.innerWidth) return window.innerWidth  ;
			else{return $(window).width();}
		}

Voila qui est un bon début, mais infusant pour nous (Quoiiiiii O_o

???)
Et oui, il y a un paramètre a ne pas oublier, la scrollbare, cette foutu scrollbare, elle risque de faire planter tous nos beaux calcule, il est donc nécessaire de créé une function nous renvoyant le statut de la scrollbare.

Code JAVASCRIPT :

 
// Recupere la "hauteur" de la scrollbar;
		scrollY : function() {
		  scrOfY = 0;
		  if( typeof( window.pageYOffset ) == 'number' ) {
			//Netscape compliant;
			scrOfY = window.pageYOffset;
		  } else if( document.body && ( document.body.scrollTop ) ) {
			//DOM compliant;
			scrOfY = document.body.scrollTop;
		  } else if( document.documentElement && ( document.documentElement.scrollTop ) ) {
			//IE6 standards compliant mode;
			scrOfY = document.documentElement.scrollTop;
		  }
		  return scrOfY;
		  alert(scrOfY);
		}

Bien passons à la suite, que voulons nous faire ?
- Afficher notre box au centre de la page avec une animation,
- Y ajouter notre formulaire,
- En cacher tous ce contenu superflus pour pouvoir le faire apparaitre en dégradé grâce à JQuery une fois l'animation de la box terminé.

Nos armes :
- show();
- hide();
- append();
- animate();
- fadeIn();
- css();
- scrollY();
- windowH();
- windowW();

Le Résultat :

Code JAVASCRIPT :

 
anim : function() {
			// On affiche le conteneur;
			$("#connexion_conteneur").show();
                        // On cache le superflut
			$("#connexion_loader").hide();
			// On Centre la box;
			$("#connexion_conteneur").css("left", ((coBox.windowW()-coBox.widthD)/2)+"px");
			$("#connexion_conteneur").css("top", (coBox.scrollY()+(coBox.windowH()-coBox.heightD)/2)+"px");
			$("#connexion_close").hide();
			// Code Formulaire;
			$("#connexion_contenu").append('<fieldset id="connexion_form" style="display:block;"><legend>Authentification</legend><form action="'+coBox.lien+'" methode="post" id="connexions_form" style="width:50%;float:left;"><label>Pseudo :</label><input type="text" name="pseudo" id="pseudo_form" value=""/><label>Password :</label><input type="password" name="password" id="password_form" value="" /><br /><br /><input type="submit"  value="connexion" id="connexion_button" /></form>  </fieldset>');
 
                        // On cache encore le superflut
			$("#connexion_form").hide();
			// Animation;
			$("#connexion_contenu").css("opacity",0.8);
		        // Animation sur l'affichage de la box hauteur puis largeur;
	 $("#connexion_conteneur").animate({height:coBox.heightD},coBox.dure).animate({width:coBox.widthD}, coBox.dure, 'linear', function(){
                                // Et enfin on affiche le superflut
				$("#connexion_close").fadeIn();
				$("#connexion_form").fadeIn();
			});
			//$("#connexion_close").show();
 
		}

Fonction de soumition de formulaire

Souvenez vous de l'écouteur :

Code JAVASCRIPT :

 
$("form").submit(coBox.vForm);

Qui est une function de JQuery se déclenchant à la sumition de la sélection, ici l'élément formulaire, elle permet d'appelé une fonction qui dans notre cas vérifiera les champs posté, avant d'effectuer notre requête ajax.

Le contenu d'un champ de formulaire se récupère avec l'aide de val()
Nous enverrons au serveur une requête de type POST à l'aide de $.post()
Les données du formulaire seront passé en paramètre grâce à $("#connexions_form").serialize()
Et nous utiliserons une fonction callback récupérant les infos renvoyé par le serveur, pour pouvoir appliqué un traitement adéquate.

Code JAVASCRIPT :

 
vForm : function(){ 
			// Supression de la div rajouter en cas d'echec de login;
			$("#connexion_print").remove();
 
			// Quelques test sur "l'integritÃ©es des champs;
			coBox.champ1 = false;
			coBox.champ2 = false;
			if($("input[id='pseudo_form']").val() != "" && $("input[id='pseudo_form']").val().length >= 3) {
				 coBox.champ1 = true;
				$("input[id='pseudo_form']").css("background", "green");
			}
			if($("input[id='password_form']").val() != "" && $("input[id='password_form']").val().length >= 3) {
				coBox.champ2 = true;
				$("input[id='password_form']").css("background", "green");
			}
			if( coBox.champ1 == true && coBox.champ2 == true)
			{
				// Requete Ajax;
				$.post( coBox.lien,
					$("#connexions_form").serialize(), function(data){
						if(data == "false"){
							$("#connexion_form").append("<div id='connexion_print' style='float:right;'><font color=red> Mauvais login ou mot de passe !</font></div>");
						}
						else{
							$("#connexion_form").append("<div id='connexion_print' style='float:right;'><font color=green> Connexion effectuÃ© avec succÃ© ! </font></div>");
							setInterval(function(){
								setInterval(coBox.close(), 4500);
							}, 5000);
						}
					});
 
 
			}
			else {
				if ( coBox.champ1 == false) {
					$("input[id='pseudo_form']").css("background", "red");
				}
				if (coBox.champ2 == false) {
					$("input[id='password_form']").css("background", "red");
				}
			}
			return false;
 
 
		}

Ici l'envoie d'un requête ajax aura pour effet secondaire de réveiller notre écouteur ajaxStart() lançant une function affichant notre loader, de même lors de ajaxStop()

Code JAVASCRIPT :

 
$("#connexion_loader").ajaxStart(function(){ $(this).show(); });
$("#connexion_loader").ajaxStop(function(){ $(this).hide(); });

Pour conclure : function de fermeture !

Pour la function close, un petit fadeOut() sur notre box, avant de la remove() et de lancer une redirection.

Code JAVASCRIPT :

 
// On efface le code genere;
		close : function(){
			$("#connexion_box").fadeOut(coBox.dure, function(){
				$("#connexion_box").remove();
				document.location.href=coBox.redirection;
			});
		}

Conclusion

Pas si mal JQuery ?

Code complet (CAD, avec le fichier php gérant la vérification de l'intégrité des données de connexion soumises, non décrit ici, car tellement simple :P) : Code Source

Source(s) : Wiki, Grafikart

Remonter