Discussion :

[thor76160]

Bonsoir.

Mon nouveau projet est la construction d'une carte du monde intéractive avec jquery.
j'ai un premier fichier qui contient le code suivant :

jquery.ui.worldmap.js

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
(function($)
{
    var defaults = {
        "coords" : {}
    };
 
    $.fn.worldmap = function(options) {
 
        return this.each(function()
        {
            alert(JSON.stringify(defaults));
        });
 
    };
})(jQuery);

je prévois de construire de multiples autres fichiers de la sorte...
jquery.ui.worldmap-france.js
jquery.ui.worldmap-usa.js
jquery.ui.worldmap-italie.js
...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
(function($)
{
    var coords = {
                    "departments" : [
                                        [{ id:"1", post_code:"01", name_zone:"test1", name_zone_upper:"TEST1", x:20, y:20, coords:"20,20,20,25,25,25,25,20,20,20"}],
                                        [{ id:"2", post_code:"02", name_zone:"test2", name_zone_upper:"TEST2", x:40, y:40, coords:"40,40,40,45,45,45,45,40,40,40"}]
                                    ]
                };
 
    $.fn.worldmap.defaults.coords["france"] = coords;
 
})(jQuery);

le but de ces fichiers est de renseigner le tableau json "defaults" déclaré dans le premier fichier jquery.ui.worldmap.js.
Seulement je n'arrive pas à établir la communication entre les 2 fichiers...

J'essaie d'utiliser plus ou moins le même système que pour le datepicker de jqueryui.

Pourriez-vous m'aider svp ? Si ça se trouve c'est juste une petite broutille...
Merci.

[SpaceFrog]

et ça coince ou ?

[danielhagnoul]

Attention, on manipule les options par défaut du plugin pas d'une variable (var) !

Attention aussi à l'écriture des données JSON, les " sont obligatoires.

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
(function($){
    $.fn.worldmap = function( options ){
 
        return this.each( function(){
            console.log( "worlmap", JSON.stringify( $.fn.worldmap.defaults ) );
        });
    };
 
    $.fn.worldmap.defaults = {
        "coords" : {}
    };
 
})(jQuery);
 
(function($){
    var coords = {
		"departments" : [
			[
				{ 
					"id" : "1", 
					"post_code" : "01", 
					"name_zone" : "test1", 
					"name_zone_upper" : "TEST1", 
					"x" : 20, 
					"y" : 20, 
					"coords" : "20,20,20,25,25,25,25,20,20,20"
				}
			],
			[
				{
					"id" : "2", 
					"post_code" : "02", 
					"name_zone" : "test2", 
					"name_zone_upper" : "TEST2", 
					"x" : 40, 
					"y" : 40, 
					"coords" : "40,40,40,45,45,45,45,40,40,40"
				}
			]
		]
	};
 
    $.fn.worldmap.defaults.coords["france"] = coords;
 
})(jQuery);
 
$( function(){
	$( "body" ).worldmap();
});

Code :

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

1
2
3
worlmap
 
{"coords":{"france":{"departments":[[{"id":"1","post_code":"01","name_zone":"test1","name_zone_upper":"TEST1","x":20,"y":20,"coords":"20,20,20,25,25,25,25,20,20,20"}],[{"id":"2","post_code":"02","name_zone":"test2","name_zone_upper":"TEST2","x":40,"y":40,"coords":"40,40,40,45,45,45,45,40,40,40"}]]}}}