VPF::контекстное меню - Форум программистов

Irokez

Дата 24.2.2005, 23:11 (ссылка)

(нет голосов)

Загрузка ...

индеец

Профиль
Группа: Участник Клуба
Сообщений: 1180
Регистрация: 20.10.2004

Репутация: 1
Всего: 53

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

Код


<script language="JavaScript">
function test(ev)
{
    if(!window.event)
        alert(ev.button);
    else alert(window.event.button);
}
</script>
<input type="button" value="Click me" id="btn" oncontextmenu="return false">
<script language="JavaScript">
document.getElementById('btn').onmousedown=test;
</script>

Это работает в ФФ, ИЕ, Нетскейпе, а вот в Опере нет =( при нажатии правой кнопкой на кнопку ничего не происходит, как это исправить?

И второй вопрос: на какое событие сделать скрытие контекстного меню? document.onClick?

--------------------

Irokez CM - открытая система управления сайтами

korob2001

Дата 24.2.2005, 23:31 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Комодератор
Сообщений: 2871
Регистрация: 29.12.2002

Репутация: нет
Всего: 61

Цитата

И второй вопрос: на какое событие сделать скрытие контекстного меню? document.onClick?

Точно не помню, но помоему скрыть его можно так:

Код


<html>
</head>
 <title>Стоп контекст-меню</title>
   <script language="JavaScript" type="text/javascript">
      function stop_menu() {
          event.returnValue = false;
      }
   </script>
</head>
<body onContextmenu="stop_menu()">
........
</body>
</html>

--------------------

"Время проходит", - привыкли говорить вы по неверному пониманию.
"Время стоит - проходите вы".

Irokez

Дата 24.2.2005, 23:36 (ссылка)

(нет голосов)

Загрузка ...

индеец

Профиль
Группа: Участник Клуба
Сообщений: 1180
Регистрация: 20.10.2004

Репутация: 1
Всего: 53

korob2001 спб, только я имел в виду скрытие моего контекстного меню, оно же должно исчезать при клике мышки по пустому пространству?

--------------------

Irokez CM - открытая система управления сайтами

Aliance

Дата 25.2.2005, 00:27 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Цитата(Irokez @ 24.2.2005, 23:11)

а вот в Опере нет =( при нажатии правой кнопкой на кнопку ничего не происходит, как это исправить?

http://forum.vingrad.ru/index.php?showtopic=32350

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Irokez

Дата 25.2.2005, 18:53 (ссылка)

(нет голосов)

Загрузка ...

индеец

Профиль
Группа: Участник Клуба
Сообщений: 1180
Регистрация: 20.10.2004

Репутация: 1
Всего: 53

спасибо за ссылку, прочитал статью, написано хорошо, только проблема не решилась
взял скрипт:

Код


// Работает в IE5/Win и NN6
function blockEvents(evt) {
    evt = (evt) ? evt : event;
    var blockit = false;
    var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
    if (elem && elem.tagName && elem.tagName.toLowerCase() == "img") {
        if (evt.cancelBubble) {
            evt.cancelBubble = true;
        }
        alert("Нельзя.");
        return false;
    }
}
document.oncontextmenu = blockEvents;

// Ее вариант, пересмотренный с учетом специикаций IE
function blockEvents() {
    var blockit = false;
    var elem = event.srcElement;
    if (elem && elem.tagName && elem.tagName.toLowerCase() == "img") {
        event.cancelBubble = true;
        event.returnValue = false;
        alert("Нельзя.");
    }
}

// А это чисто W3C DOM`вский синтаксис
function blockEvents(evt) {
    var blockit = false;
    var elem = (evt.target);
    if (elem && elem.tagName && elem.tagName.toLowerCase() == "img") {
        evt.preventDefault();
        evt.stopPropagation();
        alert("Нельзя.");
    }
}

опять таки в опере не работает, при нажатии правой кнопкой ничего не происходит, просто открывается контекстное меню мыши

--------------------

Irokez CM - открытая система управления сайтами

Aliance

Дата 25.2.2005, 19:20 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Цитата

написано хорошо

Спасибо

Не то смотришь, метод button тебе нужен :-)
Ставишь так:

Код


...
var right_button = false;
if (evt.button && evt.button == 2) {
 right_button = true;
}
...
if (right_button) {
  // тут твой код...
}
...

Добавлено @ 19:29

Вот скрипт:

Код


var cMenu = new Object();
cMenu["lookup1"] = {menuID:"contextMenu1", hrefs:["http://aliance.hoha.ru","http://aliance.hoha.ru"]};
cMenu["lookup2"] = {menuID:"contextMenu2", hrefs:["http://aliance.hoha.ru","http://aliance.hoha.ru","http://aliance.hoha.ru","http://aliance.hoha.ru","http://aliance.hoha.ru"]};

function showContextMenu(evt) {
    hideContextMenus();
    evt = (evt) ? evt : ((event) ? event : null);
    if (evt) {
        var elem = (evt.target) ? evt.target : evt.srcElement;
         if (elem.nodeType == 3) {
            elem = elem.parentNode;
        }
        if (elem.className == "contextEntry") {
            var menu = document.getElementById(cMenu[elem.id].menuID);
            if (menu.setCapture) {
                menu.setCapture();
            }
            var left, top;
            if (evt.pageX) {
                left = evt.pageX;
                top = evt.pageY;
            } else if (evt.offsetX || evt.offsetY) {
                left = evt.offsetX;
                top = evt.offsetY;
            } else if (evt.clientX) {
                left = evt.clientX;
                top = evt.clientY;
            }
            menu.style.left = left + "px";
            menu.style.top = top + "px";
            menu.style.visibility = "visible";
            if (evt.preventDefault) {
                evt.preventDefault();
            }
            evt.returnValue = false;
        }
    }
}

function getHref(tdElem) {
    var div = tdElem.parentNode.parentNode.parentNode.parentNode;
    var index = tdElem.parentNode.rowIndex;
    for (var i in cMenu) {
        if (cMenu[i].menuID == div.id) {
            return cMenu[i].hrefs[index];    
        }
    }
    return "";
}

function execMenu(evt) {
    evt = (evt) ? evt : ((event) ? event : null);
    if (evt) {
        var elem = (evt.target) ? evt.target : evt.srcElement;
        if (elem.nodeType == 3) {
            elem = elem.parentNode;
        }
        if (elem.className == "menuItemOn") {
            location.href = getHref(elem);
        }
        hideContextMenus();
    }
}

function hideContextMenus() {
    if (document.releaseCapture) {
        document.releaseCapture();
    }
    for (var i in cMenu) {
        var div = document.getElementById(cMenu[i].menuID)
        div.style.visibility = "hidden";
    }
}

function toggleHighlight(evt) {
    evt = (evt) ? evt : ((event) ? event : null);
    if (evt) {
        var elem = (evt.target) ? evt.target : evt.srcElement;
        if (elem.nodeType == 3) {
            elem = elem.parentNode;
        }
        if (elem.className.indexOf("menuItem") != -1) {
            elem.className = (evt.type == "mouseover") ? "menuItemOn" : "menuItem";
        }
    }
}

function setContextTitles() {
    var cMenuReady = (document.body.addEventListener || typeof document.oncontextmenu != "undefined")
    var spans = document.body.getElementsByTagName("span");
    for (var i = 0; i < spans.length; i++) {
        if (spans[i].className == "contextEntry") {
            if (cMenuReady) {
                var menuAction = (navigator.userAgent.indexOf("Mac") != -1) ? "Нажмите и удерживайте" : "Кликните правой кнопкой мыши";
                spans[i].title = menuAction + "просмотр"
            } else {
                spans[i].title = "доступно только с другими браузерами (IE5+/Windows, Netscape 6+)."
                spans[i].style.cursor = "default";
            }
        }
    }
}

function initContextMenus() {
    if (document.body.addEventListener) {
        document.body.addEventListener("contextmenu", showContextMenu, true);
        document.body.addEventListener("click", hideContextMenus, true);
    } else {
        document.body.oncontextmenu = showContextMenu;
    }
    setContextTitles();
}

...

Затем:

Код


...
<body onload="initContextMenus()">

<p>
<span id="lookup1" class="contextEntry">aliance.hoha.ru</span>
<span id="lookup2" class="contextEntry">aliance.hoha.ru</span>
</p>

<div id="contextMenu1" class="contextMenus" onclick="hideContextMenus()" onmouseup="execMenu(event)" onmouseover="toggleHighlight(event)" onmouseout="toggleHighlight(event)">
<table><tbody>
<tr><td class="menuItem">http://aliance.hoha.ru</td></tr>
<tr><td class="menuItem">http://aliance.hoha.ru</td></tr>
</tbody></table>
</div>

<div id="contextMenu2" class="contextMenus" onclick="hideContextMenus()" onmouseup="execMenu(event)" onmouseover="toggleHighlight(event)" onmouseout="toggleHighlight(event)">
<table><tbody>
<tr><td class="menuItem">http://aliance.hoha.ru</td></tr>
<tr><td class="menuItem">http://aliance.hoha.ru</td></tr>
<tr><td class="menuItem">http://aliance.hoha.ru</td></tr>
<tr><td class="menuItem">http://aliance.hoha.ru</td></tr>
<tr><td class="menuItem">http://aliance.hoha.ru</td></tr>
</tbody></table>
</div>

</body>
</html>

Это сообщение отредактировал(а) Aliance - 25.2.2005, 19:30

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Irokez

Дата 25.2.2005, 21:17 (ссылка)

(нет голосов)

Загрузка ...

индеец

Профиль
Группа: Участник Клуба
Сообщений: 1180
Регистрация: 20.10.2004

Репутация: 1
Всего: 53

спасибо, буду разбираться!

--------------------

Irokez CM - открытая система управления сайтами

americanets

Дата 17.1.2007, 17:40 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1100
Регистрация: 27.9.2006

Репутация: нет
Всего: 12

Irokez,

взял код из Irokez CMS но получилось не совсем то, ссылки не работают

обвел таблицу в

Код


<FORM oncontextmenu="return false" name=form_content action=?list method=post>
<INPUT id=ctmenu_showed type=hidden value=0>

сделал элемент

Код


<INPUT  type=hidden name=check_$page>

Код


<tr id=tr_$page> 
  <td rowspan=\"2\" bgcolor=\"#DBE0E4\" onmousedown=\"hideContextMenu(); showContextMenu('$page', event)\">

сделал меню
<UL class=menu-builder-dropdown id=contextmenu_$page>

вставил скрипт

Код


<script language=JavaScript type=text/javascript>
function markRow(id)
{
    if(e=document.getElementById('tr_'+id))
        if(chb=document.getElementsByName('check_'+id))
            if(chb[0].checked) e.className='highlight';
            else e.className='';
}

function ShowLocate(id, ev)
{
    if(e=document.getElementById(id))
    {
        if (e.style.visibility != 'visible') {
            e.style.visibility = 'visible';
        }
        if (e.style.display != 'block') {
            e.style.display = 'block';
        }
     var pos = getCursorPosition(ev);
     var posX = pos.x;
     var posY = pos.y

        if (posX + e.offsetWidth >= window.screen.width) {
            e.style.left = (posX - e.offsetWidth) + 'px';
        } else {
            e.style.left = posX + 'px';
        }

        if (posY >= window.screen.height) {
            e.style.top = (posY - e.offsetHeight) + 'px';
        } else {
            e.style.top = posY + 'px';
        }
    }
}

function Hide(id)
{
    if(e=document.getElementById(id))
        e.style.visibility='hidden';
}



function showContextMenu(id, ev)
{
    btn=(window.event ? window.event.button : ev.button);
    if (btn == 2) {
        if (e = document.getElementById('contextmenu_'+id)) {
            if(e.style.visibility!='visible') e.style.visibility='visible';
            if(e.style.display!='block') e.style.display='block';

         var pos = getCursorPosition(ev);
         var posX = pos.x;
         var posY = pos.y

            if (posX + e.offsetWidth >= window.screen.width) {
                e.style.left = (posX - e.offsetWidth) + 'px';
            } else {
                e.style.left = posX + 'px';
            }

            if (posY >= window.screen.height) {
                e.style.top = (posY - e.offsetHeight) + 'px';
            } else {
                e.style.top = posY + 'px';
            }
            document.getElementById('ctmenu_showed').value=id;
            document.getElementById('tr_'+id).className='chosen';
        }
    }
}

function hideContextMenu()
{
    e=document.getElementById('ctmenu_showed');
    id=e.value;
    if(id>0)
    {
        Hide('contextmenu_'+id);
        markRow(id);
        e.value='0';
    }
}


function Edit(e)
{
    name=e.name;
    if(!name || name=='undefined') name=e.id;
    e_value=document.getElementsByName(name+'_value');
    id=e_value[0].value;
    window.location='edit.php?p='+id;
}


//function setContextMenu()
{
    body=document.getElementsByTagName('BODY');
    body[0].onclick=hideContextMenu;
}</SCRIPT>

  меню вызывается все Ок думал

  сделал ссылки <a href=del_page.php?id=$page onClick=\"NewWindow(this.href,'pop_up','300','200','no');return false\">Удалить</a>

  <a href=\"index.php?parents=$page\"> страница</a>


  но ничего не работает , всмысле из сылок, только меню закрывается, как сделать их рабочими не подскажете

Это сообщение отредактировал(а) americanets - 17.1.2007, 18:10

--------------------

Пусть популярную музыку слушают те, среди кого она популярна

Irokez

Дата 17.1.2007, 20:23 (ссылка)

(нет голосов)

Загрузка ...

индеец

Профиль
Группа: Участник Клуба
Сообщений: 1180
Регистрация: 20.10.2004

Репутация: 1
Всего: 53

Цитата(americanets @ 17.1.2007, 17:40)

Irokez,

взял код из Irokez CMS но получилось не совсем то, ссылки не работают

обвел таблицу в

Код


<FORM oncontextmenu="return false" name=form_content action=?list method=post>
<INPUT id=ctmenu_showed type=hidden value=0>

сделал элемент

Код


<INPUT  type=hidden name=check_$page>

Код


<tr id=tr_$page> 
  <td rowspan=\"2\" bgcolor=\"#DBE0E4\" onmousedown=\"hideContextMenu(); showContextMenu('$page', event)\">

сделал меню
<UL class=menu-builder-dropdown id=contextmenu_$page>

вставил скрипт

Код


<script language=JavaScript type=text/javascript>
function markRow(id)
{
    if(e=document.getElementById('tr_'+id))
        if(chb=document.getElementsByName('check_'+id))
            if(chb[0].checked) e.className='highlight';
            else e.className='';
}

function ShowLocate(id, ev)
{
    if(e=document.getElementById(id))
    {
        if (e.style.visibility != 'visible') {
            e.style.visibility = 'visible';
        }
        if (e.style.display != 'block') {
            e.style.display = 'block';
        }
     var pos = getCursorPosition(ev);
     var posX = pos.x;
     var posY = pos.y

        if (posX + e.offsetWidth >= window.screen.width) {
            e.style.left = (posX - e.offsetWidth) + 'px';
        } else {
            e.style.left = posX + 'px';
        }

        if (posY >= window.screen.height) {
            e.style.top = (posY - e.offsetHeight) + 'px';
        } else {
            e.style.top = posY + 'px';
        }
    }
}

function Hide(id)
{
    if(e=document.getElementById(id))
        e.style.visibility='hidden';
}



function showContextMenu(id, ev)
{
    btn=(window.event ? window.event.button : ev.button);
    if (btn == 2) {
        if (e = document.getElementById('contextmenu_'+id)) {
            if(e.style.visibility!='visible') e.style.visibility='visible';
            if(e.style.display!='block') e.style.display='block';

         var pos = getCursorPosition(ev);
         var posX = pos.x;
         var posY = pos.y

            if (posX + e.offsetWidth >= window.screen.width) {
                e.style.left = (posX - e.offsetWidth) + 'px';
            } else {
                e.style.left = posX + 'px';
            }

            if (posY >= window.screen.height) {
                e.style.top = (posY - e.offsetHeight) + 'px';
            } else {
                e.style.top = posY + 'px';
            }
            document.getElementById('ctmenu_showed').value=id;
            document.getElementById('tr_'+id).className='chosen';
        }
    }
}

function hideContextMenu()
{
    e=document.getElementById('ctmenu_showed');
    id=e.value;
    if(id>0)
    {
        Hide('contextmenu_'+id);
        markRow(id);
        e.value='0';
    }
}


function Edit(e)
{
    name=e.name;
    if(!name || name=='undefined') name=e.id;
    e_value=document.getElementsByName(name+'_value');
    id=e_value[0].value;
    window.location='edit.php?p='+id;
}


//function setContextMenu()
{
    body=document.getElementsByTagName('BODY');
    body[0].onclick=hideContextMenu;
}</SCRIPT>

по-моему со ссылками все в порядке.. никакие ошибки попутно не возникают?

--------------------

Irokez CM - открытая система управления сайтами

americanets

Дата 17.1.2007, 20:36 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1100
Регистрация: 27.9.2006

Репутация: нет
Всего: 12

попутно ошибок нет, просто меню закрывается и все, а перехода по ссылкам не получается smile

Добавлено @ 20:40
может есть исходный вариант, чтоб по нему посмотреть, станичка HTML и java script код smile

Добавлено @ 20:41
а то страницу просто сохранил и там смотрел, может что не так сохранилось

--------------------

Пусть популярную музыку слушают те, среди кого она популярна

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »