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

Soyez le premier à donner votre avis sur cette source.

Vue 14 454 fois - Téléchargée 1 497 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

@karamel
Messages postés
1705
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
12 juillet 2019
40 -
bonjour

sa ne fonctionne pas sur IE ,sous chrome l'image de fond ainsi que le bouton le texte et la croix n'apparaissent pas et sur opera le fond est decale et le bouton n'apparait pas il n'y a que sur ff que sa fonctionne bien
cs_Nementon
Messages postés
21
Date d'inscription
dimanche 27 janvier 2008
Statut
Membre
Dernière intervention
25 mai 2010
-
Effectivement ... je n'avais pas vus ca .. --"
Merci de l'avoir signaler, je vais voir comment régler ceci ! :)
cs_Nementon
Messages postés
21
Date d'inscription
dimanche 27 janvier 2008
Statut
Membre
Dernière intervention
25 mai 2010
-
Voila, bugs sous Opera et chrome fixés et réglés, mais malheuresement j'ai bien du mal a trouver une explication a celui de IE, donc si quelqu'un a une idée, n'hésitez pas !
Vavavlp
Messages postés
16
Date d'inscription
samedi 8 septembre 2007
Statut
Membre
Dernière intervention
27 avril 2009
-
J'ai pas tester ta source mais j'avais eu des problèmes avec jquery et IE, il faut que le doctype de la page soit en xHTML.
jdmcreator
Messages postés
656
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
1 -
Utilise la console d'erreur d'IE que tu peux télécharger sur le site de Microsoft pour trouver l'erreur ;) mais j'ai perdu le lien...

JDMCreator

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.