Позиционирование контекстного меню - PullRequest
Новая
       23

Позиционирование контекстного меню

4 голосов
/ 29 марта 2011

Я разработал контекстное меню правой кнопкой мыши в javascript для таблицы. Положение контекстного меню находится внизу курсора для каждой строки таблицы. Последняя строка таблицы находится в конце страницы. Теперь при щелчке правой кнопкой мыши Строка контекстного меню идет вниз, но он должен отображаться вверху курсора. Помогите, пожалуйста, 

function ContextShow(event) {

event = event || window.event;

var m = getMousePosition(event);
var s = getScrollPosition(event);
var client_height = document.body.clientHeight;
var display_context = document.getElementById('context_menu');

if(replaceContext){

        display_context.style.display = "block";
        display_context.style.left = m.x + s.x +  "px";
        display_context.style.top =  m.y + s.y +  "px";

        replaceContext = false;
    }}


function getMousePosition (e){
e =   e || window.event;
var position = {
    'x' : e.clientX,
    'y' : e.clientY
}
return position;}



function getScrollPosition(){
var x = 0;
var y = 0;

if( typeof( window.pageYOffset ) == 'number' ) {
    x = window.pageXOffset;
    y = window.pageYOffset;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    x = document.documentElement.scrollLeft;
    y = document.documentElement.scrollTop;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    x = document.body.scrollLeft;
    y = document.body.scrollTop;
}

var position = {
    'x' : x,
    'y' : y
}

return position;

}

Здесь contextShow будет отображать контекстное меню щелчка правой кнопкой мыши в зависимости от положения мыши с использованием getMousePosition (event); и getScrollPosition (event);

Ответы [ 2 ]

5 голосов
/ 04 августа 2012

Я использую следующую функцию, чтобы установить позицию контекстного меню, и она работает для меня. 

function setContextMenuPostion(event, contextMenu) {

    var mousePosition = {};
    var menuPostion = {};
    var menuDimension = {};

    menuDimension.x = contextMenu.outerWidth();
    menuDimension.y = contextMenu.outerHeight();
    mousePosition.x = event.pageX;
    mousePosition.y = event.pageY;

    if (mousePosition.x + menuDimension.x > $(window).width() + $(window).scrollLeft()) {
        menuPostion.x = mousePosition.x - menuDimension.x;
    } else {
        menuPostion.x = mousePosition.x;
    }

    if (mousePosition.y + menuDimension.y > $(window).height() + $(window).scrollTop()) {
        menuPostion.y = mousePosition.y - menuDimension.y;
    } else {
        menuPostion.y = mousePosition.y;
    }

    return menuPostion;
}
0 голосов
/ 29 марта 2011

При отображении контекстного меню вы должны проверить, находится ли курсор мыши в нижней половине или верхней половине экрана. Затем, если это нижняя половина, вы должны отобразить его в верхней части курсора и наоборот. примените и к правой и левой половине экрана, чтобы ваше меню появилось в зависимости от того, в какой четверти экрана находится ваш курсор. Если вы это сделаете, вы уверены, что ваше меню всегда видно, независимо от того, где находится курсор.

Пример: если координаты мыши x> высота экрана / 2, чем отображать меню в верхней части курсора ...

...