implémenter une zone déroulante dans une page

Version imprimable

30/06/2010, 11h41
souminet

implémenter une zone déroulante dans une page

Bonjour,
Voilà, je ne sais pas comment bien expliquer ce que je voudrais faire , en gros je voudrais implémenter une zone dans ma page web qui au départ est cachée, mais qui se déroule en cliquant sur un lien , comme pour le lien +Détail de la page d'admistration d'easyPHP sur la page structure d'une table SQL.

Je présume que sa doit être du JS , est ce que quelqu'un pourrait bien me mettre sur la voix.
Merci beaucoup :P
30/06/2010, 11h48
vermine

Bonjour,

En utilisant un Framework Javascript vous aurez de "jolis" effets de styles.
Sinon, en Javascript tout court, vous pouvez également obtenir le même résultat avec des display, mais l'effet visuel sera tout de suite moins joli.
30/06/2010, 11h52
E.Bzz

Bonjour,
+1 Vermine.

Sinon, de nombreuses discussions (avec exemples) sur le sujet :
http://www.developpez.net/forums/d92...ogressivement/
http://www.developpez.net/forums/d92...eaucoup-sites/
http://www.developpez.net/forums/d91...aliser-slider/
...

Bref, tu en trouveras d'autres en faisant une recherche sur "slider" dans le forum ;)

A+
30/06/2010, 11h56
neo18045

Si je comprend bien, tu voudrait avoir une zone déjà rempli dès le départ mais qui soit caché, et quand tu clique sur un lien, cette zone s'affiche avec un effet de déroulement ?

Si c'est ce cas, je peux t'expliquer en gros le principe que j'ai déjà mis en place, mais j'espère que tu connais un peu JQuery (enfin il n'y a rien de trop compliqué dedans) :

1 - un lien du genre <a href="" id="monLien">Cliquez ici pour dérouler</a>
2 - une div du style <div id="maDiv">Ce que je souhaite caché...</div>
3 - un coup de css sur ta div du genre #maDiv{display:none;}
4 - un coup de JQuery. Là, regarde du côté de la fonction click() pour détecter le clic sur ton lien, slideDown() pour dérouler, et slideUp() pour enrouler (car je trouve mieux de proposer de ré-enrouler une zone après l'avoir déroulée)
30/06/2010, 12h10
E.Bzz

@neo18045 > Oui, c'est un peu ce qui est déjà expliqué.

Sauf qu'il n'y a pas que JQuery sur le net ;)

A+
30/06/2010, 12h20
neo18045

Citation:

Envoyé par E.Bzz

@neo18045 > Oui, c'est un peu ce qui est déjà expliqué.

Sauf qu'il n'y a pas que JQuery sur le net ;)

A+

Je n'avais pas vu, les précédents messages. En fait j'étais le premier à répondre, mais le temps que je poste il y avait déjà toutes les autres réponses :mouarf:

Sinon oui il n'y a pas que JQuery, mais étant donné que c'est le seul que je connais/utilise et que c'est avec que j'ai fait un truc dans le style qui est demandé, je l'oriente dans ce sens, après pour ce qui est des autres, je pense qu'une recherche et/ou intervention d'autres membres pourront l'aiguiller.
30/06/2010, 12h28
E.Bzz

Citation:

Envoyé par neo18045

Je n'avais pas vu, les précédents messages. En fait j'étais le premier à répondre, mais le temps que je poste il y avait déjà toutes les autres réponses :mouarf:

Pas de problème : ça arrive tout le temps ;)

A+
30/06/2010, 13h36
souminet

Citation:

Envoyé par neo18045

Si je comprend bien, tu voudrait avoir une zone déjà rempli dès le départ mais qui soit caché, et quand tu clique sur un lien, cette zone s'affiche avec un effet de déroulement ?

Si c'est ce cas, je peux t'expliquer en gros le principe que j'ai déjà mis en place, mais j'espère que tu connais un peu JQuery (enfin il n'y a rien de trop compliqué dedans) :

1 - un lien du genre <a href="" id="monLien">Cliquez ici pour dérouler</a>
2 - une div du style <div id="maDiv">Ce que je souhaite caché...</div>
3 - un coup de css sur ta div du genre #maDiv{display:none;}
4 - un coup de JQuery. Là, regarde du côté de la fonction click() pour détecter le clic sur ton lien, slideDown() pour dérouler, et slideUp() pour enrouler (car je trouve mieux de proposer de ré-enrouler une zone après l'avoir déroulée)

J'ai téléchargé le JQuery et installé sur ma page... j'ai aussi crée la balise DIV avec ses attributs en css...
Comment puis je implémenter la suite, c'est à dire l'appel aux fonctions??? dont j'ai besoin???
30/06/2010, 13h46
neo18045
Avec JQuery, ça pourrait donner un truc du style :
Code:

1 2 3 4 5 // détecte quand tu clique sur ton lien $("#tonLien").click(function(){ // là tu dis que tu veux dérouler ton div $("#tonDiv").slideDown(); });
C'est juste le code de déroulement ça. Après il faudra sûrement que tu le mette dans un $(document).ready() et le modifier pour gérer enroulement/déroulement.
30/06/2010, 14h18
souminet
Citation:
Envoyé par neo18045

Avec JQuery, ça pourrait donner un truc du style :

Code:

1 2 3 4 5 // détecte quand tu clique sur ton lien $("#tonLien").click(function(){ // là tu dis que tu veux dérouler ton div $("#tonDiv").slideDown(); });

C'est juste le code de déroulement ça. Après il faudra sûrement que tu le mette dans un $(document).ready() et le modifier pour gérer enroulement/déroulement.
Ok ça j'ai compris, mains dans tout les tutos que je suis entrain de lire, je ne trouve pas la manière de lier mon lien a ce code; j'ai effectivement fait appel au script jquery dans le head, et j'ai retranscris le code que vous m'avez envoyé, mais je n'arrive pas à lier ma balise de lien à cet événement...??

Je suis très embrouillé , je n'ai pas compris comment tout cela fonctionne ??:oops:

en fait , est ce que quelqu'un pourrait m'aider à reproduire un exemple, autant dans la partie html (body) que dans le script en lui même...
Merci +++++ et désolée encore, je vous assure que ce n'ai pas par fainéantise , je suis débutante et j'aspire à maitriser le maximum (avec votre aide bien sur ;)
30/06/2010, 14h39
neo18045

Es-ce que tu peux envoyé ton code qu'on voit comment tu fais ?

Bonjour,

Si c'est plus clair pour toi tu peux aussi l'écrire comme ceci ...
Code:

1 2 <a id="tonLien" href="#" onclick="$("#tonDiv").slideDown();" >ouvrir "tonDiv"</a> <div id="tonDiv">Nam iaculis erat in massa ultrices non porta massa luctus.</div>
devyan

30/06/2010, 16h25
E.Bzz

Citation:

Envoyé par devyan

Si c'est plus clair pour toi tu peux aussi l'écrire comme ceci ...

Et pour le nav, ça sera plus clair avec des quottes correctement imbriquées

Code:

onclick="$('#tonDiv').slideDown();"

;)

A+

Bonsoir.

Un exemple, voir les commentaires dans le code :

Code:

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* BASE */
		body {
			background-color:#ffffff;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family: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%;
			height:500px;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
 
		/* TEST */
		div#affiche {
			clear:both;
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
 	<script>
		$(function(){
			// voir la documentation jQuery : http://api.jquery.com/
 
			// cacher à l'ouverture de la page
			$("#affiche").hide();
 
			// montrer/cacher la division affiche
			$("#lienID").click(function(){
				// 3000 = 3s
				$("#affiche").slideToggle(3000);
			});
 
			// idem à partir d'un bouton
			$("#btn").click(function(){
				// "slow", réglage par défaut
				$("#affiche").slideToggle();
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<p>
			Un mot pour remplir et un lien <a id="lienID" href="#">Montrer/cacher la division affiche</a>
		</p>
		<button id="btn">Montrer/Cacher</button>
		<div id="affiche">
			<p>
				Quisque ac lacus. Aliquam erat volutpat. Vestibulum fringilla accumsan est. Mauris ipsum mauris, scelerisque vitae, aliquet aliquam, imperdiet sit amet, risus. Aliquam tincidunt. Vestibulum sit amet leo non dolor porttitor laoreet. Mauris convallis sagittis tortor. Integer eget purus et enim porttitor ullamcorper. Sed molestie nisi quis justo. Cras et enim. Mauris nec purus. Vestibulum vitae magna vel augue vehicula sodales. Fusce id justo. Fusce dolor nisi, tincidunt in, consectetur at, ornare rhoncus, eros.
			</p>
			<p>
				Vivamus eu ante. Morbi tristique augue quis magna. Nullam tristique lorem id neque. Nam nibh elit, lobortis ac, euismod eu, feugiat id, diam. Etiam dui est, fringilla eget, dictum faucibus, ultrices ut, massa. Duis tempor. In eu elit quis urna eleifend ultrices. In sollicitudin. Phasellus laoreet. Sed aliquet diam vel nibh. In aliquet pharetra mi. Ut et sem. Phasellus ultrices libero sit amet ipsum.
			</p>
		</div>
	</div>
</body>
</html>