Doge log

Abby CTO 雑賀 力王のオフィシャルサイトです

コンテキストメニュー

技術

どっかに「LDRが右クリックメニューでない」とか「あるといいなあ」的な事が書いてあったのでメニューを出すサンプルスクリプトを書いてみた。
確かにAjaxでデスクトップに近い操作性を得たいのであればそれも悪くないのかなと。
思ったよか簡単です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript" type="text/javascript" src="../js/kumu/kumu.js"></script>
<script language="JavaScript" type="text/javascript" src="../js/kumu/event.js"></script>
<script>

function showContextMenu(evt){
  hideContextMenu();
  evt = (evt) ? evt : ((event) ? event : null);
  if(evt){
    var elem = (evt.target) ? evt.target : evt.srcElement;
    if(elem.nodeType == 3){
      elem = elem.parentNode;
    }
      var menu = $i('test');
      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.position = 'absolute';
      menu.style.left = left+'px';
      menu.style.top = top+'px';
      menu.style.visibility = 'visible';
      if(evt.preventDefault){
        evt.preventDefault();
      }
      evt.retuenValue = false;
  }
  
}

function hideContextMenu(){
  if(document.releaseCapture){
    document.releaseCapture();
  }
  var menu = $i('test');
  menu.style.visibility = 'hidden';  
}

function mouseover_menu1(evt){
    var elem = (evt.target) ? evt.target : evt.srcElement;
    if(elem.nodeType == 3){
      elem = elem.parentNode;
    }
    elem.className = 'on';  
}

function mouseout_menu1(evt){
    var elem = (evt.target) ? evt.target : evt.srcElement;
    if(elem.nodeType == 3){
      elem = elem.parentNode;
    }
    elem.className = 'off';  
}

function initContext(){
  Kumu.Event.addEvent(window, 'contextmenu', showContextMenu.bindScope(this));
  Kumu.Event.addEvent(window, 'click', hideContextMenu);
  mouseover_menu1.registEvent(this);
  mouseout_menu1.registEvent(this);
  mouseover_menu1.__name = 'mouseover_menu2';
  mouseout_menu1.__name = 'mouseout_menu2';
  mouseover_menu1.registEvent(this);
  mouseout_menu1.registEvent(this);
  mouseover_menu1.__name = 'mouseover_menu3';
  mouseout_menu1.__name = 'mouseout_menu3';
  mouseover_menu1.registEvent(this);
  mouseout_menu1.registEvent(this);
  
}


</script>
<style type="text/css">
.menu {
  width:200px;
  border-style: solid;
  border-width: 1px;
  background-color: #f5f5f5;
  visibility: hidden;
}
.on {
  background-color: #ffb;
}
.off{
  background-color: #f5f5f5;
}

</style>
<title></title>
</head>
<body onload="initContext();">

<table id='test' class="menu">
  <tr><td id="menu1">ほげほげメニュー1</td></tr>
  <tr><td id="menu2">ほげほげメニュー2</td></tr>
  <tr><td id="menu3">ほげほげメニュー3</td></tr>
</table>
</body>
</html>

IEで動かすときはちょっとだけ変えればいいだけ。
多分LDRは意図的にコンテキストメニューを使っていないだけだと思われる。
実際コンテキストメニューを使ってるケースって少ないと思うんだよね。
ブラウザ本来の右クリックでのコンテキストメニューも使いたいし。
なので使う場合は

がベストなのかなと。
コンテキストメニューあってもいいよねってパターンはもうちょっとすれば出てくる可能性高いかも。

うくく。