18
jqueryを使用しているページで右クリックイベントを無効にしました。右クリックメニューをカスタマイズしたいと思っています。これどうやってするの？これを有効にするには関連するCSS設定が必要ですか（つまり「位置」）？jquery/javascriptを使用して独自の右クリックメニューを作成し、デフォルトを無効にする方法
A
答えて
11
様々なjQueryのコンテキストメニュープラグインが使用する準備ができて、そこにあります。
+0
コンテキストメニューのプラグインに新しい機能（デフォルトのコピー、編集、貼り付けなどを除く）を追加できますか？ – kratz
3
それは安っぽいですが、この例では、動作します。 contextmenuハンドラでできることは、画面上の特定の場所にDIVを表示して、あなたが選択した項目を表示することです。私が知る限り、要素を右クリックすると表示されるコンテキストメニュー内の項目をカスタマイズする方法はありません。
<html>
<head>
<title>Context menu test</title>
<style type="text/css">
.element {
background-color: blue;
height: 300px;
width: 300px;
}
.popup {
background-color: red;
border: 1px solid black;
width: 100px;
height: 100px;
position: absolute;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".element").contextmenu
(
function(e) {
$("div.popup").remove();
$("<div class='popup'>Hi</div>").appendTo("body")
.css("left", e.pageX)
.css("top", e.pageY)
.show();
e.preventDefault(); // return false; also works
}
);
}
);
$.fn.contextmenu = function(func) {
return this.bind("contextmenu", func);
}
</script>
</head>
<body>
<div class="element"></div>
</body>
</html>
1
このプラグインもあります：Audero Context Menuです。それは無料で非常に使いやすいです。
これをオフにするオプションをユーザに与えない限り、これをしないことをお勧めします。迷惑で、「ウェブ」のやり方を壊します。たとえば、ユーザーがウェブサイトから画像を保存したい場合、簡単に行うことはできません（彼らはまだそれを行うことができます。単にフープを通過する必要があります）。 – Chii
イントラネット上のグループのアプリケーションに使用しているので問題ありません。 – kratz