Discussion :

[Vow]

Bonjour

De retour pour de nouvelles aventures... et surtout de nouvelles questions

Je souhaite diviser ma page "centrale" en 3 parties :
- le haut : barre d'outils et panneau de recherche
- le milieu : tableau de données
- le bas : rien

Voici ce que j'ai fait :

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
<script type="text/javascript">
	dojo.require("dijit.layout.BorderContainer");
	dojo.require("dojox.layout.ContentPane");
	dojo.require("dojo.parser");  
</script>
 
<!-- Reste du code -->
 
<div dojoType="dijit.layout.BorderContainer" design="screenDesign" style="border: 0px; padding: 0px; margin: 0px; width: 100%; height: 100%;">
<div dojoType="dijit.layout.ContentPane" region="top" HEIGHT=200 style="border: 0px; padding: 0px; margin: 0px; padding-top: 5px; padding-left: 100px; background-color: #F0F0F5; height: 100px;">
Contenu haut
</div>
<div dojoType="dijit.layout.ContentPane" region="center" HEIGHT=300 style="border: 0px; padding: 0px; margin: 0px; padding-top: 5px; padding-left: 30px; background-color: #F0F0F5; height: 300px;">
<TABLE style="border: 0px; padding: 0px; margin: 0px; width: 100%; height: 100%;">
<TR>
<TD BGCOLOR=WHITE HEIGHT=300 STYLE="border-bottom: 2px solid #CECECE; border-right: 2px solid #CECECE; padding: 10px 25px 10px 25px; ">
Contenu milieu
</TD>
</TD>
</TABLE>
</div>
<div dojoType="dijit.layout.ContentPane" region="bottom" style="border: 0px; padding: 0px; margin: 0px; padding-top: 5px; padding-left: 100px; background-color: #F0F0F5;">
Contenu bas
</div>
</div>

Seulement, j'ai deux soucis rien qu'à ce niveau :
- j'aimerais ne pas avoir de bordure "blanche"
- je voudrais que ma partie haute s'agrandisse automatiquement par rapport au contenu, que ma partie centrale ait une taille minimale et puisse s'agrandir suivant son contenu, et que la partie basse prenne le reste de la page.

Pour ce dernier point, voici le fonctionnement actuel :
- la partie haute a une taille fixe et s'il y a déplacement, la propriété CSS overlay est activée (ascenseurs)
- la partie basse prend une place infime et la partie centrale prend le reste...


La seconde partie de mon problème est que je voudrais placer une sorte d'AccordeonPane... avec un seul "panneau" qui serait automatiquement fermée. C'est là où j'ai trouvé l'ExpandoPane et surtout peu d'explications.

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
<script type="text/javascript">
	dojo.require("dojox.layout.ExpandoPane");
	dojo.require("dojo.fx.easing");
</script>
 
<!-- Reste du code -->
 
<div gutters="true" dojoType="dijit.layout.BorderContainer" autoHeight="true">
&nbsp;
 
	<div dojoType="dojox.layout.ExpandoPane" 
		splitter="false"
		duration="125" 
		region="bottom" 
		title="Recherche" 
		maxHeight="200px"
		startExpanded="false"
		autoHeight="true"
		style="height: 10px" >
 
Formulaire de recherche dynamique
	</div>
</div>

Les problèmes de cette partie sont :
- le DIV n'est pas un bloc (il peut se placer au dessus d'autres éléments comme du texte dans la même zone, voire déborder sur le bloc inférieur)
- Le titre n'apparaît pas lorsque l'ExpandoPane est fermé


Merci d'avance

PS : Je suis toujours en Dojo 1.4.1.

[vermine]

Bonjour,

Pour la seconde partie, ce que vous appelez "titre", c'est :

Code :

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

1
2
 
Formulaire de recherche dynamique

Ou bien:

Code :

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

1
2
 
title = "Recherche"

?

Si c'est le premier cas, je trouve ça normal, non ? Il ferme l'ensemble de la balise div.
Si c'est le second cas, c'est un souci HTML. div vide = pas de "pixel div". Donc pas de passage de la souris, et pas de title.
Si c'est autre chose, et bien tant pis.

[Vow]

Bonjour

Je parlais bien du title, pas du contenu.
Le div apparaît bien sauf qu'il n'y a pas le title, comme lorsqu'il est en mode "ouvert".

[vermine]

Quand vous dites que le div apparait, vous voyez quoi ?

Code :

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

1
2
 
Formulaire de recherche dynamique

?

Si il n'y a pas de contenu, le title ne se lancera pas. Je ne connais pas l'ExpandoPane donc je ne visualise pas bien ce que vous entendez par "il est fermé, il est ouvert". Et si vous placiez le title sur le div parent ?

Bref, je ne sais pas vous aider.

[Vow]

Si le panel s'ouvre, on voit le titre en haut de page puis le contenu en dessous (dans mon exemple, il s'agit de "Formulaire de recherche dynamique")


Des exemples d'ExpandoPane :
http://www.cookyz.fr/js_base/release...Pane_prog.html
(il s'agit des panels de droite et de gauche)

En tout cas, merci d'avoir essayé

[vermine]

Juste un dernier test et puis je me tais.

Enlevez "Formulaire de recherche dynamique" et ouvrez le panel. Est-ce que le title apparait ?