Réécriture en jquery

**fourmizen** · 11/03/2010, 18h58

Bonjour à tous,
j'ai trouvé un bout de code en javascript sur internet et j'aimerais le réécrire en jquery car j'utilise cette bibliothèque sur mon site et j'aimerais un effet de slide lorsque le menu descend.
Le problème est que je ne maitrise absolument pas javascript ou jquery. Je n'utilise jquery que pour quelques effets éparses.
Pourriez vous m'aider en me donnant le code équivalent en jquery?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
onload = function() {
	var getEls = document.getElementById('menu').getElementsByTagName("LI");
	var getListElts = document.getElementById('submenus').getElementsByTagName("UL");
	var getAgn = getEls;
 
 
	for (var i=0; i<getEls.length; i++) {
		getEls[i].onclick=function() {
		this.className = this.className == 'clicked' ? '' : 'clicked';
 
		for (var z=0; z<getAgn.length; z++) {
		if (this.id != getAgn[z].id){
				getAgn[z].className = '';
			}
		}
 
 
		ulId = this.id.replace("li", "ul");
		document.getElementById(ulId).className = document.getElementById(ulId).className == 'yes' ? 'none' : 'yes';
 
			for (var i=0; i<getListElts.length; i++) {
			if (ulId != getListElts[i].id && getListElts[i].className == "yes"){
					getListElts[i].className = "none";
				}
			}
		}
	}
}

Merci beaucoup

**boboss123** · 15/03/2010, 14h41

salut,

ton code est très bizarre me semble t-il : il doit faire quoi exactement ?

je verrais bien un code du genre (mais ce n'est pas exactement ce que fait ta fonction):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
	$("#menu li").click(function(){
 
		$("#menu li").each(function(){
			$(this).removeClass("clicked");
			$(this).find("#submenus ul").removeClass("yes");
		});
 
		$(this).addClass("clicked");
		$(this).find("#submenus ul").addClass("yes");
	}

**fourmizen** · 15/03/2010, 15h46

Salut,
merci pour ta réponse.

Le code provient de ce site :
http://www.stunicholls.com/menu/pro_...ne_3.html#nogo

C'est un menu dropline. Je pense qu'avec jquery ca ne doit pas prendre beaucoup de lignes de code. En fait ce qui m'a bloqué pour l'écrire en jquery c'est de passer une variable en paramètres (le numéro de la li et de l'ul).

Ce serait possible de faire du onmousehover avec jquery pour ce code?

**boboss123** · 16/03/2010, 09h50

voila ça devrait marcher

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
	$("ul#menu > li").click(function(){ // gestion de l'evenement onclick sur les elements "ul#menu > li"
 
		$("ul#menu > li.clicked").removeClass("clicked"); // on supprime la classe "clicked" sur tous les elements "ul#menu > li.clicked"
		$("div#submenus > ul.yes").removeClass("yes"); // on supprime la classe "yes" sur tous les elements "ul#menu > li.yes"
 
		$(this).addClass("clicked"); // on ajoute la classe "clicked" sur l'element qui a été cliqué
 
                var id = $(this).attr("id"); // on recupere l'id de l'element cliqué
                id = id.replace("li", "ul"); // on remplace dans le nom de l'id "li" par "ul"
 
                $("div#submenus > ul#" + id).addClass("yes"); // on ajoute la classe "yes" à l'element "div#submenus > ul#ul_?"
	});

=> comme tu peux le voir c'est très simple d'utiliser jquery : tu devrais t'y mettre

...

Le selecteur query $("???") est le même qu'on utilise en css

Pour le mousehover, je te conseille plutôt de le gérer directement en css sur l'élément <a> de ta liste

**fourmizen** · 16/03/2010, 10h45

Merci! Super le code commenté

Faudrait que je me mette à jquery mais là j'ai pas trop le temps...cet été

J'ai compris la fonction que tu as écrite par contre que me conseille tu pour faire apparaître les éléments :
- inclure les lignes de script permettant l'affichage dans cette fonction?
- créer une autre fonction qui gère l'affichage?
Quand je dis gérer l'affichage c'est juste un .slideToggle()

En tout cas merci encore!
++

**boboss123** · 16/03/2010, 11h02

je suis pas sur d'avoir tout compris a ta question : tu veux faire un slide sur tes elements #submenus, c'est ça ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
	$("ul#menu > li").click(function(){ // gestion de l'evenement onclick sur les elements "ul#menu > li"
 
		$("ul#menu > li.clicked").removeClass("clicked"); // on supprime la classe "clicked" sur tous les elements "ul#menu > li.clicked"
 
		$("div#submenus > ul.yes").each(function(){ // balayage de tous les elements (en l'occurence, il ne devrait y en avoir qu'un)
			$(this).removeClass("yes");
			$(this).slideUp(); // cache
		});
		// $("div#submenus > ul.yes").removeClass("yes").slideUp(); // peut-etre que ça marche => a tester...
 
		$(this).addClass("clicked"); // on ajoute la classe "clicked" sur l'element qui a été cliqué
 
                var id = $(this).attr("id"); // on recupere l'id de l'element cliqué
                id = id.replace("li", "ul"); // on remplace dans le nom de l'id "li" par "ul"
 
		$("div#submenus > ul#" + id).each(function(){ // balayage de tous les elements (en l'occurence, il ne devrait y en avoir qu'un)
			$(this).addClass("yes");
			$(this).slideDown(); // affiche
		});
		//$("div#submenus > ul#" + id).addClass("yes").slideDown(); // peut-etre que ça marche => a tester...
 
	});

**fourmizen** · 21/03/2010, 20h20

oui c'est ca. mais je pense mettre un toogle à la place pour pouvoir aussi les remonter.
J'ai oublié de te filer le code html dsl:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<li class="sub" id="no1"><a href="#nogo"><img src="../data/images/e.png" alt="Accueil" width="25" height="30" border="0" /></a></li>
              <li class="sub" id="li_1"><a href="#nogo"><b>XXXXXXXXXX</b></a></li>
              <li class="sub" id="li_2"><a href="#nogo"><b>XXXXXXXXXX</b></a></li>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div id="submenus">
        <ul id="ul_1" class="none">
          <li><a href="#nogo21">XXXXXXXXXX</a></li>
          <li><a href="#nogo22">XXXXXXXXXX</a></li>
          <li><a href="#nogo23">XXXXXXXXXX</a></li>
        </ul>
        <ul id="ul_2" class="none">
          <li><a href="#nogo11">XXXXXXXXXX</a></li>
          <li><a href="#nogo12">XXXXXXXXXX</a></li>
          <li><a href="#nogo13">XXXXXXXXXX</a></li>
          <li><a href="#nogo14">XXXXXXXXXX</a></li>
        </ul>

**fourmizen** · 28/03/2010, 15h18

Salut,
si tu veux bien m'aider encore un peu j'ai repris le code que tu m'avais filé et j'ai tout retravaillé mais ca fonctionne pas...aurais tu une idée?
Je t'explique ce que j'ai fait :
au chargement de la page le submenu est caché par css puis par jquery (.java_hidden). Ensuite normalement avec toogle et la récupération du contenu de l'id le menu s'abaisse mais ce n'est pas le cas...

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
.java_hidden {
	display : none;	
}
/*  --Menu portfolio--  */
#menu_folio {
	color: #DB1033;
	font-size: 125%;
	margin-top: 50px;
}
#menu_folio ul {
	display:table;
	margin:0 auto;
	padding:0;
	list-style-type:none;
	height:25px;
}
#menu_folio ul li {
	display:table-cell;
	width:auto;
	margin:0;		
}
#menu_folio ul li a {
	margin-right: 15px;
	margin-left: 15px;
	cursor: pointer;
}
#submenu_folio ul {
	display:table;
	margin:0 auto;
	padding:0;
	list-style-type:none;
}
#submenu_folio ul li {
	display:table-cell;
	width:auto;
	margin:0;
}
#submenu_folio ul li a {
	margin-right: 10px;
	margin-left: 10px;
	cursor: pointer;
}

JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
//--------------------------------------------
//	Menu
//--------------------------------------------
	$("#menu_folio > li").click(function(){ // gestion de l'evenement onclick sur les elements "ul#menu > li"
                var id = $(this).attr("id"); // on recupere l'id de l'element cliqué
                id = id.replace("li", "ul"); // on remplace dans le nom de l'id "li" par "ul"
 		$("#submenu_folio > ul #"+id).slideToggle("slow");
 	});
 
//--------------------------------------------
//	Cacher les éléments de navigation
//--------------------------------------------
		// suppression de la classe CSS servant à cacher les éléments au chargement de la page
    	$(".java_hidden").removeClass("java_hidden");
   	 	// Cache l'élement en javascript
   		$("#lang_choix").hide();		
		$("#submenu_folio > ul").hide();

HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<div id="menu_folio">
  <ul>
    <li><a id="li_1">Portfolio</a></li>
    <li><a href="...">Tirages</a></li>
    <li><a id="li_2">Commercial</a></li>
  </ul>
</div>
<div id="submenu_folio">
  <ul id="ul_1" class="java_hidden">
    <li><a href="#nogo21">Voyages</a></li>
    <li><a href="#nogo22">Arts-martiaux</a></li>
    <li><a href="#nogo23">Nature</a></li>
    <li><a href="#nogo23">Portraits</a></li>
  </ul>
  <ul id="ul_2" class="java_hidden">
    <li><a href="#nogo21">Lifestyle</a></li>
    <li><a href="#nogo22">Corporate</a></li>
    <li><a href="#nogo23">Mariage</a></li>
  </ul>
</div>

**boboss123** · 29/03/2010, 10h35

voici comment je ferais (attention, le css n'est compatible qu'avec les dernières versions de navigateurs) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<title>TEST</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
	<link rel="stylesheet" media="screen" type="text/css" title="montheme1" href="theme1.css" />
 
	<script type="text/javascript" src="jquery-1.4.2.js"></script>
	<script type="text/javascript" src="index.js"></script>
</head>
 
<body>
 
<ul id="menu_folio">
	<li><a href="#" title="Portfolio">Portfolio</a></li>
	<li><a href="#" title="Tirages">Tirages</a></li>
	<li><a href="#" title="Commercial">Commercial</a></li>
</ul>
 
<div id="submenu_folio">
	<ul id="Portfolio">
		<li><a href="#nogo21">Voyages</a></li>
		<li><a href="#nogo22">Arts-martiaux</a></li>
		<li><a href="#nogo23">Nature</a></li>
		<li><a href="#nogo23">Portraits</a></li>
	</ul>
 
	<ul id="Tirages">
		<li><a href="#nogo21">Lifestyle</a></li>
		<li><a href="#nogo22">Corporate</a></li>
		<li><a href="#nogo23">Mariage</a></li>
	</ul>
 
	<ul id="Commercial">
		<li><a href="#nogo21">Lifestyle</a></li>
		<li><a href="#nogo22">Corporate</a></li>
		<li><a href="#nogo23">Mariage</a></li>
	</ul>
</div>
 
 
</body>
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
/*  --Menu portfolio--  */
ul#menu_folio {
	margin:0 auto;
	list-style-type:none;
	text-align:center;
 
	background-color:red;
}
 
ul#menu_folio li {
	display : inline-block;
	margin: 5px;
}
 
 
/*  --SouS-Menu portfolio--  */
div#submenu_folio {
	height: 30px;
	background-color:yellow;
}
 
div#submenu_folio ul {
	display : none;
	text-align:center;
	list-style-type:none;
}
 
 
div#submenu_folio ul li {
	display : inline-block;
	margin:5px;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
$(document).ready(function(){	// Traitement à effectuer lorsque le DOM est prêt
 
	$("#menu_folio > li > a").click(function(e){ // gestion de l'evenement onclick sur les elements "ul#menu > li"
		e.preventDefault(); // annule la gestion de l'evenment click standard => evite que lorsqu'on clic sur le lien que ça bouge le centrage de la page web
 
		if(!$(this).hasClass("selected")){ // si <a> n'a pas la classe "selected"
 
			$("#menu_folio > li > a.selected").removeClass(); // supression de la classe
			$(this).addClass("selected"); // ajout de la classe
 
			$("#submenu_folio > ul").slideUp("slow"); // on masque les elements affichés
 
			var title = $(this).attr("title"); // on recupere l'attribut title de l'element cliqué
			//alert(title); // pour debug
			$("#submenu_folio > ul#" + title).slideDown(); // on affiche l'element selectionné
		}
 	});
 
	// initialisation
	$("#menu_folio > li:eq(0) > a").triggerHandler("click"); // lance l'evenement click sur le premier element de la list
 });

PS : attention a tes sélecteurs css => "#menu_folio > li" est différent de "#menu_folio li"

**fourmizen** · 29/03/2010, 16h17

Merci pour l'aide...par contre ca fait un truc bizarre. quand je charge la page le premier sous menu est visible, quand je clique sur un autre item du menu le sous menu correspondant apparait en poussant par en bas le menu précédent et si je re-clique sur l'item du menu, le sous menu ne disparait pas...

**boboss123** · 30/03/2010, 09h11

rah c'est pourtant pas compliqué

(tu avais tous les éléments en main)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(document).ready(function(){	// Traitement à effectuer lorsque le DOM est prêt
 
	$("#menu_folio > li > a").click(function(e){ // gestion de l'evenement onclick sur les elements "ul#menu > li"
		e.preventDefault(); // annule la gestion de l'evenment click standard => evite que lorsqu'on clic sur le lien que ça bouge le centrage de la page web
 
		if(!$(this).hasClass("selected")){ // si <a> n'a pas la classe "selected"
 
			$("#menu_folio > li > a.selected").removeClass(); // supression de la classe
			$(this).addClass("selected"); // ajout de la classe
 
			$("#submenu_folio > ul").slideUp("slow"); // on masque les elements affichés
 
			var title = $(this).attr("title"); // on recupere l'attribut title de l'element cliqué
			//alert(title); // pour debug
			$("#submenu_folio > ul#" + title).slideDown(); // on affiche l'element selectionné
		} else { // le menu est deja affiché
			$(this).removeClass(); // supression de la classe
 
			var title = $(this).attr("title"); // on recupere l'attribut title de l'element cliqué
			//alert(title); // pour debug
			$("#submenu_folio > ul#" + title).slideUp(); // on cache l'element selectionné			
		}
 	});
 
	// initialisation
	$("#menu_folio > li:eq(0) > a").triggerHandler("click"); // lance l'evenement click sur le premier element de la list à l'ouverture de la page
 });

=> es-tu sur que c'est mieux de faire ça ? personnellement, je préfère l'autre comportement....

Par contre attention au css, les slides posent parfois des problèmes sur certains navigateurs => penses a tester ta page sur tous les navigateurs...

**fourmizen** · 05/04/2010, 12h25

Merci ca fonctionne...juste eu quelques ajustements à faire...
Promis je me mets à Jquery sous peu!

Réécriture en jquery

jQuery

Discussions similaires

Partager

Partager