Tutoriaux JQuery, Plugins Jquery, Menu JQuery, Effets JQuery, Créer son premier plugin Jquery

Tutoriel du menu JQuery de cette page (Partie 1)

HTML

>> Avant de s'intéresser à la mise en forme, insérez ce code dans une page vierge entre les balises <body> et </body>

>> Une balise DIV en contient 4 autres représentant chacune les onglets du menu. Veillez bien à leur assigner un id unique mais une même classe pour toutes. id="menu1",id="menu2,etc... et class="menu"


<div id="groupe">
	<div id="menu1" class="menu">
		Accueil 
		<br>					
		<p>Nous avons réservé cette page<br>aux addicts à JQuery</p>
	</div>>	
		<br>
		<br>				
	<div id="menu2" class="menu"> 
		Tutoriaux 
		<br>	
		<p>Nous sommes en pleine<br>préparation de la page</p>
	</div>
		<br>
		<br>					
	<div id="menu3" class="menu"> 
		Plugins 
		<br>						
		<p>Nous vous disons<br>à très bientôt !!!</p>
	</div>		
		<br>
		<br>						
	<div id="menu4" class="menu"> 
		Liens 
		<br>
		<p>>Quelques liens intéressants<br>ou incontournables</p>		
	</div>
</div>

CSS

>> Vous allez maintenant mettre en forme votre code HTML pour qu'il puisse apparaitre sous la forme d'onglets cliquables Veillez à inclure ce code entre des balises <style> et </style> ou en les insérant dans un fichier externe .css

>> Cette mise en forme va permettre la disposition de vos onglets et de ne pas les laisser apparaitre entièrement au démarrage sur la page.



#groupe div {
	
	width:350px; /* Largeur de votre onglet */
	height:60px; /* Hauteur de votre onlet */
	border:1px solid #fff; /* Bordure blanche de 1px d'épaisseur */
	text-align:right; /* Alignement du texte à droite */
	margin-left:-250px; /* Marge gauche négative permettant de masquer une partie de votre div
	color:#00008B; /* Couleur du texte */
	background:#C0C0C0; /* Couleur de fond */
	cursor:pointer; /* Changement de l'apparence du pointeur de la souris */
	/* Ces 4 lignes génèrent l'effet d'ombre sur vos onglets */
	box-shadow: 				10px 10px 5px #C0C0C0;
	-o-box-shadow:			10px 10px 5px #C0C0C0;
	-moz-box-shadow:		10px 10px 5px #C0C0C0;
	-webkit-box-shadow:	10px 10px 5px #C0C0C0;

}

#groupe div p {	
	
	text-align:left;/* Le texte placé dans une balise <p> sera aligné à gauche pour ne pas apparaitre au départ.
	margin-left:2px; /* Espace de 2 pixels entre la bordure gauche et le texte */
	color:#ffff00;

}

jQuery

>> Vous allez pouvoir maintenant rendre votre menu interactif en respectant certaines consignes. Tout d'abord veillez à ce que votre page soit bien liée à la dernière version du framework Jquery.
Téléchargez-le sur http://jquery.com et liez le fichier .js à la page

>>Cette liaison (Ainsi que le code ci-dessous) doit s'effectuer entre les balises <head> et </head> de cette façon :
>><script> type="text/javascript" src="jquery-1.3.2.js"></script>


<script type="text/javascript">
	
jQuery.noConflict; //Permet de gérer les conflits entre les différents plugins liés à la page.
					
jQuery(document).ready(function() { //Implémante la fonction une fois la page totalement chargée. 
													
var idMenu; //Contiendra l'id de l'onglet via la fonction recupId
var nMargin; //Contiendra la position 
							
jQuery(function(){ 
									
	//Associe l'événement "click" aux objets de la classe "menu".
	jQuery(".menu").bind("click", function(event){ 
										
	event.stopPropagation();
		
	//Cette fonction javascript va permettre de connaitre l'id et la position de l'onglet sélectionné.
	recupId(this); 
																														
	//Cette fonction va boucler sur la position de chaque onglet de façon à tous les "ranger" hormis

	//celui que vous avez sélectionné de façon à ce qu'il n'y en ait qu'un seul apparent à la fois
		
	jQuery(".menu").each(function (i) {
  	if (this.style.marginLeft=="250px") {
	  	if (jQuery(this).attr("id")!= idMenu) {
	        	jQuery(this).animate({"marginLeft": "-=0px"}, "fast");	        							
	        	jQuery(this).animate({"marginLeft": "-=500px"}, "slow");
	    }		
    } 
        						
  });
      							
  //Disparition du cadre de droite
    
  jQuery(".menub").each(function (i) {
      								
  	jQuery(this).css({display: 'none'});
        						     						
  });
    
  //Animation de l'onglet
    							
  jQuery('#'+idMenu).toggle;
	jQuery('#'+idMenu).css({display: 'block'});
	jQuery('#'+idMenu).animate({"marginLeft": "-=0px"}, "fast");
										
	//S'il n'est pas déjà selectionné, on le laisse apparaitre
		
	if (nMargin=='-250px') {
		jQuery('#'+idMenu).animate({"marginLeft": "+=500px"}, "slow");
		//jQuery('#'+idMenu+'b').fadeIn();
	}
		
	//S'il est entièrement apparent, on lui redonne sa position initiale
		
	else
	{
	 	jQuery('#'+idMenu).animate({"marginLeft": "-=500px"}, "slow");
		//jQuery('#'+idMenu+'b').fadeOut();
	}
										
	}); 
		
										
	function recupId(o) {
		idMenu = jQuery(o).attr("id");
		nMargin = jQuery(o).css("marginLeft");
	}
	
	});
						
});
</script>

Revenez très vite !!!

Merci par avance de nous transmettre toutes vos questions, commentaires, suggestions via l'onglet "Contact" de la page d'accueil du site.

Tutoriel du menu JQuery de cette page (Partie 2)

HTML

>> Si vous avez suivi les consignes de la premiére partie de ce tutoriel, vos onglets doivent fonctionner mais à quoi servirait un menu si ce n'est pour faire apparaitre un article, une rubrique ou quelconque contenu ?
Vous avez remarqué qu'en sélectionnant l'onglet "Accueil", ce dernier provoque l'apparition d'un cadre sur la droite de la page.

>> Vous allez donc créer une DIV qui n'apparaitra pas au départ de la page. Insérez le code ci-dessous entre les balises <body> et </body> de votre page. Veillez à bien lui assigner l'Id "menu1b".


<div id="menu1b" class="menub">
  <a >Accueil</a>
  <br>
  <p>Si vous êtes comme nous et que vous avez de plus en plus de mal à vous passer de JQuery, cette page devient
  un espace pour tester diverses animations, se former ou pour nous faire part de vos avis et suggestions.<br><br>
  Ne soyez pas étonnés de la voir évoluer jours après jours !</p>
  <br>
  <center><a href="index.php" >Revenir à la page d'accueil du site</a></center>
</div>

CSS

>> Vous allez maintenant mettre en forme ce code HTML pour que le cadre n'apparaisse pas au chargement de votre page. Veillez à inclure ce code entre des balises <style> et </style> ou en les insérant dans un fichier externe .css

>> Cette mise en forme permettre la mise en forme de ce cadre (votre DIV) avant qu'il n'apparaisse à l'aide de jquery



#menu1b {
	
	display:none; /* Cadre non visible au chargement de la page 
	position:absolute; /* Les lignes ci-dessous déclarent la future position du cadre */
	top:23.4%;
	left:62%;
	width:300px;
	height:400px;
	margin-left:2px;  
	border:1px solid #fff; /* Bordure blanche 1 pixel d'épaisseur

}

/* Les deux rubriques ci-dessous déclarent respectivement la mise en forme pour les balises <a> et <p> 
du cadre */

#menu1b a {
	
	color:#fff;
	margin-left:2px;

}


#menu1b p {
	
	color:#ffff00;
	margin-left:2px;
	
}

jQuery

>> Vous allez pouvoir maintenant faire apparaitre ce cadre dès que vous aurez sélectioné l'onglet accueil

>>Revenons sur une partie du code rédigé dans la première partie du tutoriel. Nous avons volontairement assigné
l'id "menu1b" à notre cadre pour qu'il y ait correspondance avec l'onglet sélectionné. Nous avons utilisé les fonctions
fadeIn et fadeOut pour faire apparaitre/disparaitre le cadre. La variable idMenu récupére l'onglet sélectioné (menu1)
et notre cadre ayant pour id, menu1b, il est aisé de l'appeler de la façon suivante :

jQuery('#'+idMenu+'b').fadeIn();

Vous pouvez maintenant répéter l'opération pour créer des cadres apparaissant suite à la sélection des autres onglets.


<script type="text/javascript">
	
   
  //Animation de l'onglet
    							
  jQuery('#'+idMenu).toggle;
	jQuery('#'+idMenu).css({display: 'block'});
	jQuery('#'+idMenu).animate({"marginLeft": "-=0px"}, "fast");
										
	//S'il n'est pas déjà selectionné, on le laisse apparaitre
		
	if (nMargin=='-250px') {
		jQuery('#'+idMenu).animate({"marginLeft": "+=500px"}, "slow");
		
		jQuery('#'+idMenu+'b').fadeIn();
		
	}
		
	//S'il est entièrement apparent, on lui redonne sa position initiale
		
	else
	{
	 	jQuery('#'+idMenu).animate({"marginLeft": "-=500px"}, "slow");
		
		jQuery('#'+idMenu+'b').fadeOut();
		
	}
										
	
</script>

Revenez très vite !!!

Merci par avance de nous transmettre toutes vos questions, commentaires, suggestions via l'onglet "Contact" de la page d'accueil du site.

Votre premier plugin Jquery

HTML

>>Nous allons créer une zone de saisie pour la recherche, une liste déroulante contenant les pays et un bouton pour effectuer depuis votre page une simple recherche google.
Le plugin qui sera créé est minimaliste, mais vous permettra, nous l'espérons, d'en développer de plus complexes.

>> Vous allez donc placer sur votre page la zone de saisie, la liste déroulante et le bouton de recherche. Vous veillerez à respecter le libellé de l'id de chacun des objets de façon à ce qu'il soit en adéquation avec le reste du code.


<input type="text" id="requete" />
<br>
<br>
<form>
 <select id="Origine" name="Pays" size=1>
	<option value="fr">Google France</option>
	<option value="it">Google Italie</option>
	<option value="de">Google Allemagne</option>
	<option value="cn">Google Chine</option>
	</select>
</form>
<input type="button" id="recherche" value="Recherche sur Google" />

Plugin

>>Vous allez maintenant écrire votre plugin dans l'éditeur de votre choix en le sauvegardant comme suit: "rechercheGoogle.js"

>>Vous veillerez ensuite à le lier à votre page entre les balises <head> et </head> de cette façon :
>><script> type="text/javascript" src="rechercheGoogle.js"></script>


(function($) {
 
 //définition de la fonction "rechercheGoogle" par étendue de Jquery à l'aide du constructeur $.fn
 $.fn.rechercheGoogle = function(options) {  
 
 // options par défaut
 var defaults = {
 pays: 'fr'
 };   
				
 //$.extend permet de mêler les options par défaut et celles définies par l'utilisateur du plugin.	
 var opts = $.extend(defaults, options); 
        
 //Récupération du choix géographique de l'utilisateur
 var origine = recupSelect();
        
 //Si l'option choisie est l'option par défaut du plugin
 if (origine == options.pays) {
        
 //Concaténation de l'adresse google + extension pays(défini par l'option) + chaine précedant
 //la saisie dans la zone de texte
 var chaine = 'http://www.google.'+ options.pays + '/search?q=';
 
 }
 else
 {
 
 var	chaine = 'http://www.google.'+ origine + '/search?q=';
 
 }	
        	
     
 //Concaténation de la variable chaine avec la saisie de l'utilisateur.
 var req = chaine + $(this).attr("value");
       
 //Redirection vers la première page google des résultats de la recherche.
        
 window.location.href=req;
 
 //Pour ouvrir la page dans une nouvelle fenêtre, utilisez plutôt : window.open(req);    		
        
 return $(this);       
        
 var geo;
        
 //Fonction de récupération du choix utilisateur dans la liste des pays.
 function recupSelect() {
        
  geo = document.forms[0].elements[0].options[document.forms[0].elements[0].selectedIndex].value;	
  return geo;
        
 }
        
 return $(this); 
               
 };
})(jQuery);

jQuery

>>Vous allez pouvoir maintenant précharger votre plugin

>>Placez le code ci-dessous entre les balises <head> et </head>.
Nous chargeons donc le plugin avec 'fr' en option. Cela signifie donc que nous ferons appel à www.google.fr par défaut.
Vous pourrez tester ensuite le plugin en sélectionnant "Italie" dans la liste déroulante et vous atteindrez la premiére
page du résultat de votre recherche sur le Google italien (www.google.it).


<script type="text/javascript">
	
   
jQuery(document).ready(function() {
  jQuery("#recherche").click(function() {
   jQuery("#requete").rechercheGoogle({
	 		pays: 'fr'
		});
 	});				
});
	
</script>

Revenez très vite !!!

Merci par avance de nous transmettre toutes vos questions, commentaires, suggestions via l'onglet "Contact" de la page d'accueil du site.