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

Télécharger le projet
Commenter

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
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (cs_Nementon)