jquery ContextMenu 라이브러리에서 항목을 전환하는 방법
7497 단어 jQueryJavaScript
http://swisnl.github.io/jQuery-contextMenu/index.html
문맥 인식 메뉴 항목의 탭을 전환하는 방법, 비활성화하는 방법
아래의 출처를 통해 실현할 수 있다.
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 속성은 모르는 HTML 요소에서도 사용할 수 있는 속성입니까?
이유를 아시는 분 있으면 말씀해 주세요.
Reference
이 문제에 관하여(jquery ContextMenu 라이브러리에서 항목을 전환하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yuji38kwmt/items/6f76e0e1109b54198f79
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!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>
$(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이 인식되지 않았기 때문
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 속성은 모르는 HTML 요소에서도 사용할 수 있는 속성입니까?
이유를 아시는 분 있으면 말씀해 주세요.
Reference
이 문제에 관하여(jquery ContextMenu 라이브러리에서 항목을 전환하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yuji38kwmt/items/6f76e0e1109b54198f79
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(jquery ContextMenu 라이브러리에서 항목을 전환하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yuji38kwmt/items/6f76e0e1109b54198f79텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
