jQuery contextMenuライブラリで、コンテキストメニュを作っています。
http://swisnl.github.io/jQuery-contextMenu/index.html
コンテキストメニュの項目のラベルを切り替える方法、Disabledにする方法
下記のソースで実現できます。
Firefox46で確認しました。
参考サイト: https://swisnl.github.io/jQuery-contextMenu/demo/html5-polyfill-firefox8.html
test.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src="jquery1.11.3.min.js"></script>
<script src="jquery.contextMenu.min.js"></script>
<script src="jquery.ui.position.min.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" href="jquery.contextMenu.min.css">
</head>
<body>
<div id="contextMenuArea" style="width:100px;height:100px; border:solid 1px">コンテキストメニュ領域</div>
<button onclick="changeItemLabel();">項目を[resize]に変更</button>
<button onclick="disableItem();">項目をDisabledにする</button>
<!-- コンテキストメニュのテンプレート -->
<menu id="contextMenuTemplate" type="context" style="display:none;" >
<menuitem id="menuItem" label="rotate" ></menuitem>
</menu>
</body>
</html>
test.js
$(function(){
//初期化
createContextMenu();
});
/**
* コンテキストメニュの初期化
*/
function createContextMenu() {
$.contextMenu( 'destroy' );
$.contextMenu({
selector:"#contextMenuArea"
,items: $.contextMenu.fromMenu($("#contextMenuTemplate"))
});
}
/**
* コンテキストメニュのラベルを、リサイズに変更する。
*/
function changeItemLabel() {
var menuItem = document.getElementById("menuItem"); //コンテキストメニュの項目
menuItem.label = "resize";
createContextMenu();
}
/**
* コンテキストメニュの項目をDisabledにする。
*/
function disableItem() {
var menuItem = document.getElementById("menuItem"); //コンテキストメニュの項目
menuItem.disabled = true;
createContextMenu();
}
IE11でラベルが変更されない問題
IE11だと、ラベルが変更されませんでした。
IE11ではmenuitem要素が認識されていないことが、原因のようです。
デバッガで確認すると、HTMLUnknowElementと表示されました。
menuitem要素はFirefoxのみサポートされています。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/menuitem
ブラウザが認識していない要素だから、label「プロパティ」も認識できていないようです。
したがって、setAttributeメソッドで直接label「属性」の値を書き換える様、変更しました。
//menuItem.label = "resize";
menuItem.setAttribute("label", "resize");
IE11で項目がDisabledされた理由
上記の理屈だとDisabledされないはずですが、Disabledされました。
disabledプロパティは、認識しないHTML要素でも使えるプロパティなのでしょうか？
どなたか、理由をご存知でしたら教えてください。