Java



Контекстное меню для Netscape Navigator и Internet Explorer - часть 5


<script language="JavaScript" type="text/javascript"> <!-- var menuState = false;

/*@cc_on @if( true ) document.onmousedown = myfunction; @else*/ var mouseX; var mouseY;

if( document.getElementById ) { document.captureEvents( Event.MOUSEMOVE ); document.onmousemove = getCoord; }

function getCoord( event ) { mouseX = event.pageX; mouseY = event.pageY; } /*@end @cc_off @*/

function myfunction() { /*@cc_on @if( true ) 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( "contextmenu" ) ) return; var menu = document.getElementById( "contextmenu" ); menu.style.left = mouseX; menu.style.top = mouseY; menu.className = menuState ? "hidemenu" : "showmenu"; menuState = !menuState; return false; /*@end @cc_off @*/ }

//--> </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>

С точки зрения производительности такой код лучше, поскольку браузерам, на основе движка Gecko, не требуется проверять дополнительные условия.

И в завершение этой статьи хочу привести пример создания контекстного меню с помощью технологий, встроенных в Internet Explorer. По сути создается дочернее немодальное окно на основе полученного кода. Этот код не может использовать внешние таблицы стилей (даже встроенные в документ!), поэтому вводить данные о стиле придется контекстно к элементу.




Содержание  Назад  Вперед