0

I'm using the jquery contextmenu plugin, and try to add a custom class to meny entry.

I push entry in a tab like this :

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);

It works well but not for the addClass option.

Here's the generate <li> item for this menu :

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

myCustomClassis not added to the item.

Is there something wrong in my syntax or something ?

user3469203
  • 537
  • 1
  • 9
  • 22

1 Answers1

0

It seems to work here:

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>
mar10
  • 14,320
  • 5
  • 39
  • 64
  • thanks ! finally, I have removed contextmenu, to develop my own solution. It seems that contextmenu is not easily adaptable. – user3469203 Oct 12 '15 at 09:04