Nous avons réservé cette page
aux addicts à JQuery
Tutoriel diponible
au sujet du menu de la page
Réaliser son premier plugin !
Quelques liens intéressants
ou incontournables
Les nouveaux scripts et tutoriaux apparaissent sur la page de script à la demande
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.
Ne soyez pas étonnés
de la voir évoluer jours après jours !
Nous présentons ici régulièrement un tutoriel et nous nous servons des effets contenus sur cette page pour que ce soit plus concret.
Recherche Google avec option géographique.
Saisissez le nom d'une fonction ci-dessous :
(En minuscules, ex: show)
Le site officiel de jQuery :
Excellente traduction française de la documentation officielle jQquery :
jquery.developpeur-web2.comJe conseille très vivement ce blog (Bien connu de certains déja !) mais qui nous a beaucoup inspiré :
Remerciements à Jay Salvat pour ses capacités imaginatives !

<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>
#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;
}
<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>

<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>
#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('#'+idMenu+'b').fadeIn();
<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>

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

