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

[danielhagnoul]

Bonsoir

Il faut définir le comportement CSS, sinon chaque navigateur fait à sa manière.

[kap]

Bonjour danielhagnoul,

Merci pour votre réponse. L'intérêt que je voyais à utiliser jQuery et ses coposants UI était de ne justement pas perdre mon temps à définir les comportements CSS. Le CSS suivant est intégré à ma page web :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

	<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

IE09 n'est-il pas supporté par la librairie jquery-ui-1.10.3 et les CSS correspondants?

Damien

[danielhagnoul]

Bonjour

La branche 1 de jQuery (1.10.2 actuellement) et jQuery UI sont compatibles avec les navigateurs obsolètes.

Sauf erreur de lecture, il n'est marqué nulle part dans le message n° 1 que vous utilisez jQuery UI et son CSS.

Dans votre code, je ne vois nulle part l'utilisation de jQuery UI : $( "input[type=radio]" ).button();.

[kap]

Mon code est pas forcément très lisible, je l'avoue. C'est à la ligne 7 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#radio_shape").buttonset();

Le contenu de la boîte de dialogue est créé dans la fonction createContentUniqueVisualization() sous la forme de : (je me suis basé sur les exemples de la doc)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<<form>
	<div id="radio_shape">
		<input type="radio" id="radio1" name="radio">
		<label for="radio1"><img src=my-image.jpg></label>
		<input type="radio" id="radio2" name="radio">
		<label for="radio2"><img src=my-image.jpg></label>
	</div>
</form>

// Edit
Si je mets le code html en dur dans ma page et le $("#radio_shape").buttonset() dans la fonction javacript chargée à l'ouverture, le comportement est bon. Cela veut dire que le problème vient de la génération à la volée. Est-ce que mon code est mal généré ou est-ce IE9 qui a du mal à l'interpréter?

[danielhagnoul]

Je vois, j'utilise très rarement le widget UI Button et encore plus rarement le supplément buttonset().

Pour que "buttonset" fonctionne, il faut impérativement un ID dans chaque "input" et un attribut "for" qui s'y réfère dans chaque label.