0

jquery contextmenu プラグインを使用しており、多くのエントリにカスタム クラスを追加しようとしています。

次のようにタブにエントリをプッシュします。

var tab=[];
classCss="myCustomClass";

tab.push({  title: "Menu entry 1",
            action: function(event, ui){
                reedIt(ui.cmd);
            },
            cmd: myId,
            addClass: classCss
        });

$("#myContener").contextmenu("replaceMenu", tab);

うまく機能しますが、addClassオプションではありません。

<li>このメニューの生成項目は次のとおりです。

<li class="ui-menu-item" role="presentation" data-command="2150" jquery111005997....="476">

myCustomClassアイテムには追加されません。

私の構文などに何か問題がありますか?

4

1 に答える 1

0

ここでうまくいくようです：

var CLIPBOARD = "";
$(function(){
 	$(document).contextmenu({
		delegate: ".hasmenu",
		autoFocus: true,
		preventContextMenuForPopup: true,
		preventSelect: true,
		taphold: true,
		menu: [
			{title: "Initial Menu", cmd: "cut", uiIcon: "ui-icon-scissors"}
			],
		// Handle menu selection to implement a fake-clipboard
		select: function(event, ui) {
			var $target = ui.target;

			alert("select " + ui.cmd + " on " + $target.text());
		},
		// Implement the beforeOpen callback to dynamically change the entries
		beforeOpen: function(event, ui) {
      var tab=[];
      classCss="myCustomClass";
      
      tab.push({  title: "Menu entry 1",
                  action: function(event, ui){
                      //reedIt(ui.cmd);
                  },
                  cmd: "myId",
                  addClass: classCss
              });
      
      $(document).contextmenu("replaceMenu", tab);
		}
	});

});
/* Only for the demo */
.hasmenu, .hasmenu2 {
	border: 1px solid #008;
	margin: 3px;
	padding: 5px;
	width: 30px;
}
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>jquery.ui-contextmenu.js - Demo</title>

	<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet" />

	<script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
	<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
	<script src="//cdn.jsdelivr.net/jquery.ui-contextmenu/1.11.0/jquery.ui-contextmenu.min.js" type="text/javascript"></script>
</head>

<body class="example">
	<h1>jquery.ui-contextmenu.js</h1>

	<p>Right-click in an element to open the context menu:</p>
	<div>
		<span class="hasmenu" tabindex="0">AAA</span>
		<span class="hasmenu" tabindex="0">BBB</span>
		<span class="hasmenu" tabindex="0">CCC</span>
	</div>
</body>
</html>

于 2015-10-10T16:29:31.503 に答える