Premiers pas avec jQuery

**Renand** · 18/12/2009, 08h30

Bonjour à tous.

Voilà je fais mes permiers pas avec jQuery. Non pas que je n'ai j'amais utilisé la librairie ou un module mais pour écrire moi même quelques lignes de code

En fait je souhaite faire quelques chose de simple et j'ai un doute sur l'approche à suivre.

1) j'ai un menu test horizontal sous forme d'une liste nom orderée. Les liens sont affichés sous forme de block via CSS.

Au survol de chacun des liens je souhaite afficher sous le menu un div très large (950px) dans lequel sera présent un ensemble d'éléments.

Il faut donc que ce bloc reste à l'écran après le survol du lien dans le menu pour pouvoir s'y rendre. Une fois que nous en dortons par contre il faut qu'il disparaisse. et bien évidement si je survol un autre lien je souhaite afficher un autre bloc.

En fait un par lien.

je me suis dis qu'il faudrait commencer par quelques chose comme ça.

Code :

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

1
2
3
4
5
6
7
8
 
<script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery('a.ray').mouseover(function() {
			jQuery('#demo').fadeIn('slow');
		});
	});
</script>

Pour sélectionner les liens qui auraient une classe "ray" et j'imaginais ensuite une boucle à l'intérieur de laquelle je ferais le fadeIn sur les bons éléments.

J'ai par contre pas d'idée concernant la façon de cacher si on sort de l'élément.

Merci d'avance de vos idées et explications.

**danielhagnoul** · 18/12/2009, 19h53

Bonsoir.

Pour que les forumeurs puissent vous venir en aide, il serait préférable de poster l'ensemble de votre code actuel, HTML et CSS inclus. Pas de PHP !

**Renand** · 21/12/2009, 08h30

@danielhagnoul
Oui biensur désolé.

Donc.

Pour le code HTML dans l'idée le menu serait fait comme ça.

Code :

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

1
2
3
4
5
6
7
8
 
<ul id="primary_menu>
<li><a href="link_1">texte du lien</a></li>
<li><a href="link_2">texte du lien</a></li>
<li><a href="link_3">texte du lien</a></li>
<li><a href="link_4">texte du lien</a></li>
<li><a href="link_5">texte du lien</a></li>
</ul>

Niveau CSS il y aurait simplement de quoi mettre les liens sous forme de block et les faire flotter ..

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
 
#primary_menu  {
	margin:0 0 0 0;
	text-transform:uppercase;
	font-size:0.8em;
	position:relative;
	}
#primary_menu ul {
	margin:0;
	padding:0;
	text-align:center;
	height:45px;
	line-height:45px;
	list-style:none;
	}	
#primary_menu  li a {
	color:#615751;
	padding:0;
	display:block;
	height:53px;
	text-decoration:none;
	float:left;
	margin-right:10px;
	z-index:500;
	}

je vous passe les effets de survols qui n'apportent rien ici

j'aimerais avoir pour chacun des survols un DIV#mon_div_1, div_2 ect.... qui s'affiche en positionnement absolue sous cette navigation.

Elle fait un total de 950px de large et disons pour le moment 250 pix de haut.

Dedans il y à des listes n'ont ordonnées.

genre

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div id="mon_div_1>
<ul>
<li><a href="">mon sous lien 1</a></li>
<li><a href="">mon sous lien 2</a></li>
<li><a href="">mon sous lien 3</a></li>
<li><a href="">mon sous lien 4</a></li>
<li><a href="">mon sous lien 5</a></li>
</ul>
</div>

merci d'apporter vos lumières à mon petit problème.
En fait j'imagine que c'est bateau pour certains, mais j'ai pas les pistes pour le faire efficacement.

**lemirandais** · 21/12/2009, 15h58

Je sais pas si tu as fait une erreur ou pas mais dans tes codes, il faut fermer les guillement

Code :

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

1
2
3
4
5
6
7
<ul id="primary_menu">
<li><a href="link_1">texte du lien</a></li>
<li><a href="link_2">texte du lien</a></li>
<li><a href="link_3">texte du lien</a></li>
<li><a href="link_4">texte du lien</a></li>
<li><a href="link_5">texte du lien</a></li>
</ul>

Cordialement
lemirandais

**Renand** · 21/12/2009, 16h02

oui pardon c'est en saisissant l'exemple..

le code est plus complexe, mais l'exemple est valide. J'ai juste allégé pour avoir les idée clairs.

**danielhagnoul** · 22/12/2009, 10h36

Bonjour.

Exemple :

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!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" lang="fr" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style type="text/css">
		body {
			background-color:#FFFFFF;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
 
		/* TEST */
		#primary_menu {
			margin:0 0 0 0;
			text-transform:uppercase;
			font-size:0.8em;
			position:relative;
		}
		#primary_menu ul {
			margin:0;
			padding:0;
			text-align:center;
			height:45px;
			line-height:45px;
			list-style:none;
		}	
		#primary_menu ul li a {
			color:#615751;
			padding:0;
			display:block;
			height:53px;
			text-decoration:none;
			float:left;
			margin-right:10px;
			z-index:500;
		}
		div.divSousLien {
			display:none;
			position:absolute;
			width:300px;
			height:auto;
			border:1px dotted grey;
		}
	</style>
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#primary_menu a").mouseenter(function(){
 
				// cacher toutes les divisons avec des sous liens
				$("div.divSousLien").css("display","none");
 
				// montrer la division correspondante
				$("#mon_div_" + this.id.slice(5)).css("display","block");
			});
 
			$("div.divSousLien").mouseleave(function(){
				// cacher la division correspondante
				$(this).css("display","none");
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
 
		<ul id="primary_menu">
			<li><a id="link_1" href="#">texte du lien 1</a></li>
			<li><a id="link_2" href="#">texte du lien 2</a></li>
		</ul>
 
		<div id="mon_div_1" class="divSousLien">
			<ul>
				<li><a href="#">mon sous lien 1-1</a></li>
				<li><a href="#">mon sous lien 1-2</a></li>
				<li><a href="#">mon sous lien 1-3</a></li>
				<li><a href="#">mon sous lien 1-4</a></li>
				<li><a href="#">mon sous lien 1-5</a></li>
			</ul>
		</div>		
		<div id="mon_div_2" class="divSousLien">
			<ul>
				<li><a href="#">mon sous lien 2-1</a></li>
				<li><a href="#">mon sous lien 2-2</a></li>
				<li><a href="#">mon sous lien 2-3</a></li>
				<li><a href="#">mon sous lien 2-4</a></li>
				<li><a href="#">mon sous lien 2-5</a></li>
			</ul>
		</div>		
	</div>
</body>  
</html>

**Renand** · 22/12/2009, 10h37

Merci danielhagnoul !
Je vais vite regarder ça...
Merci mille fois

**Renand** · 22/12/2009, 16h49

alors... c'est effectivement parfaitement ce que je cherche à faire.

une fois intégré dans mon code il se passe une chose étonnante.

Voici la structure d'un popup définitive

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="popup_1" class="divSousLien">
      		<div class="ray_1">
        	  <ul>
        	    <li><a href="toto.htm">mon sous lien 1-1</a></li>
        	    <li><a href="toto.htm">mon sous lien 1-2</a></li>
        	    <li><a href="toto.htm">mon sous lien 1-3</a></li>
        	    <li><a href="toto.htm">mon sous lien 1-4</a></li>
        	    <li><a href="toto.htm">mon sous lien 1-5</a></li>
        	  </ul>
        	</div>
      	</div>

Pour que ça fonctionne dans mon cas j'ai du modifié une ligne du code JS

Code :

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

1
2
 
jQuery("#popup_" + this.id.slice(4)).css("display","block");

j'ai rémplacé slice(5) par 4. Je ne connaissais pas cette propriété et j'avou ene pas bien avoir saisi ce qu'elle renvoyait. mais de cette manière ça s'affiche bien.

reste que si je survol l'un des éléments de la liste présente dans le div j'ai pas le temps de cliquer le popup disparait.

merci encore.

Premiers pas avec jQuery

jQuery

Discussions similaires

Partager

Partager