Discussion :

[kap]

Bonjour,

Je créée à la volée en javascript une boite de dialogue contenant des input radio sous forme de bouttons. L'affichage se fait bien sous Chrome et Firefox mais sous IE (je vous laisse regarder les images en pièce jointe pour vous faire une idée).

Voici mon code :

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
function pictoUniqueVisualization(){	
 
	var options = getOptionsPictoUniqueVisualization(id_layer); //créer la boîte de dialogue
	createDialog(options);
	var content = createContentUniqueVisualization("select_icon"); // remplit la boîte de dialogue
	$("#dialog").append(content);
	$("#radio_shape").buttonset();
	$("#colorpicker").spectrum({
		showPaletteOnly: true,
		showPalette:true,
		preferredFormat: "hex6",
		color: '#F4EB37',
		palette: [
			['#F4EB37', '#CDDC39', '#62AF44', '#009D57', '#0BA9CC', '#4186F0', '#3F5BA9'], ['#F9F7A6', '#E6EEA3', '#B7DBAB', '#7CCFA9', '#93D7E8', '#9FC3FF', '#A7B5D7'],
			['#7C3592', '#A61B4A', '#DB4436', '#F8971B', '#F4B400', '#795046', '#777777'], ['#C6A4CF', '#D698AD', '#EE9C96', '#FAD199', '#FFDD5E', '#B29189', '#CCCCCC'],
		]
	});
}
 
function createContentUniqueVisualization(str){
 
	var div = document.createElement("div");
 
	/***********************************
		<form>
		<div id="radio">
		<input type="radio" id="radio1" name="radio">
		<label for="radio1"><img src=my-image.jpg></label>
		</div>
		</form>
	**********************************/
 
	var text_shape = document.createTextNode("Select the shape of the icon: ");
	div.appendChild(text_shape);
 
	var br = document.createElement("br");
	div.appendChild(br);
 
	var form = document.createElement("form");
	div.appendChild(form);
 
	var div_radio_shape = document.createElement("div");
	var id_radio_shape = document.createAttribute("id");
	id_radio_shape.value = "radio_shape";
	div_radio_shape.setAttributeNode(id_radio_shape);
 
	var input_square = createInputRadio("radio_shape", "square");
	var label_square = createInputLabel("square", "images/pictos/square_CCCCCC.png");
 
	var checked = document.createAttribute("checked");
	checked.value = "checked";
	input_square.setAttributeNode(checked);
 
	div_radio_shape.appendChild(input_square);
	div_radio_shape.appendChild(label_square);
 
	var input_stars = createInputRadio("radio_shape", "stars");
	var label_stars = createInputLabel("stars", "images/pictos/stars_CCCCCC.png");
	div_radio_shape.appendChild(input_stars);
	div_radio_shape.appendChild(label_stars);
 
	var input_diamond = createInputRadio("radio_shape", "diamond");
	var label_diamond = createInputLabel("diamond", "images/pictos/diamond_CCCCCC.png");
	div_radio_shape.appendChild(input_diamond);
	div_radio_shape.appendChild(label_diamond);	
 
	var input_circle = createInputRadio("radio_shape", "circle");
	var label_circle = createInputLabel("circle", "images/pictos/circle_CCCCCC.png");
	div_radio_shape.appendChild(input_circle);
	div_radio_shape.appendChild(label_circle);	
 
	var input_pin = createInputRadio("radio_shape", "pin");
	var label_pin = createInputLabel("pin", "images/pictos/pin_CCCCCC.png");
	div_radio_shape.appendChild(input_pin);
	div_radio_shape.appendChild(label_pin);
 
	form.appendChild(div_radio_shape);
	div.appendChild(form);
 
	// colorpicker
	var text_color = document.createTextNode("Select the color of the icon: ");
	var br2 = document.createElement("br");
 
 
	var input_color = document.createElement("input");
	var id_color = document.createAttribute("id");
	id_color.value = "colorpicker";
	input_color.setAttributeNode(id_color);
	var type_color = document.createAttribute("type");
	type_color.value = "text";
	input_color.setAttributeNode(type_color);
 
 
	div.appendChild(text_color);
	div.appendChild(br2);
	div.appendChild(input_color);
 
	return div;
}

Avez-vous une idée?

Merci d'avance,
Damien