Le Positionnement Du Menu Contextuel

Je suis en train de position d'un menu contextuel personnalisé avec jQuery.

La première fois qu'il apparaît à la droite de la position (coordonnées de la souris), mais alors la position actuelle est résumée à la nouvelle position, de sorte que le menu disparaisse de l'écran.

Voici le JavaScript:

<script>
$(function(){
    $('#box').hide();

    $(document).bind("contextmenu", function(e) {
        $("#box").offset({left:e.pageX, top:e.pageY});
        $('#box').show();
        e.preventDefault();
    });

    $(document).bind("click", function(e) {
        $('#box').hide();
    });
    $('#box').bind("click", function(e) {
        $('#box').hide();
    });
});
</script>
Par le chemin, .on() a supplanté .bind() dans les dernières versions de jQuery.

OriginalL'auteur user1170330 | 2013-04-03

  1. 9

    Ne pas utiliser offset méthode, essayez css au lieu de cela, le positionnement du menu contextuel absolument:

    $("#box").css({left:e.pageX, top:e.pageY});

    CSS:

    #box {
    ...
    position: absolute;
}

    http://jsfiddle.net/smxLk/

    En fait, j'aime mieux en tout cas. Une juste compréhension de la CSS et de réglage en conséquence, elle sera toujours mieux que d'utiliser jQuery dans mon opinion, mais j'aimerais apporter une correction. Je voudrais utiliser fixed au lieu de absolute. de cette façon, il ne peut être affecté par un non-statique parent et cela ne cause pas de barres de défilement.
    À l'aide de position: fixed rend menu contextuel de se comporter de façon étrange :jsfiddle.net/smxLk/1 sur la page avec de longues contenu de la page. position:absolute fonctionne très bien: jsfiddle.net/smxLk/2. Je pense aussi qu'avant de montrer que nous devons vérifier si le menu s'éteint l'écran et de corriger sa position acordingly sinon, le menu n'a pas de sens si elle est clipsée.
    Les bons points. J'ai oublié de rester dans un endroit lorsque vous faites défiler avec position:fixed. XD

    OriginalL'auteur dfsq

  2. 4

    Le problème est que lorsque vous faites un clic droit puis à gauche cliquez sur un autre emplacement, puis cliquez de nouveau, la position est incorrecte.

    La racine du problème, c'est que vous réglez le décalage avant d'afficher l'élément. Il semble que l'on confond jQuery si l'élément est défini à display:none et puis son décalage est changé.

    À résoudre le problème, vous devez passer le show et la offset lignes dans votre code:

    $(document).bind("contextmenu", function(e) {
    $("#box").offset({left:e.pageX, top:e.pageY});
    $('#box').show();
    e.preventDefault();
});

    devient

    $(document).bind("contextmenu", function(e) {
    $('#box').show();
    $("#box").offset({left:e.pageX, top:e.pageY});
    e.preventDefault();
});

    Démo

    Source

    Est-ce un bug jQuery, alors?
    Peut-être. Je ne suis pas sûr qu'il se fixe, cependant, car il n'a pas vraiment le sens de modifier le décalage d'un élément masqué. Mais je n'ai pas de réponse définitive pour vous, malheureusement

    OriginalL'auteur Joseph Marikle

  3. 1

    Essayer position: fixed; avec la position de menu contextuel des modifications basées sur les conditions suivantes -

    var windowHeight = $(window).height()/2;
var windowWidth = $(window).width()/2;
if(e.clientY > windowHeight && e.clientX <= windowWidth) {
$("#contextMenuContainer").css("left", e.clientX);
$("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
$("#contextMenuContainer").css("right", "auto");
$("#contextMenuContainer").css("top", "auto");
} else if(e.clientY > windowHeight && e.clientX > windowWidth) {
$("#contextMenuContainer").css("right", $(window).width()-e.clientX);
$("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
$("#contextMenuContainer").css("left", "auto");
$("#contextMenuContainer").css("top", "auto");
} else if(e.clientY <= windowHeight && e.clientX <= windowWidth) {
$("#contextMenuContainer").css("left", e.clientX);
$("#contextMenuContainer").css("top", e.clientY);
$("#contextMenuContainer").css("right", "auto");
$("#contextMenuContainer").css("bottom", "auto");
} else {
$("#contextMenuContainer").css("right", $(window).width()-e.clientX);
$("#contextMenuContainer").css("top", e.clientY);
$("#contextMenuContainer").css("left", "auto");
$("#contextMenuContainer").css("bottom", "auto");
}

    http://jsfiddle.net/AkshayBandivadekar/zakn7Lwb/14/

    Je suis à la recherche! Merci

    OriginalL'auteur AkshayBandivadekar