Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Вызов меню при правом клике

Автор: sugee 12.6.2005, 20:52

Привет всем!
Бьюсь над этой проблемой уже два дня: на странице расположено несколько таблиц. Нужно чтобы при правом клике мышью
на таблице выскакивало меню. Нашел скрипт где меню появляется
при правом клике в любой точке экрана что нужно сделать чтобы оно появлялось именно при щелчке по таблице?

Код

Код


 <html>
<head>
<style>
.skin0{

position:absolute;

width:200px;

border:2px solid black;

background-color:menu;

font-family:Verdana;

line-height:20px;

cursor:default;

visibility:hidden;

}

.skin1{

cursor: default;

font: menutext;

position: absolute;

width: 165px;

background-color: menu;

border: 1 solid buttonface;

visibility:hidden;

border: 2 outset buttonhighlight;

}

.menuitems{

padding-left:15px;

padding-right:10px;

}

-->

</style>

<script language="JavaScript1.2">

//set the skin of the menu (0 or 1, with 1 rendering a default Windows menu like skin)

var menuskin=1

//set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar

var display_url=0

 

function showmenuie5(){

//Find out how close the mouse is to the corner of the window

var rightedge=document.body.clientWidth-event.clientX

var bottomedge=document.body.clientHeight-event.clientY

//if the horizontal distance isn't enough to accomodate the width of the context menu

if (rightedge<ie5menu.offsetWidth)

//move the horizontal position of the menu to the left by it's width

ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth

else

//position the horizontal position of the menu where the mouse was clicked

ie5menu.style.left=document.body.scrollLeft+event.clientX

//same concept with the vertical position

if (bottomedge<ie5menu.offsetHeight)

ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight

else

ie5menu.style.top=document.body.scrollTop+event.clientY

ie5menu.style.visibility="visible"

return false

}

function hidemenuie5(){

ie5menu.style.visibility="hidden"

}

function highlightie5(){

if (event.srcElement.className=="menuitems"){

event.srcElement.style.backgroundColor="highlight"

event.srcElement.style.color="white"

if (display_url==1)

window.status=event.srcElement.url

}

}

function lowlightie5(){

if (event.srcElement.className=="menuitems"){

event.srcElement.style.backgroundColor=""

event.srcElement.style.color="black"

window.status=''

}

}

function jumptoie5(){

if (event.srcElement.className=="menuitems"){

if (event.srcElement.getAttribute("target")!=null)

window.open(event.srcElement.url,event.srcElement.getAttribute("target"))

else

window.location=event.srcElement.url

}

}

</script>


</head>
<body>
<!--[if IE]>

<div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5()">
<div class="menuitems" url="http://www.informer.ru">
    Главная</div>
  <div class="menuitems" url="http://nov52.narod.ru/index.htm">
    Скрипты</div>
  <div class="menuitems" url="http://nov52.narod.ru/index.htm">
    Бесплатное в сети</div>
  <hr>
  <div class="menuitems" url="mailto:nov5252@narod.ru">
    Пишите письма</div>

</div>

<![endif]-->

<script language="JavaScript1.2">

if (document.all&&window.print){

if (menuskin==0)

ie5menu.className="skin0"

else

ie5menu.className="skin1"

document.oncontextmenu=showmenuie5

document.body.onclick=hidemenuie5

}

</script>

</body>
</html>

Или может кто кинет ссылочку на готовый скрипт по теме!?

Автор: sugee 12.6.2005, 22:31

Нет я не говорю что кто-то дорлжен ковыряться в этом скрипте
Но может кто-нибудь сталкивался с такой проблемой?
При щелчке на таблице(допустим внутри тега div) правой кнопкой мыши
выскакивает менюшка - всего то и делов... Очень нужно!!!

Автор: Ciber SLasH 12.6.2005, 22:58

Ну так и переделывай свой скрипт, только событие onContextMenu к таблице прикрути:

Код


<table cellspacing=5 cellpadding=5 align=center bgcolor=lime border=1 onContextMenu="alert('Хорошь давить на правый батон крысы !!')">
<tr><td>111111111111111111111<td>222222222222222222222222
<tr><td>333333333333333333333<td>444444444444444444444444
</table>

Добавлено @ 23:02
Вот побыстрому навоял:

Код


<html>
<head>
<style>
.skin0{
    position: absolute;
    width: 200px;
    border: 2px solid black;
    background-color: menu;
    font-family: Verdana;
    line-height: 20px;
    cursor: default;
    visibility: hidden;
}
.skin1{
    cursor: default;
    font: menutext;
    position: absolute;
    width: 165px;
    background-color: menu;
    border: 1 solid buttonface;
    visibility: hidden;
    border: 2 outset buttonhighlight;
}
.menuitems{
    padding-left: 15px;
    padding-right: 10px;
}
</style>
<script language="JavaScript">
//set the skin of the menu (0 or 1, with 1 rendering a default Windows menu like skin)
var menuskin=1
//set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar
var display_url=0

function showmenuie5() {
//Find out how close the mouse is to the corner of the window
var rightedge = document.body.clientWidth - event.clientX
var bottomedge = document.body.clientHeight - event.clientY

  //if the horizontal distance isn't enough to accomodate the width of the context menu
  if (rightedge < ie5menu.offsetWidth)
    //move the horizontal position of the menu to the left by it's width
    ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth
  else
    //position the horizontal position of the menu where the mouse was clicked
    ie5menu.style.left = document.body.scrollLeft + event.clientX
  //same concept with the vertical position
  if (bottomedge < ie5menu.offsetHeight)
    ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight
  else
    ie5menu.style.top = document.body.scrollTop + event.clientY
  ie5menu.style.visibility = "visible"
return false
}

function hidemenuie5() {
  ie5menu.style.visibility = "hidden"
}

function highlightie5() {
  if (event.srcElement.className == "menuitems") {
    event.srcElement.style.backgroundColor = "highlight"
    event.srcElement.style.color = "white"
    if (display_url == 1)
      window.status = event.srcElement.url
  }
}

function lowlightie5() {
  if (event.srcElement.className == "menuitems") {
    event.srcElement.style.backgroundColor = ""
    event.srcElement.style.color = "black"
    window.status = ''
  }
}

function jumptoie5() {
  if (event.srcElement.className == "menuitems") {
    if (event.srcElement.getAttribute("target") != null)
      window.open(event.srcElement.url, event.srcElement.getAttribute("target"))
    else
      window.location = event.srcElement.url
  }
}
</script>
</head>

<body>
<!--[if IE]>
<div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5()">
  <div class="menuitems" url="http://www.informer.ru">Главная</div>
  <div class="menuitems" url="http://nov52.narod.ru/index.htm">Скрипты</div>
  <div class="menuitems" url="http://nov52.narod.ru/index.htm">Бесплатное в сети</div>
  <hr>
  <div class="menuitems" url="mailto:nov5252@narod.ru">Пишите письма</div>
</div>
<![endif]-->
<table id=tab cellspacing=5 cellpadding=5 align=center bgcolor=lime border=1>
<tr><td>111111111111111111111<td>222222222222222222222222
<tr><td>333333333333333333333<td>444444444444444444444444
</table>
<script language="JavaScript">
if (document.all && window.print) {
  if (menuskin == 0)
    ie5menu.className = "skin0"
  else
    ie5menu.className = "skin1"
  document.getElementById('tab').oncontextmenu = showmenuie5
  document.body.onclick = hidemenuie5
}
</script>
</body>
</html>

Автор: sugee 13.6.2005, 02:08

Вот спасибо! А я тут с горя чуть свой вариант не написал
Только у меня меню вызывается наведением мыши а мне нужно именно правой кнопкой. В принципе если подумать то тут тоже можно сделать так чтобы при наведении мыши на таблицу вызываллась функция-обработчик правой кнопки, но чето я не смог

Код


<html><head>
<style type="text/css">
.menu{position:absolute; font:12px arial; background-color:yellow;visibility:hidden}
.tbl{position:absolute; top:100px; left:100px}
</style>

<script>
ismBrowser=(document.getElementById)?true:false;

function openmenu(Elem,nextPosition) {
menuObj=(ismBrowser)?document.getElementById(Elem).style:eval("document."+Elem);
  if(openmenu.arguments.length==1) {
 nextPosition=(parseInt(menuObj.top)==-90);
  }
menuObj.top=(ismBrowser)?nextPosition+"px":nextPosition;
menuObj.visibility="visible";
}

function closemenu(Elem,nextPosition) {
menuObj.top=(ismBrowser)?nextPosition+"px":nextPosition;
menuObj.visibility="hidden";
}
</script>

</head>
<body>
<span class="tbl" onmouseover="openmenu('lnkMenu', -5)" onmouseout="closemenu('lnkMenu',-90)">
<table width=100 height=50 bgcolor="blue">
<tr><td>&nbsp</td></tr>
</table>
<div id="lnkMenu"  class="menu">
<a href="javascript:window.open()">open</a><br>
<a href="javascript:window.open()">open</a><br>
<a href="javascript:window.open()">open</a><br>
<a href="javascript:window.open()">open</a><br>
</div>
</span>
</body></html>

Автор: Ciber SLasH 13.6.2005, 02:16

Вместо:

Цитата

onmouseover="openmenu('lnkMenu', -5)" onmouseout="closemenu('lnkMenu',-90)"

пиши:

Цитата

onContextMenu="openmenu(<твои параметры>)"

Я ведь писал:

Цитата(Ciber @ 12.6.2005, 23:58)

только событие onContextMenu к таблице прикрути

Ты видно читаешь по диагонали. Внимательней будь.