jquery contextMenu添加自定义类

时间:2015-10-06 16:39:23

标签: jquery jquery-ui-contextmenu

我正在使用jquery contextmenu插件,并尝试将自定义类添加到meny条目中。

我在这样的标签中按下条目:

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未添加到该项目中。

我的语法有什么问题吗?

1 个答案:

答案 0 :(得分:0)

似乎在这里工作:

&#13;
&#13;
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);
		}
	});

});
&#13;
/* Only for the demo */
.hasmenu, .hasmenu2 {
	border: 1px solid #008;
	margin: 3px;
	padding: 5px;
	width: 30px;
}
&#13;
<!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>
&#13;
&#13;
&#13;