Class pop-in avec effet sous jquery de "connexion" style cs {ajax}

Soyez le premier à donner votre avis sur cette source.

Vue 14 565 fois - Téléchargée 1 508 fois

Description

Une pop-in lier a un fichier php, pour enchanter les formulaires de connexion de vos site :p

- Pour son installation :

Inclure dans le header de votre fichier htlm :
-<script type="text/javascript" src="jquery.js"></script>
-<script type="text/javascript" src="connexionbox.js"></script>
-<link rel="stylesheet" media="screen" type="text/css" title="Nementon-PopIn" href="connexionbox.css" />

(Attention, bien inclure jQuery en premier);

Pour sont utilisation :
<a href="ajaxPopin.php" alt="" rel="connexion" />

Elle s'approprie tous les lien dont l'attribut rel équivaut a "connexion", le fichier ajaxPopin.php et celui que je livre avec la pop-in, libre a vous de changer tous ça :)

Un tutoriel sur la réalisation du script est disponible ici : http://uwht.u7n.org/tutoriel-programmation-23-10.html

Source / Exemple :


/* ------------------------------------------------------------------------
	Class: ConnexionBox
	Auteur: Nementon (http://www.uwht.u7n.org || http://uwht.fr)
	Version: 1.0.0
	
	Html Box: 
	<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>
		</div>
	</div>

	Html Form:
	<fieldset><legend>Authentification</legend></fieldset>	
		<form action="'+coBox.lien+'" methode="post" id="connexion_form">
			<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">
		</div>
	</fieldset>
 
------------------------------------------------------------------------- */

$(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;
			
			$("a[rel='connexion']").click(function(){
				coBox.lien = $(this).attr("href"); // Lien vers le script php de connexion;

				//Code Html Box;
				$('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>');
				$("#connexion_conteneur").hide();
				$("#connexion_aplat").css("opacity",0).fadeTo(coBox.dure, coBox.opacity);
				coBox.anim();
				
				//Verif !empty puis ajax;
				$("form").submit(coBox.vForm);
				 
				// Loader Ajax;		
				$("#connexion_loader").ajaxStart(function(){ $(this).show(); });
				$("#connexion_loader").ajaxStop(function(){ $(this).hide(); });
				// Fermeture de la box;
				$("#connexion_close").click(coBox.close);
				$("#connexion_aplat").click(coBox.close);
				return false;
			});
	},
		
		anim : function() {
			// On commence par cacher tous le contenu;
			$("#connexion_conteneur").show();
			$("#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>');

			$("#connexion_form").hide();
			// Animation;
			$("#connexion_contenu").css("opacity",0.8);
			$("#connexion_conteneur").animate({height:coBox.heightD},coBox.dure).animate({width:coBox.widthD}, coBox.dure, 'linear', function(){
				$("#connexion_close").fadeIn();
				$("#connexion_form").fadeIn();
			});
			//$("#connexion_close").show();
			
		},
		
		// On efface le code genere;
		close : function(){
			$("#connexion_box").fadeOut(coBox.dure, function(){
				$("#connexion_box").remove();
				document.location.href=coBox.redirection;
			});
		},
		
		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;
			
			
		},
		
		// 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);
		},
		
		// Recupere la hauteur de la fenetre;
		windowH : function(){
			if (window.innerHeight) return window.innerHeight  ;
			else{return $(window).height();}
		},
		
		// recupere la Largeur de la fenetre;
		windowW : function(){
			if (window.innerWidth) return window.innerWidth  ;
			else{return $(window).width();}
		}	

	}

Conclusion :


C'est mon 1er script sous JQuery, n'hésitez pas a donner vos avis (bon ou mauvais, je suis preneur !)

Ps : L'envoie de l'archive semble bugger ce soir, je poste le code source du fichier javascript et retenterai d'uploder l'archive d'ici peu

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

cs_delsuza
Messages postés
1
Date d'inscription
mercredi 2 juin 2010
Statut
Membre
Dernière intervention
2 juin 2010
-
ligne 126. du js

# setInterval(function(){
# setInterval(coBox.close(), 4500);
# }, 5000);

par

var interval = setInterval(function(){

setInterval(coBox.close(), clearInterval(interval));

}, 5000);

si on lance plusieurs fois la box après avoir cliqué sur envoyer (qui renvoi sur la même page sans être rafraichie et sans le php), l'intervalle est plus court ;)

un petit clearInterval ne fait pas de mal ^^
bobeclair
Messages postés
2
Date d'inscription
dimanche 5 janvier 2003
Statut
Membre
Dernière intervention
7 mars 2010
-
bonjour,

j'avais trouvé une erreur concernant l'apparence du formulaire lorsque le login n'était pas correct.
Tu as fait une condition qui n'est pas exacte en ligne 119 du fichier js : if(data == "false")
Ta condition porte sur la valeur d'un string alors qu'elle devrait porter sur la valeur d'un booléen, ce qui fait que l'erreur n'est pas correctement traitée en cas de mauvais login.
en enlevant les guillemets ça fonctionne ;-)...parole de testeur
cs_Nementon
Messages postés
21
Date d'inscription
dimanche 27 janvier 2008
Statut
Membre
Dernière intervention
25 mai 2010
-
Merci du compliment, mais pour le commentaire de Lanner, il n'était pas si méchant que ca ; )
Bon par contre c'est unê source, donc qui dis source ... dis l'obligation presque certaine de la trifouiller, alors, comme la facilité est loin d'être une bonne amie, j'invite tous les membres intéressés par la chose, a se faire violence et à rectifier ma petite erreur de syntaxe par eut même (Héhé, merci la facilité).
bobeclair
Messages postés
2
Date d'inscription
dimanche 5 janvier 2003
Statut
Membre
Dernière intervention
7 mars 2010
-
bonjour,
je trouve le commentaire acerbe injustifié et de mauvaise foi : tu as le mérite de poster du code propre et expliqué, ce qui n'est pas toujours le cas.
Bon boulot !!!!
cs_lanner
Messages postés
132
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
8 avril 2015
-
Salut

ajaPopin.php

debut du fichier : <?phpa

Normal ? ^^

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.