Bonjour,
j'utilise une fenêtre jquery (.dialog()) dans laquelle j' ajoute dynamiquement un bloc div de boutons à l'aide de la méthode append() or je voudrais pouvoir écrire mon code html statiquement dans le dom et l'appeler via un id pour l'ajouter à ma fenêtre, voici le code en question :
Code html : 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 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <style> #dialog{ background-color: #7bbeff; } #sizename{ width:45px; margin-left:6px; } .operateur{ width: 20px; height: 20px; } .ref{ font-size: 2px; margin:0; width: 135px; } .operateur .ui-button { width: 10px; height: 0px; } </style> </head> <body> <a href="#" id="open">Ouvrir la fenetre</a> <div id="fenetre" style="display:none; font-size:0.7em;"> <p>Contenu de ma fenetre.</p> </div> <script type="text/javascript">
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80 $(document).ready(function(){ $('#fenetre').dialog({ autoOpen: false, bgiframe: true, resizable: true, modal: false, width: 350, title: 'Ma fenetre' }); $('#open').click(function(){ $('#fenetre').dialog('open'); return false; }); }); $(function() { var cpt = 0; $( "#dialog" ).dialog({ title: 'Calcul' }); $('body').on('click','#valid',function(e,ui){ console.log("click"); }); $('body').on('click','#cancel',function(e,ui){ $( "#dialog" ).dialog( "close" ); }); $('#dialog').on('change','#sel',function(e,ui){ if($('#dialog').children('div').attr('id') == 'detail') { console.log("exist"); }else{ $('#valid').before('<div id="detail"></div>'); } $('*','#detail').remove(); $('#detail').append('<div><input type="text" name="valeur" value="" /></div>'); $('#detail').append('<div><button type="submit" name="plus" value="+">+</button>' + '<button type="submit" name="moins"' +' value="-">-</button>' + '<button type="submit" name="multi" value="*">*</button>' + '<button type="submit" name="divi" value="/">/</button></div>'); $('#detail').append('<div ><button type="submit" name="ref" value="+">ref</button>'+ '<input class="ref" type="text" name="reftxt" value=""/></div>' +'<div ><button type="submit" name="substring" value="+">extract()</button>' + '<button type="submit" name="len">len()</button>'); $( "button" ).button(); } if($('#sel').val()=='valeur1' ){ $('#detail').append('<p><label>size </label><INPUT id="sizename" type="text" name="sizename"></p>'); } if($('#sel').val()=='valeur2'){ $('#detail').append('<p><label>size </label><INPUT id="sizename" type="text" name="sizename"></p>'); } }); $( "button" ).button(); });
Code html : 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> <div id="dialog"/> <p> <label>variable</label><INPUT type="text" name="varname"> </p> <p><label>valeur : </label><br/> <SELECT id="sel" name="detail"> <OPTION>expression <OPTION>valeur1 <OPTION>valeur2 </SELECT></p> <p></p><button id="valid" type="submit" value="valider" name="valid">valider</button><button id="cancel" type="reset"value="annuler" name="cancel">annuler</button></p> </div> <!-- ci-dessous le bloc que je souhaite utiliser dans ma fenêtre que lorsque j'en ai besoin --> <div id="exp"> <div > <button type="submit" name="plus" value="+">+</button> <button type="submit" name="moins" value="-">-</button> <button type="submit" name="multi" value="*">*</button> <button type="submit" name="divi" value="/">/</button> </div> </div> </body> </html>
Merci d'avance.
Partager