Equivalent LightBox pour l'affichage d'une page

Version imprimable

16/11/2009, 15h32
Lnhab

Equivalent LightBox pour l'affichage d'une page

Bonjour,

Existe-t-il un composant dojo permettant d'afficher des pages (html ou php) de la même manière que les images avec LightBox?
(http://dojocampus.org/explorer/#Dojo...ightbox_Single)

Je voudrais que lorsque l'utilisateur clique sur une image un formulaire apparaisse un surimpression (le formulaire apparait au premier plan et le reste de la page est grisé).

Merci

Hélène
16/11/2009, 23h47
emmanuel.remy

Salut,

dijit.dialog ?

ERE
16/11/2009, 23h49
emmanuel.remy

Et regarde aussi dans dojox/widget/tests/test_Dialog.html

ERE

Bonjour,

J'ai essayé d'utiliser l'exemple utilisant dijit.Dialog qui se trouve sur http://dojocampus.org/explorer/#Dijit_Dialog_Basic

en le modifiant de la facon suivante:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <style type="text/css">
    			@import "./lib/dojox/image/resources/image.css";
	    </style>
	    <script type="text/javascript" src="./lib/dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script>
 
  	   <script type="text/javascript">
		  dojo.require("dijit.Dialog");
		  dojo.require("dijit.form.TextBox");
		  dojo.require("dijit.form.TimeTextBox");
		  dojo.require("dijit.form.Button");
		  dojo.require("dijit.form.DateTextBox");
	   </script>
        </head>
 
    <body>
 	<button dojoType="dijit.form.Button" onclick="dijit.byId('dialog1').show()">Show Dialog</button>
 
	<div dojoType="dijit.Dialog" id="dialog1" title="First Dialog"
		    execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
		  <table>
		    <tr>
		      <td><label for="name">Name: </label></td>
		      <td><input dojoType="dijit.form.TextBox" type="text" name="name" id="name"></td>
		    </tr>
		    <tr>
		      <td><label for="loc">Location: </label></td>
		      <td><input dojoType="dijit.form.TextBox" type="text" name="loc" id="loc"></td>
		    </tr>
		    <tr>
		      <td><label for="desc">Description: </label></td>
		      <td><input dojoType="dijit.form.TextBox" type="text" name="desc" id="desc"></td>
		    </tr>
		    <tr>
		      <td colspan="2" align="center">
		        <button dojoType="dijit.form.Button" type="submit">OK</button></td>
		    </tr>
		  </table>
		</div>
		<div>
		   <table width="100%">
			<tr>
		 	   <td width= 10%><IMG SRC="icon.PNG" /></td>
			   <td width= 75% align="center">
				<h1>
					<Main Page>
				</h1>
			   </td>
			   <td width= 5%>
			 	<a href="ToDo.html" target="_blank">
					<img src="./icone/home_48.png"/>
				</a>
			   </td>
			   <td width= 5%>
			 	<a href="ToDo.html" target="_blank">
					<img src="./icone/help_48.png"/>
				</a>
			   </td>
			   <td width= 5%>
				<a href="ToDo.html" target="_blank">
					<img src="./icone/door_next_48.png"/>
				</a>
			   </td>
			</tr>
		</table>
	    </div>
    </body>
</html>

Lorsque je clique sue le bouton "ShowDialog",le dialogue apparait simplement en bas de page contrairement à ce qui est fait sur le site dojocampus où il recouvre l'ensemble de la page.
Le comportement est le même dans IE et Firefox.

Merci de votre aide,

Hélène

17/11/2009, 16h21
Lnhab

j'ai trouvé mon problème: l'erreur était dans mon code.
Par contre j'ai le problème suivant: ma page web est découpée en plusieurs frames (vu ce qu'on doit faire c'est la meilleure solution qu'on ait trouvée) et actuellement la fenêtre de dialogue apparait en surimpression seulement sur la frame qui la contient et je souhaiterais qu'elle recouvre l'ensemble de la page.
Vous savez si c'est possible?

Merci pour votre aide.

Hélène
17/11/2009, 21h27
emmanuel.remy

Salut Hélène,

Ce n'est pas possible car les calculs des coordonnées sont faits par rapport au frame en cours.

Citation:

ma page web est découpée en plusieurs frames (vu ce qu'on doit faire c'est la meilleure solution qu'on ait trouvée)

Etonnant.

ERE
18/11/2009, 11h47
Lnhab

Bonjour,

Disons que c'est la solution qui nous apparaissait comme la plus simple à mettre en place vu nos connaissances en HTML/PHP/JavaScript.
En effet, la page comporte différents boutons: quand l'utilisateur clique sur un bouton une partie de la page est rechargée (actuellement un frame). On souhaite éviter le re-chargement complet de la page à chaque clique.

Si vous avez des suggestions, n'hésitez pas.

Hélène
18/11/2009, 22h34
emmanuel.remy

Citation:

Envoyé par Lnhab

Bonjour,

Disons que c'est la solution qui nous apparaissait comme la plus simple à mettre en place vu nos connaissances en HTML/PHP/JavaScript.
En effet, la page comporte différents boutons: quand l'utilisateur clique sur un bouton une partie de la page est rechargée (actuellement un frame). On souhaite éviter le re-chargement complet de la page à chaque clique.

Si vous avez des suggestions, n'hésitez pas.

Hélène

Dojo dispose d'un composant ContentPane qui a un attribut href. C'est en fait une balise DIV qui charge du HTML de manière asynchrone, comme le ferait un frame.
Mais sinon tu as encore une autre solution: remplace ton frame par un IFRAME, car lui est intégré à la page.

Bon dev,
ERE

Merci beaucoup pour ce conseil, effectivement le composant contentPane est très pratique et pas forcément si compliqué à mettre en place.. mais j'ai tout de même une question!

J'ai créé trois onglets qui affichent des données provenant d'une base de donné dans un chart dojo qui est remis à jour régulièrement. Pour limiter le trafic inutile je voudrais que la remise à jour du chart (qui se fait avec une fonction Javascript setTimeout) ne s'effectue que si l'onglet est actif mais je n'arrive pas à savoir comment on détermine quel onglet est actif?

Pour info, mon code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div dojoType="dijit.layout.TabContainer" region="center" id="topTabs" style="width:100%; height:800px; border:none; border-bottom:#FFF solid 2px; overflow:hidden;"> <div id="database" dojoType="dijit.layout.ContentPane" refreshOnShow="true" title="Field1"> <iframe src='./database.html' id='field1' style="width:100%; height:600px; border:none; overflow:hidden;"></iframe> </div> <div id="todo" dojoType="dijit.layout.ContentPane" refreshOnShow="true" title="Field2"> <iframe src='./TODO.html' id='field2' style="width:90%; height:600px; border:none; overflow:hidden;"></iframe> </div> <div id="todo2" dojoType="dijit.layout.ContentPane" refreshOnShow="true" title="Field3" > <iframe src='./TODO2.html' id='field3' style="width:90%; height:600px; border:none; overflow:hidden;"></iframe> </div> </div>
Merci

Hélène

20/11/2009, 18h16
emmanuel.remy
Salut,

TabContainer hérite de StackContainer qui lui implémente un attribut selectedChildWidget. Donc tu peux tabler sur un
Code:

1 2 var selectedContentPane= topTabs.selectedChildWidget; ...
ERE
23/11/2009, 15h49
Lnhab

Merci Emmanuel, je vais voir ce que je peux faire.

Hélène