Создание контекстного меню

внимательно читать это: How to add a custom right-click menu to a webpage?Создание контекстного меню

И поэтому у меня есть 2 HTML файлы и 1 JS скрипт. Я вообще не использую JQuery.

popup.html

<!DOCTYPE html> 
    <head> 
     <title id="title">Datajuggler</title> 
    </head> 
    <body> 
     <script src="popup.js"></script> 
    </body> 
</html>

popup.js

var xhr = new XMLHttpRequest(); 
xhr.open("GET", "contextmenu.html"); 
xhr.send(); 

document.addEventListener("contextmenu", function(e) { 
    // how do I draw the context menu here? 
    e.preventDefault(); 
});

contextmenu.html

<div id="menu"> 
    <ul> 
     <li><a href="http://www.google.com">Google</a></li> 
     <li><a href="http://www.youtube.com">Youtube</a></li> 
    </ul> 
</div>

Так что это очень просто. Я вытягиваю контекстное меню HTML от contextmenu.html, и я хочу, чтобы этот div отображался всякий раз, когда я щелкнул правой кнопкой мыши (eventmenu eventener). Но как мне показать этот div вместо контекстного меню по умолчанию?

Спасибо.

источник

2014-11-03 user3407764

Быстро реализованы и протестированы это:

popup.html:

<!DOCTYPE html> 
    <head> 
     <title id="title">Datajuggler</title> 
     <style> 
      html{ 
       height: 100%; 
      } 
      body { 
       min-height: 100%; 
       position: relative; 
      } 
      #menu{ 
       position: absolute; 
       border: 1px solid black; 
      } 
     </style> 
    </head> 
    <body> 
     <script src="popup.js"></script> 
    </body> 
</html>

Примечания:

если body пусто =>height: 0px (так ваше мероприятие нажмите победившие» t)
включают скрипт непосредственно перед </body> конец тега
позиции меню absolute

contextmenu.html:

<div id="menu" style="display: none"> 
    <ul> 
     <li><a href="http://www.google.com">Google</a></li> 
     <li><a href="http://www.youtube.com">Youtube</a></li> 
    </ul> 
</div>

Примечания:

скрыть мужчин и (установите display:none)

popup.js:

xhr.onreadystatechange = function(){ 
    if (xhr.readyState == 4 && xhr.status == 200){ 

     // append the menu to `body` 
     document.body.innerHTML += xhr.responseText; 

     var menu = document.getElementById('menu'); 

     // overwrite the right click event 
     document.addEventListener("contextmenu", function(e) {  
      e.preventDefault();   
      // show the menu   
      menu.style.display = 'block'; 
      // set the left and top position based on mouse event coordonates 
      menu.style.left = e.x + 'px'; 
      menu.style.top = e.y + 'px';   
     }); 

     // close the menu on document click 
     // TODO verify if the click is in the menu boundaries 
     document.addEventListener("click", function(e){ 
      menu.style.display = 'none'; 
     }); 
    } 
} 

// make xhr `async` request => third param `true` 
xhr.open("GET", "contextmenu.html", true); 
xhr.send();

Примечания:

открыт веб-браузер консоли (F12) => перейти к консоли яваскрипта и посмотреть, если есть любые ошибки
проверить заявку на http protocol (веб-сервер), иначе ваш xhr не будет работать из-за cross origin

источник

2014-11-03 20:25:25

Создание контекстного меню

ответ

Смежные вопросы