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 : 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
 
<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.

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

Dnode57.