Контекстное меню для Netscape Navigator и Internet Explorer
,
Почему-то на сайтах, посвященных программированию на JavaScript, традиционно считается, что создать контекстное меню для Netscape Navigator невозможно, так как Netscape по щелчку правой клавишей мыши создает собственное всплывающее меню. Попробуем развеять это заблуждение. Дело в том, что выпадающее меню в Netscape Navigator 7.1 и выше версии (ниже версии нет в наличии - если код корректно работает в версии Netscape ниже 7.1 - пожалуйста напишите мне), можно отключить с помощью знакомой инструкции:
<body oncontextmenu="return false;">
Но как же создать выпадающее меню, если в Netscape следующий код (работающий в Internet Explorer):
<body oncontextmenu="myfunction(); return false;">
не работает, то есть - функция вызывается, но в Nescape Navigator возникает выпадающее меню, поверх создаваемого в функции myfunction? Как же обойти это ограничение? Я нашел такое решение:
<body oncontextmenu="return myfunction()">
Как вы вполне можете догадаться, функция "myfunction()" в конце своего исполнения возвращает результат - return false, что с точки зрения Netscape Navigator считается корректным. Но только вот такой код не считается корректным у Internet Explorer. Что поделаешь, война браузеров! Придется воспользоваться таким интересным приемом, как условная трансляция (надеюсь, что подобрал словосочетание правильное, по аналогии с условной компиляцией в Си) браузера Internet Explorer. Дело в том, что Microsoft © позаботилась о создании специальных конструкций, которые для остальных браузеров выглядят как комментарий. С помощью этих конструкций можно создать достаточно сложные ветвления кода. Попробую создать ветвление кода на основе этих самых конструкций.
<script language="JavaScript" type="text/javascript"> <!--
/*@cc_on @if( true ) document.write( "<body oncontextmenu=\"myfunction(); return false;\">" ); @else*/ document.write( "<body oncontextmenu=\"return myfunction();\">" ); /*@end @cc_off @*/
//--> </script>
Разберу первую часть скрипта подробно. Вначале определяется тип браузера пользователя, эта часть нам не интересна - такие скрипты можно найти в Internet повсюду. Для начинающих лучше всего воспользоваться редактором с подсветкой синтаксиса. Итак, первая интересующая нас инструкция: "/*@cc_on" - это инструкция начала "условной трансляции". Обратить внимание стоит только на ее начало - "/*" - это обычный комментарий. Internet Explorer выше пятой версии разбирает даже комментарии, и ищет директивы "условной трансляции" (большой брат следит за тобой!). Теперь присмотримся к следующей строке. Тут есть, на первый взгляд, странная строка: "@if( true )" - условие, которое выполнится в любом случае! Необходимость этого условия не кажется очевидной, но на самом деле все очень просто. Если Internet Explorer прочтет эту инструкцию, он выполнит код, который предназначен только ему одному, а строку идущую после директивы "@else*/" пропустит. А теперь предположим, что условия "@if( true ) ... @else" нет - что получится? Internet Explorer выполнит сразу две инструкции - и мы получим в документе сразу два <body> с разными параметрами! Не очень приятная перспектива. Последняя инструкция @cc_off @*/ завершает "условную трансляцию". Таким образом, мы получили переносимый код, подходящий для браузеров на основе движка Internet Explorer (Avant, Maxthon, etc...) и движка Gecko (Netscape Navigator, Mozilla, Mozilla Firefox, Mozilla Firebird, etc...).
Наша задача создать не красивый, а понятный код, украсить его вы можете сами! Создаю примитивный лист стилей:
<style type="text/css"> <!-- .hidemenu { display: none; position: absolute; } .showmenu { display: block; position: absolute; } //--> </style>
Он отвечает только за отображение и сокрытие контекстного меню, что нам собственно и надо. Теперь надо определить координаты курсора в момент щелчка правой клавиши мыши по документу. Основная сложность заключается в том, что для Netscape Navigator возникает такая проблема, как обработчик события event.onmousedown. Он перекрывает обработчик, заданный в body (в общем-то вполне логично, поскольку event задается относительно окна, а не документа, как в body). И опять возникает ненавистное браузерное контекстное меню. Я решил эту проблему таким образом:
if( document.all ) {
} else if( document.getElementById ) { document.captureEvents( Event.MOUSEMOVE ); document.onmousemove = getCoord; }
Я стал отслеживать каждое передвижение мыши на экране и записывать координаты курсора в глобальные переменные:
var mouseX; var mouseY;
function getCoord( event ) { mouseX = event.pageX; mouseY = event.pageY; }
Теперь соберу саму функцию отображения меню:
function myfunction() { if( document.all ) { if( event.button == 2 event.button == 3 ) { if( !document.all.contextmenu ) return; var menu = document.all.contextmenu; menu.style.left = event.offsetX; menu.style.top = event.offsetY; menu.className = menuState ? "hidemenu" : "showmenu"; menuState = !menuState; } } else if ( document.getElementById ) { if( !document.getElementById( "contextmenu" ) ) return; var menu = document.getElementById( "contextmenu" ); menu.style.left = mouseX; menu.style.top = mouseY; menu.className = menuState ? "hidemenu" : "showmenu"; menuState = !menuState; return false; } }
Чтобы разобраться в Функции, не требуется особых навыков в JavaScript. Устанавливается положение меню на основе координат курсора с ветвлением на два браузера. Разница лишь в том, что Internet Explorer получает координаты из события event, а Netscape Navigator из глобальных переменных. Если вы правильно собрали скрипт - у вас должно получиться нечто подобное:
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=Windows-1251"> <title>Context menu</title> <style type="text/css"> <!-- .hidemenu { display: none; position: absolute; } .showmenu { display: block; position: absolute; } //--> </style>
<script language="JavaScript" type="text/javascript"> <!-- if( document.all ) { document.onmousedown = myfunction; } else if( document.getElementById ) { document.captureEvents( Event.MOUSEMOVE ); document.onmousemove = getCoord; }
var mouseX; var mouseY; var menuState = false;
function getCoord( event ) { mouseX = event.pageX; mouseY = event.pageY; }
function myfunction() { if( document.all ) { if( event.button == 2 event.button == 3 ) { if( !document.all.contextmenu ) return; var menu = document.all.contextmenu; menu.style.left = event.offsetX; menu.style.top = event.offsetY; menu.className = menuState ? "hidemenu" : "showmenu"; menuState = !menuState; } } else if ( document.getElementById ) { if( !document.getElementById( "contextmenu" ) ) return; var menu = document.getElementById( "contextmenu" ); menu.style.left = mouseX; menu.style.top = mouseY; menu.className = menuState ? "hidemenu" : "showmenu"; menuState = !menuState; return false; } }
//--> </script>
<script language="JavaScript" type="text/javascript"> <!-- /*@cc_on @if( true ) document.write( "<body oncontextmenu=\"myfunction(); return false;\">" ); @else*/ document.write( "<body oncontextmenu=\"return myfunction();\">" ); /*@end @cc_off @*/ //--> </script>
<div id="contextmenu" class="hidemenu" style="background-color: Yellow;"> <span><a href="javascript: void( 0 )">Первый пункт меню</a></span><br> <span><a href="javascript: void( 0 )">Второй пункт меню</a></span><br> <span><a href="javascript: void( 0 )">Третий пункт меню</a></span> </div>
</body> </html>
Для тех же, кто желает "погорячее", привожу код, полностью основанный на "условной трансляции" Microsoft ©. Изложенного выше материала вполне достаточно, чтобы разобраться в нем самому.
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=Windows-1251"> <title>Context menu</title> <style type="text/css"> <!-- .hidemenu { display: none; position: absolute; } .showmenu { display: block; position: absolute; } //--> </style>
