Контекстное меню на javascript

Контекстное меню всплывает при нажатии правой кнопкой мыши по некоторому объекту, отсюда и его название. К сожалению многие (windows) разработчики пытаются впихнуть в него все возможные действия над объектом, из-за чего скорость работы и удобство может значительно упасть.

Для web-разработки нет определённых стандартов в создании такого меню для своего сайта, но есть несколько таких javascript'ов:

Вызвать событие

Firefox, IE и Safari поддерживают простой атрибут у html-элементов:

<body oncontextmenu='alert(10);'>

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


Не забудьте сделать ещё event-ы убирающие меню при обычном щелчке по пустому месту, при минимизации страницы или потери фокуса.

function ContextMenu(e,ID){
   e = e ? e : window.event; 
   var mouse_position = { 'x' : e.clientX, 'y' : e.clientY }; 
   if( typeof( window.pageYOffset ) == 'number' ) {
     scroll_position={'x':window.pageXOffset, 'y': window.pageYOffset}; 
   } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) { 
     scroll_position={'x':document.documentElement.scrollLeft, 'y': document.documentElement.scrollTop};
   } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) { 
     scroll_position={'x':document.body.scrollLeft, 'y': document.body.scrollTop};
   }    
$('context_menu').innerHTML=$('context_menu_prototype').innerHTML.replace(/\[ID\]/g,ID); 
   Menu.Select(ID);
   $('context_menu').style.left = mouse_position.x + scroll_position.x + 'px'; 
   $('context_menu').style.top = mouse_position.y + scroll_position.y + 'px'; 
   $('context_menu').show();
   return false;
}

Интересные статьи по этой теме:

RSS

Комментарии

  • Михаил написал №1 ~ 1535 дней назад в 03:06, Понедельник 26 Ноября 2007
    Привет! Вопрос по последнему абзацу.
    Делаем например body onclick='close_menu()'
    Тогда как сделать, чтобы меню не закрывалось при нажатии на само меню? Условие что onclick в body для меня важно (в моем случае)
  • Артём Курапов написал №2 ~ 1535 дней назад в 15:31, Понедельник 26 Ноября 2007
    Я думаю тут надо играть с z-index параметром. Правда я сталкивался с небольшими проблемами с календарём когда таких слоёв несколько и они должны себя вести определённым образом. IE и FF по разному интерпретировали События (events) в зависимости от их вложённости и z-index.
    p.s. обновил чуток статью