[jQuery] Passage de paramètres à une fonction dialog

Version imprimable

Bonjour tout le monde,

Depuis peu je me suis mis à utiliser jquery, et j'avoue avoir un peu de mal. Actuellement je bute sur un problème qui je suis certain doit être le b.a.-ba de la programmation, mais là, je coince. Voici ce qui me bloque, j'utilise le code suivant pour afficher une boite de dialogue :

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
 
<html>
  <head>
    <link type="text/css" href="./lib/jquery/css/custom-theme/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
    <script language="JavaScript" src="./lib/jquery/js/jquery-1.3.2.min.js"></script>
    <script language="JavaScript" src="./lib/jquery/js/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript">
   	$(function() {
                   ////////////////////////////////////////////////////////////////////////////////////
                   /// Affichage boite de dialogue bloc1
    		   $("#bloc1").dialog(
                                      {
                                       autoOpen: false,
   			               bgiframe: true,
   			               resizable: true,
   			               width:900,
   			               height:500,
   			               modal: true,
   			               overlay: {backgroundColor: '#000',opacity: 0.5},
   			               buttons: {'Fermer': function() {$(this).dialog('close');}}
   		                      }
                                     );
 
                   $("#img_bloc1").click(function(){
                                                    $('#bloc1').show(10);
                                                    $('#bloc1').dialog('open');
                                                    return false;
                                                   }
                                           );
                  }
      );
  </script>
  </head>
 
  <body>
    <div>
         <img id="img_bloc1" src="./images/glyph/24x24/calendar_empty.png" alt="img_bloc1" title="img_bloc1"/>
         <!--
         ici les image pour ouvrir les autres blocs.
         <img id="img_bloc1" src="./images/glyph/24x24/bloc2.png" alt="img_bloc2" title="img_bloc2"/>
         <img id="img_bloc1" src="./images/glyph/24x24/bloc3.png" alt="img_bloc2" title="img_bloc2"/>
 
         -->
    </div>
 
    <div id="bloc1">
         <p>contenu bloc1</p>
    </div>
 
    <div id="bloc2">
         <p>contenu bloc2</p>
    </div>
 
    <div id="bloc3">
         <p>contenu bloc3</p>
    </div>
  </body>
</html>

L'affichage de la boite bloc1 fonctionne correctement, mais suis-je obligé de définir une fonction spécifique ($("#bloc2").dialog(...) etc..) à chaque bloc? Je ne pense pas, il doit y avoir un moyen de passer en paramètre le nom du bloc que l'on veut afficher, et c'est celui-là que je cherche désespérément :?. Sur tous les exemples trouvés, les id étaient définis de manière littéral, ça fonctionne mais ça fait de la répétition de code, que je ne veux pas.:calim2:

Quelqu'un aurait-il un exemple à me fournir? D'avance merci.

Dnode57.

Bonsoir.

Exemple :

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
97
98
99
100
101
102
103
104
105
106
107
108
109
 
<!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" 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>
	<link rel="stylesheet" type="text/css" href="../lib/humanity/jquery-ui-1.7.2.custom.css" media="screen" />
	<style type="text/css">
		body {
			background-color:#696969;
			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;
		}
		div#affiche {
			margin:12px;
			border:1px solid #999999;
		}
		img.imgBloc {
			width:150px;
			height:150px;
			border:1px solid #000000;
			margin:12px;
		}
		div.dialogBloc {
			display:none;
		}
	</style>
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
 
			$(".imgBloc").click(function(){
				$("#"+this.id.slice(4)).dialog({
					bgiframe: true,
					resizable: true,
					width:900,
					height:500,
					modal: true,
					overlay: {
						backgroundColor: '#000',
						opacity: 0.5
					},
					buttons: {
						'Fermer': function() {
							$(this).dialog('close');
						}
					}
				});
 
				return false;
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
 
		<img id="img_bloc1" class="imgBloc" src="../images/imagetest.png" alt="img_bloc1" title="img_bloc1"/>
                <img id="img_bloc2" class="imgBloc" src="../images/imagetest.png" alt="img_bloc2" title="img_bloc2"/>
                <img id="img_bloc3" class="imgBloc" src="../images/imagetest.png" alt="img_bloc3" title="img_bloc3"/>
 
		<div id="bloc1" class="dialogBloc">
			 <p>contenu bloc1</p>
		</div>
 
		<div id="bloc2" class="dialogBloc">
			 <p>contenu bloc2</p>
		</div>
 
		<div id="bloc3" class="dialogBloc">
			 <p>contenu bloc3</p>
		</div>
	</div>
</body>
</html>

18/11/2009, 08h43
dnode57

Un grand merci!

Bonjour,

Un grand merci pour cet exemple qui me permet de voir plus clair:ccool:. On va donc jouer sur un sélecteur afin de récupérer les propriétés de l'élément, et ainsi manipuler celui-ci.

Un exemple vaut bien plus que de long discours, merci encore.

Bonne journée
18/11/2009, 09h29
danielhagnoul

Citation:

Envoyé par dnode57

Un exemple vaut bien plus que de long discours

+1 :ccool:

L'exemple répondait à votre question, mais vous êtes le seul à savoir si la question est fondée.

On peut également créer un seul dialogue et juste avant l'affichage on modifie le titre et le contenu en fonction des actions de l'utilisateur.
19/11/2009, 10h09
dnode57

Bonjour,

Effectivement, la modification des données avant l'affichage est également possible, cependant personnellement je trouve plus simple et compréhensible de définir des bloc avec les contenus correspondant. De toute façon l'information devra être présente. Conclusion, à chacun sa méthode, l'essentiel étant qu'elle soit correcte et clair pour celui qui l'écrit et pour ceux qui devront la maintenir.

Bonne journée. :salut:

Dnode57.