Appel de fonction javascript avec un tableau en paramètre
Salut à tous!
J'ai un petit souci :
J'essaye de faire un menu contextuel (à la seule différence que le menu apparait sur double clic gauche). Jusque là pas de pb : le seul souci c'est que mon constructeur prend en paramètre un array (qui contient en fait le label/lien/image de chaque item du menu)
En fait j'appel la fonction javascript suivante depuis du java dans du jsp :
code jsp (java dans le jsp) :
Code:
out.print("<tr onmouseover=\"menuEvent()\">");....
code js :
Code:
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
| function menuEvent()
{
return new Menu_Contextuel(
// Tableau des items
[
{
'ItemName': 'Page précédente',
'Action': 'history.go(-1)',
'Image': null
}
,
{
'ItemName': 'Page suivante',
'Action': 'history.go(1)',
'Image': null
}
,
{
'ItemName': null
}
,
{
'ItemName': 'Heure courante',
'Action': 'var date=new Date();alert(date.toLocaleString());',
'Image': null
}
,
{
'ItemName': 'Envoyer Mail a XXXXX',
'Action': 'document.location=\'mailto:XXXXX\'',
'Image': null
}
]
,
// Liste des options du menu
{
'focusOn':{'background':'#316AC5', 'color':'#ffffff'},
'focusOff':{'background':'#ffffff', 'color':'#000000'},
'menu_color':{'background':'#ffffff', 'shadow':'#9D9DA1'},
'separator':{'size':'1', 'color':''},
'shadow_padding':'3'
}
);
} |
sachant que cela mis avec le code suivant : ca marche :)
Code:
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
| //
// Librairie by The Rubik's Man
// © 2005-2006
//
/*==================================================================================================================*/
/*==================================================================================================================*/
/*===> -------------------------------------------------------------------------- <====*/
/*===> | Librairie Menu Contextuel par The Rubik's Man | <====*/
/*===> -------------------------------------------------------------------------- <====*/
/*===> -- 2 Methodes provenant de la librairie open source " prototype.js " : Class.create() et Function.prototype.bind() <====*/
/*===> <====*/
/*===> -- Installation d'un menu contextuel personnalise tres simple avec ou sans image ( a droite ou a gauche ) <====*/
/*===> <====*/
/*===> © The Rubik's Man © <====*/
/*===> <====*/
/*===> Plan du fichier : 1) Extrait de la librairie "prototype" (2 fonctions) (ligne 28 -> 42) <====*/
/*===> 2) Librairie de creation du menu contextuel (ligne 56 ->221) <====*/
/*===> <====*/
/*==================================================================================================================*/
/*==================================================================================================================*/
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Extrait de la librairie PROTOTYPE //
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Permet avec la syntaxe " var maClasse = Class.create() " d'instancier une nouvelle classe et d'appeler la methode " initialize() " de cette classe
// la methode " initialize() " est considere comme le constructeur de la classe
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
// Permet de contrer le moteur javascript dans un bug de reference de fonction
// Generalement utilisee dans les methodes onComplete... onLoad... etc pour faire reference a l'objet en cours
Function.prototype.bind = function(object) {
var __method = this;
return function() {
return __method.apply(object, arguments);
}
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Fin Extrait de la librairie PROTOTYPE //
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////// Debut librairie principale Menu_Contextuel ///////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/* Contextuel Menu javascript creation
* Copyright (c) 2006 Peter BUGAN ( alias The Rubik's Man) <ocbslim@tiscali.fr>
* Free but protected by the Apache License 2.0
*/
var Menu_Contextuel = Class.create();
Menu_Contextuel.prototype = {
// Constructeur du menu contextuel
initialize : function (itemArray,options) {
// Enregistrement du tableau des elements du menu
this.items = itemArray;
// Enregistrement des parametres de style //
// Style de la boite principale
this.menu_style = 'z-index:500;'+
'position:absolute;'+
'width:200px;'+
'border:1px solid '+options.menu_color.shadow+';'+
'background-color:'+options.menu_color.background+';'+
'font-family:Microsoft sans serif;'+
'font-size:12px;'+
'cursor:default;'+
'visibility:hidden;'+
'padding:3;';
// Style de la boite ombree
this.shadow_style = 'z-index:400;'+
'position:absolute;'+
'width:200px;'+
'border:1px solid '+options.menu_color.shadow+';'+
'background-color:'+options.menu_color.shadow+';'+
'font-family:Microsoft sans serif;'+
'font-size:12px;'+
'color:'+options.menu_color.shadow+';'+
'cursor:default;'+
'visibility:hidden;'+
'padding:3;';
// Style des items lors du focus
this.focusOn_style = 'background:'+options.focusOn.background+';'+
'color:'+options.focusOn.color+';';
// Style des items lors du non focus
this.focusOff_style = 'background:'+options.focusOff.background+';'+
'color:'+options.focusOff.color+';';
// Style des lignes de separation
this.separator_style = 'size='+options.separator.size+' '+
'color='+options.separator.color+' ';
// Valeur de la profondeur de l'ombre
this.shadow_padding = options.shadow_padding;
// ----------------------------------------------------------- //
this.create_html(); // Creation du code HTML du menu contextuel
this.set_listener(); // Instanciation des ecouteurs de mouvement, de clic gauche et droit de la souris
},
// Fonction permettant de capturer les coordonnees de la souris sur tous les navigateurs
mousePositionCapture: function(e) {
var event = typeof window.event != 'undefined' ? window.event : e;
var Xfen, Xdoc, Yfen, Ydoc, el, scrollL, scrollT;
if ( document.documentElement.scrollLeft != 0 ) scrollL = document.documentElement.scrollLeft;
else if ( document.body.scrollLeft != 0 ) scrollL = document.body.scrollLeft;
else scrollL = 0;
if ( document.documentElement.scrollTop != 0 ) scrollT = document.documentElement.scrollTop;
else if ( document.body.scrollTop != 0 ) scrollT = document.body.scrollTop;
else scrollT = 0;
Xfen = event.clientX;
Xdoc = Xfen + scrollL;
Yfen = event.clientY;
Ydoc = Yfen + scrollT;
this.mouse_x = Xdoc;
this.mouse_y = Ydoc;
},
// Fonction permettant d'ouvir le menu contextuel lors d'un clic droit de la souris
open: function() {
document.getElementById("menu_contextuel_div").firstChild.style.top = this.mouse_y+'px';
document.getElementById("menu_contextuel_div").firstChild.style.left = this.mouse_x+'px';
document.getElementById("menu_contextuel_shadow_div").style.top = this.mouse_y+parseInt(this.shadow_padding)+'px';
document.getElementById("menu_contextuel_shadow_div").style.left = this.mouse_x+parseInt(this.shadow_padding)+'px'
document.getElementById("menu_contextuel_div").firstChild.style.visibility = "visible";
document.getElementById("menu_contextuel_shadow_div").style.visibility = "visible";
return false;
},
// Fonction permettant de fermer le menu contextuel
close: function() {
document.getElementById("menu_contextuel_div").firstChild.style.top = 0;
document.getElementById("menu_contextuel_div").firstChild.style.left = 0;
document.getElementById("menu_contextuel_shadow_div").style.top = 0;
document.getElementById("menu_contextuel_shadow_div").style.left = 0;
document.getElementById("menu_contextuel_div").firstChild.style.visibility = "hidden";
document.getElementById("menu_contextuel_shadow_div").style.visibility = "hidden";
},
// Fonction permettant de creer le code html du menu contextuel
create_html: function() {
// Generation du code HTML des 2 div
var html_code_ombre = '<div id="menu_contextuel_shadow_div" style="'+this.shadow_style+'">';
var html_code_item = '';
var background_focusOn = this.focusOn_style.split(';')[0].split(':')[1];
var background_focusOff = this.focusOff_style.split(';')[0].split(':')[1];
var color_focusOn = this.focusOn_style.split(';')[1].split(':')[1];
var color_focusOff = this.focusOff_style.split(';')[1].split(':')[1];
for(var i=0;i<this.items.length;i++) {
if (this.items[i].ItemName != null) {
var imageLeft = this.items[i].Image == null ?
'' : (this.items[i].Image.position == 'right' ?
'' : '<img valign=bottom style="position:absolute;left:1px;" src="'+this.items[i].Image.url+'" height="15" width="15">'
);
var imageRight = this.items[i].Image == null ?
'' : (this.items[i].Image.position == 'left' ?
'' : '<img valign=bottom style="position:absolute;right:1px;" src="'+this.items[i].Image.url+'" height="15" width="15">'
);
html_code_item += '<div style="padding-left:15px;padding-right:7px;'+this.focusOff_style+'">'+imageLeft+this.items[i].ItemName+imageRight+'</div>';
html_code_ombre += '<div style="padding-left:15px;padding-right:7px;"> </div>';
}
else {
html_code_item += '<hr '+this.separator_style+'>';
html_code_ombre += '<hr '+this.separator_style+'>';
}
}
html_code_item += '</div>';
// Fin de generation du code HTML
// Integration du code html dynamiquement dans le document en cours
// On cree l'element
var tempDiv = document.createElement('div');
tempDiv.id = 'menu_contextuel_div';
tempDiv.innerHTML = '<div style="'+this.menu_style+'">'+html_code_item+html_code_ombre+'</div>';
// Si le container existe deja alors on le supprime
if (document.getElementById('menu_contextuel_div')) document.body.removeChild(document.getElementById('menu_contextuel_div'));
// Puis on integre le nouveau menu contextuel a la suite du code courant de la page
document.body.appendChild(tempDiv);
var i = 0;
var divItem = null;
while (divItem = document.getElementById('menu_contextuel_div').firstChild.childNodes[i++]) {
divItem.onmouseover = function(){
this.style.background = background_focusOn;
this.style.color = color_focusOn;
}
divItem.onmouseout = function(){
this.style.background = background_focusOff;
this.style.color = color_focusOff;
}
eval('divItem.onclick = function(){'+
'document.onclick();'+
this.items[i-1].Action+
'}'
);
}
},
set_listener: function() {
if(document.getElementById('stopEventUpdate').style.display=='block'){
document.onmousemove = this.mousePositionCapture.bind(this);
document.getElementById('divAuthorizedClick').ondblclick = this.open.bind(this);
// OnClick
var oldOnClick = document.onclick;
var addedFunc = this.close.bind(this);
if (typeof (document.onclick) != 'function') document.onclick = addedFunc;
else {
document.onclick = function(e) {
oldOnClick(e);
addedFunc(e);
}
}
}
}
};
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////// Fin librairie principale Menu_Contextuel ///////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
// Librairie by The Rubik's Man
// © 2005-2006 |
Ca marche bien pour l'instant parce que le tableau des items menu est construit direct dans le javascript....
Mais je ne sais pas du tout comment je pourrais faire pour construire mes item de menu dynamiquement (nb d'item variable selon la ligne sur laquelle l'utilisateur clique, ...)
Ce que je voulais faire c'est de passer en paramètre une liste ou un tableau dans la fonction javascript genre de faire dans la jsp :
Code:
1
2
| Array menuItems = ...... // construction du tableau contenant les items du menu
out.print("<tr onmouseover=\"menuEvent("+menuItems+")\">");.... |
Mais ca ne marche pas trop....ou alors c'est que je sais pas comment récupérer le param sous forme d'un tableau en js.....
:arf:
Galère....
Quelqu'un saurait me donner une piste svp???
