Positionner le contextmenu dans la fenêtre
Bonjour à tous,
Je suis occupé de développer un module GRH pour notre CRM/ERP.
J'ai donc un tableau :
Nom travailleur | 01 | 02 .... | 31
Bien sur les colonne dépende du mois (exemple pour février il ira jusque 28 sauf pour les année bissextile où il ira jusqu’à 29).
Jusque là pas de soucis, on me demande alors de pouvoir au clic droit sur une case définir un état de prestation (presté, vacance,etc...)
Encore une fois pas de soucis le script fonctionne. mon problème est sur le positionnement de ce menu contextuel
en faite quand je suis sur les dernière ligne (donc tout en bas de la page, mon menu s'affiche mais pas en entier, il manque le bas du menu, pareil si je clique sur les première ligne il me manque le haut du menu.
La hauteur du menu est variable, pas fixe car certaine case contiennent un item en plus ou en moins en fonction de certaine propriété liée au travailleur, je n'arrive donc pas à faire en sorte que ce menu évite de sortir de la page, idem si je clique sur la dernière cellule le menu sort à droite et donc on ne vois pas tout le menu.
Je sais pas si je m'explique bien :s
Voici le JS qui génère mon menu
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
| // Exécute une requête ajax pour aller chercher les item du menu et les injecter dans le conteneur
function creatMyMenu(event){
// Création du dom
var div = $('<div class="custom-menu"></div>');
// On l'ajoute au DOM pour pouvoir le ciblé
$("body").prepend(div);
// Appel Ajax
callback = function(j){ div.append(j); };
mdata = { /* mes paramètre dont l'id du travailleur pour personalisé le menu */ };
toXhr(mdata,callback,true,'post');
// Affiche le menu et le positionne à droit du cursor (là où on à cliquer)
div.finish().toggle(100).css({ top: event.pageY + "px", left: event.pageX + "px" });
}
$(document).bind("contextmenu", function(event){
// Reset event click droit
event.preventDefault();
// Création du menu
creatMyMenu(event);
});
// Si on click ailleur que sur l'élemnt
$(document).bind("mousedown", function (e) {
// Si il y'a un menu actif on le supprime
if (!$(e.target).parents(".custom-menu").length > 0) {
// Suppression
$(".custom-menu").remove();
}
}); |
Donc comme je le dit, le problème n'est pas l'affichage en soit, mais bien le positionnement du conteneur (div avec la classe "custom-menu")
Je cherche à mettre en place une fonction générique qui va récupérer les dimension du conteneur et adapter sa position pour pas qu'il sorte de l'écran d'affichage.
Quelques chose comme $(".custom-menu").posIt(); ou encore posIt($(".custom-menu"));.
Si quelqu'un avait l'amabilité de m'expliquer les étape afin de comprendre comment mettre cela en place car j'avoue à avoir des difficulté à imaginer la chose, je lui en serais reconnaissant.
D'avance merci de votre participation.
Bien à vous
Spliffer
