jquery 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。

我的语法有问题吗?

这里似乎行得通:

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>

相关内容

最新更新

热门标签：