Хочу показать как создать свое яваскриптовое контекстное меню.
В этой чати я только опишу как отлавливать событие нажатия правой кнопки мыши.
Яваскрипт:
CODE
<script>
document.oncontextmenu=menu; // Это событие отлавливает нажатие правой кнопки мыши, а вернее сказать, вызов контекстного меню
document.onclick = function () { document.getElementById('menu').style.display = 'none' };
// это для того чтобы после простого щелчка левой кнопкой в любом месте - меню обратно пропадало
function menu(e)
{
var dv = document.getElementById('menu'); // объявляем меню для дальнейшего простого доступа
if (document.all) // если ИЕ
{
e=event;
dv.style.top = e.offsetY+'px';
dv.style.left = e.offsetX+'px';
//то ставим относительно верхнего элемента - коем является абсолютный див
// смотрите ниже
}
else // а если не ие (те мазила)
{
dv.style.top=e.pageY+'px';
dv.style.left=e.pageX+'px';
//то все просто - относительно страницы
}
dv.style.display='block'; // после установки стилей меню нужно показать
return false; //и говорим "fuck" для родного браузерского меню
}
</script>
Ок, теперь несколько важжных вещей для HTML:
1. Ну поняно что само меню, пока что он будет вот таки выглядеть:
CODE
<div id="menu" style=" background-color:#bbb;position:absolute; display:none; left:0px; top:0px; color:#FF0000"><b> menu </b>
</div>
разницы особой нет - туды всеравно подрубится нормальное меню, вот, но позднее ,)
2. Оччень важная вещь для ИЕ, дело в том что я например неочень убедился в существовании таких свойств как scrollTop (scrollHeigth) scrollLeft(scrollWidth)
глючно они как то работают, вот, поэтому стал искать - думать - искать - думать, на многих примерах. при появлении скролла, это меню в ИЕ просто "обсиралось" - простите за мой французкий.. Я нашел выход - правда в зависимости от нарезки и яваскриптового контента не всегда помогающий - но в большинстве случаев моно юзать, кроме того можно поладить и с другими скриптами, - скорей всего точно моно - если подумать
CODE
<div style="display:block; background-color:transparent; top:0; left:0; position:absolute; width:100%; height:100%;"></div>
Обязательно нужен этот див, - положить можно его куда хотите, главное ему зединдекс присвоить наивысший. (Это в данном примере)
Вот - и еще :
CODE
<body style="margin:0 0 0 0; height:100%">
<!-- || для CSS [body {margin:0 0 0 0; height:100%}] -->
Это тоже немаловажно - без этого предыдущий див просто - нерастянется, в мазиле он и так нерастянется, зато в ие без проблем.
можно набить контент, и тестить, вот , найти примеров моно много - но данный для скролла в ие работает ок, вот.
у кого квеншины, пишите, обсудим вместе
