Discussion :

[Juda-Priest]

Bonsoir,

je sais que ce titre va surement vous faire croire que je n'ai fais aucune recherche, mais je poste un peu en désespéré ^^'

Alors je viens de m'y mettre au Jquery pour essayer de faire un menu accordion, en vains. Après de maintes et maintes maniere (sildetoggle, jquey Ui, des extension de DW Cs4, des 'ti tour de passe-passe avec visibility etc ... ) il s'avere que je ne suis pas très doués =x

Pour m'aider j'utilise le javascript déja fournis par Dreamweaver CS4 ... certain me hueront peut-être D=

voici mon morceau de code pour le menu accordion :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
</style>
 
<script type="text/javascript" language="javascript" src="jquery-1.4.2.js">
//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$(document).ready(function(){
 
	$("dd:not(:first)").hide();
	$("dt").click(function(){
		$("dd:visible").slideUp("slow");
		$(this).parent().next().slideDown("slow");
		return false;
   });
});
</script>

J'ai trouve ce code sur http://jquery.com/. içi pour être précis

Ainsi que le code de dreamweaver

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
<script type="text/javascript" >
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
 
</script>

Celui-ci est entierement fournis par Dreamweaver d'un seul clic ^^. En gros il permet de faire certaine action sur des évenment.
ex : onmouseover="MM_swapImage('Image1','','about_us_S.png',1)" Cela permet de d'échanger l'image d'une icone quand on passe la souris dessus.


Et voici le code sur lequel devrais s'appliquer le script

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<dt><p class="menu_head"><img src="bookingmenu.png" alt="click here to to see the menu"  name="image6" width="180" height="30" id="Image6" title="booking menu" onclick="MM_swapImage('Image6','','bookingmenu_open.png',1)" onmouseover="MM_swapImage('Image6','','bookingmenu_s.png',1)" onmouseout="MM_swapImgRestore()"/></p>
                    </dt>
                	<dd>
                    <ul>
                        <li>
                        	<p class="style7"><img src="booking.png" alt="bookings: click here to access the bookings area" width="180" height="30" id="Image3" title="bookings: click here to access the bookings area" onclick="MM_goToURL('parent','bookings.htm');" onmouseover="MM_swapImage('Image3','','booking_s.png',1)" onmouseout="MM_swapImgRestore()" /></p>
                        </li>
                        <li>	
                            <p class="style7"><img src="technical_info.png" alt="calendar" name="Image5" width="180" height="30" id="Image5" onclick="MM_goToURL('parent','calendar.htm');return document.MM_returnValue" onmouseover="MM_swapImage('Image5','','technical_info_s.png',1)" onmouseout="MM_swapImgRestore()" /></p>
                         </li>
                     </ul>
                     </dd>

Ce foutu menu est composé d'un titre 'Booking menu' et de deux sous menu booking info et calendar (dont l'image attribué est technical info... un peu la flemme de re-photoshoper tant que le menu est pas finis )



Au niveau de l'affichage tout marche excepter le menu accordion, ce qui commence a être un peu frustrant ^x^' ( de pas maitriser un langage qui offrent plein de possibiltées bien sur =p )

Enfin voila ... j'espère ne pas avoir été trop long et assez explicite ^.^'

merci d'avance,
Juda-Priest

EDIT: j'ai oublié de souligner que je n'ai aucun message d'erreur =)

[danielhagnoul]

Bonsoir.

Je vous suggère de tester avec cette correction :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script src="jquery-1.4.2.js"></script>
<script>
	//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
	$(document).ready(function(){
		$("dd:not(:first)").hide();
		$("dt").click(function(){
			$("dd:visible").slideUp("slow");
			$(this).parent().next().slideDown("slow");
			return false;
	   });
	});
</script>

[Juda-Priest]

c'est presque bon ^^' Actually le menu marche mais que dans un sens, seulement quand je le ferme mais il ne s'ouvre pas. D'autant qu'il s'affiche ouvert. Mais c'est déja bien je trouve x3


Hier soir en flanant sur le site de jquery (4 jours de squatte =3), j'ai lu un article disant que la fonction ready ne fonctionnne pas très bien avec la fonction onload. Je vais faire quelque test, je vous tiens au courant.

Mais je reste très intéréssé de savoir le comment du pourquoi et le pourquoi du comment , en quoi le fait de déclarer sa source en dehors de la balise script est-ce meilleur ou différent ?


merci d'avance
Juda Priest

[Juda-Priest]

Je n'arrive toujours pas a faire fonctionner le menu correctement. J'ai alors voulu tester le code que j'ai utilisé en le recpopiant exactement comme dans l'exemple( source ). Mais à ma grande suprise, ce code fais exactement la meme chose : il ferme le menu mais ne le re-ouvre pas ...

Du coup, je me suis rendu compte que enlevant :not(:first) de

Code :

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

$("dd:not(:first)")

le menu s'affiche fermé mais je ne peut toujours pas le faire défiler vers le bas

Est-ce moi qui m'y prend mal ?

EDIT:
Erf en faite j'y suis arrivé ^^'

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script src="jquery-1.4.2.js"></script>
<script>
	//slides the element with id "dd" when paragraph with id "dt" is clicked
	$(document).ready(function(){
		$("dd").hide();
		$("dt").click(function(){
 
			$(this).next("dd").slideToggle(300).siblings("dd").slideUp("slow");  
	  	 });
 
	});
 
</script>

Une tite expliaction pour ceux qui passeront prendre l'inspiration:
- au chargement de la page ( $(document).ready ), toutes les balises 'dd' vont se cacher (les sous menus)
- Lorsque l'on clique sur une des balises dt ( le titre du menu accordéon ), les balise 'dd' de celle ci vont s'ouvrir ( $(this).next("dd").slideToggle(300) ), et les autres balise 'dd' vont se fermez ( .siblings("dd").slideUp("slow") )

cela décale un peu mon texte mais je pense qu'il s'agit d'un petit probléme de css ^w^

Mais ma question du post au dessus tiens toujours Et si vous jugez mon code trop simple ou juste heu comment dire ... pas assez générale (du genre a ne marchez que pour ce cas çi), je suis ouvert à toute idée et suggestion